Javascript Questions

Can you explain what Function.call and Function.apply do? What's the notable difference between the two?

Function.call can be used to invoke a method with an owner object as an argument (parameter). With call(), an object can use a method belonging to another object. Foo.bar.call(anotherObject, "arg1", "arg2") The call() method takes arguments separately. The apply() method takes arguments as an array. Foo.bar.apply(anotherObject, ["arg1","arg2"])

What is the definition of a higher-order function?

Functions that operate on other functions, either by taking them as arguments or by returning them. arr.map(n => n * 2), reduce, filter

Explain 'this' in JavaScript.

'this' normally refers to the object which 'owns' the method, but it depends on how a function is called. Example: var person = { firstName: "Joe", lastName: "Schmo", showFullName: function () { console.log (this.firstName + " " + this.lastName); } } // The "context", when invoking showFullName, is the person object, when we invoke the showFullName () method on the person object. // And the use of "this" inside the showFullName() method has the value of the person object person.showFullName (); // Joe Schmo

What are some JavaScript design patterns?

4 common patterns: Module, Prototype, Observer, Singleton. Module pattern acts like a class. Allows encapsulation. You can control private or public access to variables and methods. You would instantiate a IIFE (Immediately invoked function expression) to allow for private scope. const MyModule = (function() { // declare private variables const a = 1; return { getA: function() { return a; } } })() Prototype pattern creates copies of existing objects as opposed to creating brand new objects. The biggest benefit is performance boost. JavaScript is prototype based language as opposed to class based. The prototype property in JS allows you to add new properties to object constructors: const Person = function( ) { this.name = 'Nai' } Person.prototype.lastName = 'Saevang' Person.prototype.talk = function() { console.log('Talk') } The Observer is a design pattern where an object (known as a subject) maintains a list of objects depending on it (observers), automatically notifying them of any changes to state. When a subject needs to notify observers about something interesting happening, it broadcasts a notification to the observers (which can include specific data related to the topic of the notification).

Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?

Arrow functions are more concise and don't have their own execution context. this and arguments are inherited from the parent function. A use case where code is more clean is map function. Example: arr.map(n => n.something)

Explain Function.prototype.bind.

Bind creates a new function that will have this set to the first parameter passed to bind(). Here's an example that shows how to use bind to pass a member method around that has the correct this: var Button = function(content) { this.content = content; }; Button.prototype.click = function() { console.log(this.content + ' clicked'); }; var myButton = new Button('OK'); myButton.click(); var looseClick = myButton.click; looseClick(); // not bound, 'this' is not myButton - it is the global object var boundClick = myButton.click.bind(myButton); boundClick(); // bound, 'this' is myButton

What tools and techniques do you use debugging JavaScript code?

Chrome console log. Redux dev tools.

What is closure in JavaScript? Why and how is it used?

Closures are inner functions inside of an outer function. They have their own local scope and has access to outer function's scope, variables and parameters, and they also have access to global variables. Closures is a way to deal with scope issues. Reasons we use Closures is because Javascript is a function-level scope and Javascript is an asynchronous/event driven language. Example that Closure is frequently used is jQuery (ex. click()). Code Example: function outerFunc() { const a = 1; function innerFunc() { // the closure console.log(a); // has access to variable a } return innerFunc() } outerFunc(); // returns 1

Can you give an example of a curry function and why this syntax offers an advantage?

Currying transforms a function into a sequence of functions each taking a single argument of the function. We can avoid frequently calling the function with the same arguments all the time. Example: function discount(price, discount) { return price * discount} curried: function discount(discount) { return function(price) { return price * discount; } } const tenPercentDiscount = discount(0.10) tenPercentDiscount(9.99)

What are the benefits of using spread syntax and how is it different from rest syntax?

Difference between the rest and spread syntax is that while spread copies everything, rest is used when we want to retrieve all remaining elements (or all existing elements) after a destructuring operation.

Explain event delegation, event bubbling, event capturing.

Event delegation is when you add an event handler to the parent element to avoid adding event handlers to multiple child elements. Event bubbling is when the event is first captured and handled by the innermost element and then propagated to outer elements. Event capturing is when the event is first captured by the outermost element and propagated to inner elements.

Explain Hoisting in JavaScript?

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. (function() { var foo = 1; alert(foo + " " + bar + " " + baz); var bar = 2; var baz = 3; })(); prints bar and baz as undefined. they are hoisted to the top of the scope before execution so they are still declared but not assigned.

Explain the difference between: function Person(){}, var person = Person(), and var person = new Person()?

function Person is the object constructor. var person = Person() will be undefined. new Person will be Person object.

Explain the same-origin policy with regards to JavaScript.

The same origin policy states that a web browser permits script contained in one page (or frame) to access data in another page (or frame) only if both the pages have the same origin. By same origin, it means that both the pages should have been generated from same domain or sub domain. The same-origin policy helps prevent malicious attacks by stopping code from another site executing on your site. An attacks like this is known as a Cross Site Scripting attack.

What is the difference between == and ===?

While "==" checks only for equality, "===" checks for equality as well as the type. "2" == 2 true but "2" === 2 is false

What's a typical use case for anonymous functions?

callbacks passed in to other functions, self-invoking function. setTimeout(function() { // do stuff}) (function() { // do something })()

What language constructions do you use for iterating over object properties and array items? Can you describe the main difference between the Array.forEach() loop and Array.map() methods and why you would pick one versus the other?

i use for loops or map, reduce, filter. forEach executes a function once for each array element allowing you to mutate the current array. map creates a new array with the results of calling a provided function on every element. map is faster and is preferable when changing data. forEach is good when you want to do something like saving to the database and not changing the data.

What's the difference between a variable that is: null, undefined or undeclared? How would you go about checking for any of these states?

undefined means a variable has been declared but has not yet been assigned a value. On the other hand, null is an assignment value. It can be assigned to a variable as a representation of no value. you can check if null by doing if (val === null) if (val === undefined) or if (typeof val === 'undefined')