Javascript

Explain == vs ===

== is the abstract equality operator while === is the strict equality operator. The == operator will compare for equality after doing any necessary type conversions. The === operator will not do type conversion, so if two values are not the same type === will simply return false. When using ==, funky things can happen, such as:

What is a higher-order function?

A higher-order function is any function that takes one or more functions as arguments, which it uses to operate on some data, and/or returns a function as a result. Higher-order functions are meant to abstract some operation that is performed repeatedly. The classic example of this is map, which takes an array and a function as arguments. map then uses this function to transform each item in the array, returning a new array with the transformed data. Other popular examples in JavaScript are forEach, filter, and reduce. A higher-order function doesn't just need to be manipulating arrays as there are many use cases for returning a function from another function. Function.prototype.bind is one such example in JavaScript.

Advantages and Disadvantages of AJAX

Advantages - Better interactivity. New content from the server can be changed dynamically without the need to reload the entire page. Reduce connections to the server since scripts and stylesheets only have to be requested once. State can be maintained on a page. JavaScript variables and DOM state will persist because the main container page was not reloaded. Basically most of the advantages of an SPA. Disadvantages - Dynamic webpages are harder to bookmark. Does not work if JavaScript has been disabled in the browser. Some webcrawlers do not execute JavaScript and would not see content that has been loaded by JavaScript. Basically most of the disadvantages of an SPA.

Explain AJAX

Ajax (asynchronous JavaScript and XML) is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly substitute use JSON instead of XML, due to the advantages of JSON being native to JavaScript. The XMLHttpRequest API is frequently used for the asynchronous communication or these days, the fetch API.

Explain prototypal inheritance

All Javascript objects have a prototype property which is a reference to another object. When is property is accessed on an object and is not found, the Javascript engine looks at the object's prototype and that prototype's prototype until the end of the prototype chain.

Why promise over callback?

Avoid callback hell which can be unreadable. Makes it easy to write sequential asynchronous code that is readable with .then(). Makes it easy to write parallel asynchronous code with Promise.all(). Cons Slightly more complex code (debatable). In older browsers where ES2015 is not supported, you need to load a polyfill in order to use it.

What is the difference between .call and .apply?

Both .call and .apply are used to invoke functions and the first parameter will be used as the value of this within the function. However, .call takes in comma-separated arguments as the next arguments while .apply takes in an array of arguments as the next argument. An easy way to remember this is C for call and comma-separated and A for apply and an array of arguments.

What is a closure

Closures are functions that have access to the outer (enclosing) function's variables—scope chain even after the outer function has returned.

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

ES6's spread syntax is very useful when coding in a functional paradigm as we can easily create copies of arrays or objects without resorting to Object.create, slice, or a library function. This language feature is used often in Redux and rx.js projects. ES6's rest syntax offers a shorthand for including an arbitrary number of arguments to be passed to a function. It is like an inverse of the spread syntax, taking data and stuffing it into an array rather than unpacking an array of data, and it works in function arguments, as well as in array and object destructuring assignments.

Explain event delegation

Event delegation is a technique involving adding event listeners to parent element instead of its descendants due to event bubbling up the DOM Benefits are memory and helps with removing the need to unbind and bind added or removed elements.

What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?

Fixes some of the longstanding problems in JavaScript and discourages JavaScript anti-patterns. Enables you to write shorter code, by providing some syntactic sugar on top of JavaScript, which I think ES5 lacks, but ES2015 is awesome. Static types are awesome (in the case of TypeScript) for large projects that need to be maintained over time. Disadvantages: Require a build/compile process as browsers only run JavaScript and your code will need to be compiled into JavaScript before being served to browsers. Debugging can be a pain if your source maps do not map nicely to your pre-compiled source. Most developers are not familiar with these languages and will need to learn it. There's a ramp up cost involved for your team if you use it for your projects. Smaller community (depends on the language), which means resources, tutorials, libraries, and tooling would be harder to find. IDE/editor support might be lacking. These languages will always be behind the latest JavaScript standard. Developers should be cognizant of what their code is being compiled to — because that is what would actually be running, and that is what matters in the end.

Explain Hoisting

Hoisting is a term used to explain the behavior of variable declarations in your code. Variables declared or initialized with the var keyword will have their declaration "moved" up to the top of the current scope, which we refer to as hoisting. However, only the declaration is hoisted, the assignment (if there is one), will stay where it is.

How is your code organized?

I use React/Redux which utilize a single-directional data flow based on Flux architecture. I would represent my app's models using plain objects and write utility pure functions to manipulate these objects. State is manipulated using actions and reducers like in any other Redux application.

Difference between host and native objects?

Native objects are objects that are part of the JavaScript language defined by the ECMAScript specification, such as String, Math, RegExp, Object, Function, etc. Host objects are provided by the runtime environment (browser or Node), such as window, XMLHTTPRequest, etc.

Promises and its polyfills

Possess working knowledge of it. A promise is an object that may produce a single value sometime in the future: either a resolved value or a reason that it's not resolved (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection. Some common polyfills are $.deferred, Q and Bluebird but not all of them comply with the specification. ES2015 supports Promises out of the box and polyfills are typically not needed these days.

Explain Function.prototype.bind()?

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

What is an event loop?

The event loop is a single-threaded loop that monitors the call stack and checks if there is any work to be done in the task queue. If the call stack is empty and there are callback functions in the task queue, a function is dequeued and pushed onto the call stack to be executed.

Can you describe the main difference between a .forEach loop and a .map() loop and why you would pick one versus the other?

The main difference between .forEach and .map() is that .map() returns a new array. If you need the result, but do not wish to mutate the original array, .map() is the clear choice. If you simply need to iterate over an array, forEach is a fine choice.

Null vs Undefined vs Undeclared

Undeclared: Undeclared variables are created when you assign a value to an identifier that is not previously created using var, let or const Undefined: A variable that is undefined is a variable that has been declared, but not assigned a value. It is of type undefined. If a function does not return any value as the result of executing it is assigned to a variable, the variable also has the value of undefined Null: A variable that is null will have been explicitly assigned to the null value. It represents no value and is different from undefined in the sense that it has been explicitly assigned.

What are the differences between variables created using let, var or const?

Variables declared using the var keyword are scoped to the function in which they are created, or if created outside of any function, to the global object. let and const are block scoped, meaning they are only accessible within the nearest set of curly braces (function, if-else block, or for-loop). var allows variables to be hoisted, meaning they can be referenced in code before they are declared. let and const will not allow this, instead throwing an error. let and const differ in that let allows reassigning the variable's value while const does not.

Explain event bubbling

When an event triggers on a DOM element, it will attempt to handle the event if there is a listener attached, then the event is bubbled up to its parent and the same thing happens. This bubbling occurs up the element's ancestors all the way to the document. Event bubbling is the mechanism behind event delegation.