1. What is a closure and why is it used?

A closure is a combination of a function and the lexical environment in which it is declared. The fields used in lexical scopes are determined by where variables are declared in the code. A closure is a function that can access the scope of an external (enclosing) function even if it is returned by an external function.

Why use closures?

  • Use closures to privatize data or simulate private methods.
  • Functions that are partial applications are curried.

2. Describe the event bubbling.

When an event is fired on a DOM element, if there is an event listener, it will try to handle the event, and then the event bubbles up to its parent element and the same thing happens. Finally, the event reaches the ancestor element.

3. Explain the same origin policy for JavaScript.

The same origin policy prevents JavaScript from making cross-domain requests. A source is defined as a combination of URI, host name, and port number. This policy prevents malicious scripts on a page from accessing sensitive data on another page through the document object model on that page.

4. Explain the difference between mutable and immutable objects.

  • What are examples of immutable objects in JavaScript?
  • What are the advantages and disadvantages of immutability?

Mutable objects can be changed after creation.

Immutable objects cannot be changed after they are created.

  1. inJavaScript,string 和 numberImmutable from the beginning of design.
  2. Immutable means keeping an object’s state unchanged, which has the advantage of making development easier, traceable, and test-friendly, reducing any possible side effects. However, whenever you want to add something to an Immutable object, it must first copy the existing value into a new instance, then add content to the new instance, and then return the new instance. This is bound to require more memory and computation than mutable objects.

5. Benefits of the Curry Function.

Currying is a mode in which a function with multiple arguments is broken into functions that, when called in series, will accumulate all required arguments one at a time. This technique helps write functional style code, making it more readable and compact. It is worth noting that for a function to be curried, it needs to start with a function and then decompose into a series of functions, each of which takes one argument.

6. What are the pros and cons of using Ajax?

advantages

  • Better interactivity. New content from the server can change dynamically without reloading the entire page.
  • Reduce connections to the server because scripts and styles need to be requested only once.
  • State can be maintained on a page. JavaScript variables and DOM state are preserved because the main container page has not been reloaded.
  • Basically includes most of the benefits of SPA.

disadvantages

  • Dynamic web pages are hard to bookmark.
  • This does not work if JavaScript is already disabled in the browser.
  • Some web crawlers do not execute JavaScript and do not see JavaScript loaded content.
  • Basically including most of the disadvantages of SPA.

7. Please explain the variable promotion (as required).

Variable promotion, or reactive, is the term used to explain the behavior of variable declarations in code. Variables declared or initialized with the var keyword “elevate” the declaration statement to the top of the current scope. However, only the declaration will trigger the promotion, and the assignment statement (if any) will remain unchanged. Let’s illustrate this with a couple of examples.

// Get promoted with var declaration
console.log(foo); // undefined
var foo = 1;
console.log(foo); / / 1

// let/const does not promote
console.log(bar); // ReferenceError: bar is not defined
let bar = 2;
console.log(bar); / / 2
Copy the code

Function declarations promote the function body, but function expressions (written as declared variables) only the variable declarations are promoted.

// Function declaration
console.log(foo); // [Function: foo]
foo(); // 'FOOOOO'
function foo() {
  console.log('FOOOOO');
}
console.log(foo); // [Function: foo]

// Function expression
console.log(bar); // undefined
bar(); // Uncaught TypeError: bar is not a function
var bar = function () {
  console.log('BARRRR');
};
console.log(bar); // [Function: bar]
Copy the code

8. What is the difference between the arrow function and other functions?

One obvious advantage of arrow functions is that they simplify the syntax of creating functions; we don’t need the function keyword in front of arrow functions. And the arrow function’s this is automatically bound to the context of the current scope, unlike normal functions. The this of normal functions is determined at execution time. This feature of the arrow function is particularly useful for callbacks, especially for the React component.

9. In the documentloadEvents andDOMContentLoadedWhat is the difference between events?

The DOMContentLoaded event is fired after the initial HTML document has been fully loaded and parsed, without waiting for the stylesheet, image, and subframe to complete loading.

The Window load event is triggered only after the DOM and all associated resources have been loaded.

10.PromiseWhat are the advantages and disadvantages of replacing callback functions?

Advantages:

  • Avoid unreadable callback hell.
  • use.then()Write sequential asynchronous code, both simple and easy to read.
  • usePromise.all()Writing parallel asynchronous code becomes easy.

Disadvantages:

  • In older browsers that don’t support ES2015, you need to introduce Polyfill to use it.

The resources

  • Front End Interview Handbook
  • Dada front-end personal Web share 92 JavaScript interview questions with additional answers