JS ninja

Question 1

what are the steps of the page building phases?

Answer 1

1. Parsing the html and building the DOM

2. Executing JS code

Question 2

What is the DOM?

Answer 2

It’s a structured representation of the HTML page in which every HTML element is represented as a node

Question 3

what happens when the browser encounters the script tag while constructing the DOM?

Answer 3

the browser pauses the DOM construction from HTML code and starts executing JavaScript code

Question 4

which is the primary global object that the browser exposes to the JS engine?

Answer 4

The primary global object that the browser exposes to the JavaScript engine is the window object

Question 5

how does the browser keeps track of all the events that have occurred?

Answer 5

the browser uses an event queue

Question 6

Describe the event handling loop

Answer 6

1. check the head’s queue for pending event handlers to be executed
2. if the is one, goto step 3, else goto step 1
3. executed the event handler, goto step 1

Question 7

which are the 2 phases of the execution of a client app?

Answer 7

1. page building

2. event handling

Question 8

how many event can be processed at a time?

Answer 8

only one, JS in single threaded by default

Question 9

In what order are events from the event queue processed?

Answer 9

In the same order in which they were triggered: the queue follows a FIFO logic
first in first out

Question 10

what are the 3 most important ways that JS provides for the definition of a function

Answer 10

1. function declarations and function expressions
2. arrow functions
   3 functions generators

Question 11

What are rest parameters?

Answer 11

Rest parameters enable us to reference the remaining arguments that don’t have matching parameter names.

Question 12

which are the implicit function parameters?

Answer 12

The implicit function parameters are ‘this’ and ‘arguments’

Question 13

What is the ‘this’ parameter?

Answer 13

The this parameter refers to an object that’s associated with the function invocation. For this reason, it’s often termed the function context.

Question 14

How many ways are there for invoking a function in JS? List them and briefly describe them

Answer 14

There are 4 way:

1. The simple form foo()
2. as a method ninja.foo()
3. as a constructor new Foo()
4. via the apply or call methods foo.apply(ninja) or foo.call(ninja)

Question 15

What is the value of the ‘this’ object when invoking a function in the first simplest form => foo()

Answer 15

• In the nonstrict mode it will the global context, the window object
• in strict mode it will be undefined

Question 16

What’s the difference between function constructors and constructor functions?

Answer 16

A function constructor enables us to create functions from dynamically created strings. On the other hand, constructor functions, are functions that we use to create and initialize object instances.

Question 17

what steps are triggered when using the keyword ‘new’ to call a function?

Answer 17

1. A new empty object is created.
2. This object is passed to the constructor as the this parameter, and thus becomes the constructor’s function context.
3. The newly constructed object is returned as the new operator’s value (with an exception that we’ll get to in short order).

Question 18

what happens when a constructor returns a value? what if that value is an object, e.g:

const puppet = {
  rules: false;
}

function Emperor() {
  this.rules = true;
  return puppet;
}

Answer 18

1. If the constructor returns an object, that object is returned as the value of the whole new expression, and the newly constructed object passed as this to the constructor is discarded.
2. If, however, a nonobject is returned from the constructor, the returned value is ignored, and the newly created object is returned.

Question 19

does arrow functions has the “this” value?

Answer 19

No, Arrow functions pick up the value of the this parameter at the moment of their creation, the value of this is taken from the context.

Question 20

explain the bind method

Answer 20

It’s a method that every functions have and creates a new function. This function has the same body, but its context is always bound to a certain object, regardless of the way we invoke it.

Question 21

give the definition of scope

Answer 21

a scope refers to the visibility of identifiers in certain parts of a program. A scope is a part of the program in which a certain name is bound to a certain variable.

Question 22

what’s the cost of a closure ?

Answer 22

Each function that accesses information via a closure has a “ball and chain” attached to it, carrying this information around.
So although closures are incredibly useful, they aren’t free of overhead. All that information needs to be held in memory until it’s absolutely clear to the JavaScript engine that it’s no longer needed (and is safe to garbage-collect), or until the page unloads.

Question 23

what the difference between function context and execution context?

Answer 23

function context is the object on which our function is invoked, which can be accessed through the this keyword. An execution context, although it has a similar name, is a completely different thing. It’s an internal JavaScript concept that the JavaScript engine uses to track the execution of our functions.

Question 24

what is a lexical environment?

Answer 24

A lexical environment is an internal JavaScript engine construct used to keep track of the mapping from identifiers to specific variables

Question 25

how does js keeps tracks of an outer environment from a lexical environment?

Answer 25

JavaScript does this by taking advantage of functions as first-class objects.

Whenever a function is created, a reference to the lexical environment in which the function was created is stored in an internal (meaning that you can’t access or manipulate it directly) property named [[Environment]]; double brackets is the notation that we’ll use to mark these internal properties.

Question 26

describe js executions phases

Answer 26

The execution of JavaScript code occurs in two phases.

1. The first phase is activated whenever a new lexical environment is created. In this phase, the code isn’t executed, but the JavaScript engine visits and registers all declared variables and functions within the current lexical environment.
2. The second phase is the JS execution

Question 27

what is a closure?

Answer 27

it’s a mechanism that allows a function to access all identifiers that are in scope when the function itself is created

Question 28

what are generetors?

Answer 28

Generators are a special type of function. Whereas a standard function produces at most a single value while running its code from start to finish, generators produce multiple values, on a per request basis, while suspending their execution between these requests.

Question 29

what is a promise?

Answer 29

Promises, on the other hand, are a new, built-in type of object that help you work with asynchronous code. A promise is a placeholder for a value that we don’t have yet but will at some later point. They’re especially good for working with multiple asynchronous steps.

Question 30

what new syntax is introduced for generators?

Answer 30

the asterisk after the “function” keyword must be used. That enables us to the keyword yield inside the body of the generator, to produce individual values

Question 31

what kind of loop is used to consume the values of a generator function?

Answer 31

the “for-of” loop:
for(let weapon of WeaponGenerator()) {
assert(weapon, weapon);
}

Question 32

what does a generator function returns?

Answer 32

no return statement is used inside a generator, unlike standard functions generators implicitly creates and return an object called “iterator”

Question 33

describe the iterator object

Answer 33

it’s used to control the provided values from a generator.
It has a next() method: As a response to that call, the generator executes its code until it reaches a yield keyword that produces an intermediary result (one item in the generated sequence of items), and returns a new object that encapsulates that result and tells us whether its work is done.

Question 34

how would implement a “for-of”?

Answer 34

using a while:
let item;
while(!(item = iterator.next()).done) {
...
}

Question 35

what is this syntax “yield* foo()” used for

Answer 35

it’s like calling a function from a function but for generator. All calls to the original generator are rerouted to the foo() generator as long as he has values