MOVED TO ANKI JavaScript Interview Questions

What are associative arrays and how are they implemented in JavaScript?

An associative array is like an array with *named indexes*, for example numbers["two"] = 2. Associative arrays in JavaScript are just *objects*, for example: let assocArray = {one: 1, two: 2}; console.log(assocArray.two); // 2 console.log(assocArray[two]); // 2 console.log(assocArray["two"]); // 2 BUT when you access assocArray.two, behind the scenes JavaScript uses a *hash function* to calculate an array index, so performance is O(1) like a *hash table*. // Add an element if (!("three" in assocArray)) { assocArray.three = 3; } // Remove an element if ("three" in assocArray) { delete assocArray.three; }

What is "code splitting"?

Code splitting is a feature of *Webpack* that allows you to split your code into various *bundles* which can then be loaded *on demand* or in *parallel*. An example of a common bundle is a "vendor bundle" which is cacheable on the client and only needs to be rebuilt when a framework or library updates.

Describe the scope in which JavaScript function declarations are hoisted

JavaScript function declarations are hoisted to the top of the global scope (unless they are declared within another function), but are not *available* until its file or <script> block is read. This is the reason for jQuery's $(document).ready(), which is only executed after all JavaScript files and <script> blocks have been read, and therefore their functions and global variables declared.

Describe hoisting in JavaScript

JavaScript interpreters hoist all variable and function declarations to the top of their scope (function or block if local) before executing the code. Note that hoisting only moves the declaration, any assignments are left in place.

Describe the JavaScript scoping rules and how they differ from most other languages

JavaScript variables and function declarations are either global or local. If local then they are either scoped to the closest function (functional scoping via "var") or block (block scoping, now available in ES6 via "let" and "const"). Most other languages implement only block scoping for local variables.

In JavaScript what is the justification for declaring all JavaScript vars at the top of each function?

JavaScript variables declared using "var" are scoped to and hoisted to the top of their enclosing function, so declaring them there makes the scoping clear to the reader. However the new ES6 "let" and "const" variables are block scoped and should be declared where they are used.

What does a "$" at the end of a JavaScript function or variable name indicate?

Syntactically, the dollar ($) character has no special meaning in JavaScript identifiers. It is, however, used by convention to indicate that the variable/function holds/returns an *Observable*. Additional Info: Observables are used extensively in Angular 2+. They were introduced in ES 2016 and also the 3rd-party JavaScript library RxJS (Reactive Extensions).

What is TypeScript?

TypeScript is a free and open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language.

What is Webpack?

Webpack is a very popular open-source *module bundler* for *JavaScript applications*, although the true power of Webpack is the sum of its parts. With the help of loaders, plugins, and *code splitting*, it can transform, minify and optimize all types of files before serving them as one or more bundles to the browser.

List the JavaScript data types

6 primitives: 1. Number 2. String 3. Boolean 4. Symbol (new in ECMAScript 6) 5. Null 6. Undefined and Object (including the Date object)

How do you stop event propagation in JavaScript?

*event.stopPropagation()* in an event handler stops the move upwards in the DOM hierarchy (or downwards if called during the capture phase), but on the current element all other handlers will run. Alternatively *event.stopImmediatePropagation()* stops the bubbling AND prevents other handlers on the current element from running. After it no other handlers execute.

JavaScript template literal

A template literal in ES6 is a string surrounded by backticks ( ` ) instead of single or double quotes.

What entities are hoisted in JavaScript?

All declarations except the new ECMAScript 2015 "class" (var, let, const, function, function*) are hoisted in JavaScript.

What does the "+" do in the following JavaScript: let id = +this.route.snapshot.paramMap.get('id');

Converts a string to a number

What is "event propagation" in JavaScript and how is it different from event bubbling and event capturing

Event propagation is the blanket term for both event bubbling and event capturing: 1. Capturing phase - the event goes down to the element. Rarely used. 2. Target phase - the event reached the target element. 3. Bubbling phase - the event bubbles up from the element.

Describe the uses of the backtick ( ` ) in JavaScript?

In ES6 a string defined using backticks instead of single or double quotes is called a *template literal* and has the following advantages over regular strings: 1. *Interpolate* variables or expressions using the ${expression} notation: let name = 'Dave'; console.log(`Hello ${name}! How are you?`); 2. They can be *multi-line* without using "\n" (see example above). 3. Can embed single and double quotes inside the backticks without escaping.

What are JavaScript closures and when/how are they used?

In JavaScript, if you declare a function within another function, then the context of the outer function remains accessible to the inner function even after returning from the outer function. This context is called the *closure*, and it includes the original parameters, global variables, and crucially its local variables (not just their original values). Note that a new closure is created for *each* call to a function; therefore avoid defining a function within a loop as this can behave unexpectedly because of the multiple closures. Runnable example: <button id="button">Click Me!</button> var element = document.getElementById('button'); element.addEventListener("click", (function() { // init the count to 0 var count = 0; return function(e) { // <- This function becomes the click handler count++; // and will retain access to the above 'count' if (count === 3) { // Do something every third time console.log("Third time's the charm!"); // Reset counter count = 0; }};})()); https://stackoverflow.com/questions/111102/how-do-javascript-closures-work

What is "event bubbling" in JavaScript and how is it different from event capturing and event propagation

The event bubbling phase occurs after the capturing and target phases if propagation hasn't been stopped. It first runs the handlers on the target element, then on its parent in the DOM, then all the way up on other ancestors. Almost all events bubble.

What is "event capturing" in JavaScript and how is it different from event bubbling and event propagation

The event capturing phase occurs before event bubbling and starts from the window to document all the way down the DOM hierarchy to the element. Handlers are rarely used during the capture phase but can be added by setting the 3rd parameter to true in el.addEventListener('click', listener, true).

Describe the difference between a JavaScript function declaration and function expression, and why it matters

function showState() {} // function declaration var showState = function() {}; // function expression Function declarations are hoisted above variable declarations, so the 2nd function above will always override the 1st, no matter which comes first in the code. Also function declarations must have a name, while function expressions can be anonymous.