26 selected JavaScript interview questions

We’ve compiled 26 simple and in-depth questions from various platforms to help you with your interview

• I Wish I Knew
• Translator: Fundebug

To ensure readability, free translation rather than literal translation is used in this paper. In addition, the copyright of this article belongs to the original author, and translation is for study only.

Fundebug focuses on JavaScript, wechat applets, wechat games, Node.js and Java online bug monitoring in real time. Really a good bug monitoring service, many big companies are using.

For the sixth year in a row, JavaScript holds the record as the most commonly used programming language, according to Stack Overflow’s 2018 annual survey. For a full-stack engineer, JavaScript is a must-have language and is often asked in interviews. I’ve compiled all the common JavaScript interview questions from fullstack.cafe for your reference:

Q1: How do type conversions work in JavaScript?

var a = "42";
var b = Number( a );
a;              // "42"
b;              // 42 -- the number!
Copy the code

var a = "42";
var b = a * 1;  // "42" implicitly coerced to 42 here
a;              // "42"
b;              // 42 -- the number!
Copy the code

Q2: What does scope look like in JavaScript?

Topic: JavaScript Difficulty: ⭐

In JavaScript, each function has its own scope. A scope can be understood as a collection of variables and the corresponding rules for how to access them. Only variables inside a function can access variables in that function domain.

Variable names must be unique within the same scope. Scopes can be nested. In the innermost scope, you can access any variable in the outer scope.

Q3: Explain the equality judgment in JavaScript

var a = "42";
var b = 42;

a == b;         // true
a === b;        // false
Copy the code

Q4: Please explain what a callback is and provide a simple example

Topic: JavaScript Difficulty: ⭐⭐

A callback function is a function that is passed as an argument to another function that is called when some operation has finished. Here is a simple example of calling a callback function to print a line of log when the array is modified.

function modifyArray(arr, callback) {
  // do something to arr here
  arr.push(100);
  // then execute the callback function that was passed
  callback();
}

var arr = [1, 2, 3, 4, 5];
modifyArray(arr, function() {
  console.log("array has been modified", arr);
});
Copy the code

Q5: What is the use of “use strict”?

function doSomething(val) {
  "use strict"; 
  x = val + 10;
}
Copy the code

function doSomething(val) {
  "use strict"; 
  var x = val + 10;
}
Copy the code

Q6: Please explain Null and Undefined

Topic: JavaScript Difficulty: ⭐⭐

JavaScript and TypeScript have two basic types: null and undefined. They have different meanings:

• If it has not been initialized, yesundefined;
• If not, yesnullTo represent;

Q7: Please implement the following functions

var addSix = createBase(6);
addSix(10); // returns 16
addSix(21); // returns 27
Copy the code

function createBase(baseNumber) { return function(N) { // we are referencing baseNumber here even though it was declared  // outside of this function. Closures allow us to do this in JavaScript return baseNumber + N; } } var addSix = createBase(6); addSix(10); addSix(21);Copy the code

Q8: Please explain the values and types in JavaScript

Topic: JavaScript Difficulty: ⭐⭐

Here are the available types built into JavaScript:

• string
• number
• boolean
• Null, and undefined
• object
• Symbol (new syntax for ES6)

Q9: Please explain the event bubbling and how to stop it?

Q10. Explain the let keyword in JavaScript

Topic: JavaScript Difficulty: ⭐⭐

ES6 allows you to declare block scopes using the let keyword ({… }).

Source: github.com/getify

Q11: How do I check if a number is an integer?

function isInt(num) { return num % 1 === 0; } console.log(isInt(4)); / / true on the console. The log (isInt (12.2)); / / false console. The log (isInt (0.3)); // falseCopy the code

Q12: What is IIFEs(Immediately Invoked Function Expressions)?

Topic: JavaScript Difficulty: ⭐⭐

IIFE is called an immediate expression, and as the name implies, an expression is executed as soon as it is created.

(function IIFE(){ console.log( "Hello!" ); }) (); // "Hello!"Copy the code

This method is commonly used to avoid polluting the global namespace because all variables used in IIFE are not externally accessible.

Source: stackoverflow.com

Q13: How do you compare two objects in JavaScript?

Var a = [1, 2, 3]; Var b = [1, 2, 3]; Var c = "1, 2, 3"; a == c; // true b == c; // true a == b; // falseCopy the code

Q14: Please explain the difference between ES5 and ES6

Topic: JavaScript Difficulty: ⭐⭐⭐

• ECMAScript 5 (ES5): The fifth version of ECMAScript, standardized in 2009. The standard is fully supported by almost all browsers.
• ECMAScript 6 (ES6)/ECMAScript 2015 (ES2015): The sixth version of ECMAScript, standardized in 2015. Currently, it is only partially supported by major browsers.

Here are the main differences:

• Arrow functions and string embedding:

const greetings = (name) => {
      return `hello ${name}`;
}
Copy the code

Even:

const greetings = name => `hello ${name}`;
Copy the code

• Const declarations: Like constants in other programming languages, but different. Here,constOn behalf of theconstant reference. That is, you can change the value of the object it points to. But you cannot change the value of its reference.

const NAMES = [];
NAMES.push("Jim");
console.log(NAMES.length === 1); // true
NAMES = ["Steve", "John"]; // error
Copy the code

• Block-scoped variables: New keywords in ES6letAllow allows developers to limit the scope of variables to the block level. Don’t likevarOne variable goes up.
• Parameter Defaults: Allows you to specify default values during function definition.

// Basic syntax function multiply (a, b = 2) { return a * b; } multiply(5); / / 10Copy the code

• Class definition and inheritance

ES6 starts to support defining classes (using the class keyword), constructors (using the constructor keyword), and extend keywords to implement inheritance.

• The for – operation

for… The of statement is used to iteratively access all attributes of an object.

• Spread operator: used for object merging

const obj1 = { a: 1, b: 2 } const obj2 = { a: 2, c: 3, d: 4} const obj3 = {... obj1, ... obj2}Copy the code

• Promises: Promises provide a way to handle asynchronous operations. You can implement this with callback functions, but promises are much cleaner and more readable.

const isGreater = (a, b) => {
  return new Promise ((resolve, reject) => {
    if(a > b) {
      resolve(true)
    } else {
      reject(false)
    }
    })
}
isGreater(1, 2)
  .then(result => {
    console.log('greater')
  })
 .catch(result => {
    console.log('smaller')
 })
Copy the code

• Export and import of modules.

const myModule = { x: 1, y: () => { console.log('This is ES5') }}
export default myModule;
Copy the code

import myModule from './myModule';
Copy the code

Source: Bulby. IO

Q15: please explainundefinedandnot definedThe difference between

var x; // declaring x
console.log(x); //output: undefined
Copy the code

var x; // Declaration
if(typeof x === 'undefined') // Will return true
Copy the code

console.log(y);  // Output: ReferenceError: y is not defined
Copy the code

Q16: What is the difference between anonymous and named functions?

Topic: JavaScript Difficulty: ⭐⭐⭐

var foo = function() { // anonymous function assigned to variable foo
    // ..
};

var x = function bar(){ // named function (bar) assigned to variable x 
    // ..
};

foo(); // actual function execution
x();
Copy the code

Anonymous functions cannot be called if they are not assigned to a variable. It’s unnecessary to assign a named function again.

Q17: What are closures in JavaScript? Please provide an example

var globalVar = "abc"; // Parent self invoking function (function outerFunction (outerArg) { // begin of scope outerFunction // Variable declared in outerFunction function scope var outerFuncVar = 'x'; // Closure self-invoking function (function innerFunction (innerArg) { // begin of scope innerFunction // variable declared in innerFunction function scope var innerFuncVar = "y"; console.log( "outerArg = " + outerArg + "\n" + "outerFuncVar = " + outerFuncVar + "\n" + "innerArg = " + innerArg + "\n"  + "innerFuncVar = " + innerFuncVar + "\n" + "globalVar = " + globalVar); // end of scope innerFunction })(5); // Pass 5 as parameter // end of scope outerFunction })(7); // Pass 7 as parameterCopy the code

outerArg = 7
outerFuncVar = x
innerArg = 5
innerFuncVar = y
globalVar = abc
Copy the code

Q18: How do I create private variables in JavaScript?

⭐⭐⭐⭐

You can create private variables by declaring them in functions. Because in a function, the outside is not directly accessible.

function func() {
  var priv = "secret code";
}

console.log(priv); // throws error
Copy the code

To access the variable, a helper function can be constructed to return the value.

function func() {
  var priv = "secret code";
  return function() {
    return priv;
  }
}

var getPriv = func();
console.log(getPriv()); // => secret code
Copy the code

Source: coderbyte.com

Q19: Prototype Design Pattern

Q20: Judge whether a given string is isomorphic

⭐⭐⭐⭐

First, what is called A homomorphism: two strings, if each character in the string A can be found in A unique correspondence in the string B, and the sequence corresponds one to one; If such A function exists, then A and B are homomorphic.

• paperandtitlehomomorphic
• eggandsadDifferent states
• dggandaddhomomorphic

isIsomorphic("egg", 'add'); // true isIsomorphic("paper", 'title'); // true isIsomorphic("kick", 'side'); // false function isIsomorphic(firstString, secondString) { // Check if the same length. If not, they cannot be isomorphic if (firstString.length ! == secondString.length) return false var letterMap = {}; for (var i = 0; i < firstString.length; i++) { var letterA = firstString[i], letterB = secondString[i]; // If the letter does not exist, create a map and map it to the value // of the second letter if (letterMap[letterA] === undefined) { letterMap[letterA] = letterB; } else if (letterMap[letterA] ! == letterB) { // Eles if letterA already exists in the map, but it does not map to // letterB, that means that A is mapping to more than one letter. return false; } } // If after iterating through and conditions are satisfied, return true. // They are isomorphic return true; }Copy the code

Source: github.com/kennymkchan

Q21: TranspilingWhat does it mean?

Q22: thisHow do keywords work? Please provide some examples

⭐⭐⭐⭐

In JavaScript, this always refers to the “owner” of the function (that is, the object that points to the function), or the object that owns the function.

function foo() {
    console.log( this.bar );
}

var bar = "global";

var obj1 = {
    bar: "obj1",
    foo: foo
};

var obj2 = {
    bar: "obj2"
};

foo();          // "global"
obj1.foo();     // "obj1"
foo.call( obj2 );  // "obj2"
new foo();       // undefined
Copy the code

Source: quirksmode.org

Q23: How to add your own custom functions to an Array object to make the following code work.

var arr = [1, 2, 3, 4, 5];
var avg = arr.average();
console.log(avg);
Copy the code

Array.prototype.average = function() { // calculate sum var sum = this.reduce(function(prev, cur) { return prev + cur; }); // return sum divided by number of elements return sum / this.length; } var arr = [1, 2, 3, 4, 5]; var avg = arr.average(); console.log(avg); / / = > 3Copy the code

Q24: what does ascending (as of July 1) mean in JavaScript?

⭐⭐⭐⭐

Promotion (as of 1997) means that the JavaScript interpreter lifts all variable and function declarations to the top of that scope. There are two types of promotion:

• Variable ascension
• Function increase

Variables and functions declared in one scope are available in the entire scope.

var a = 2; foo(); // works because `foo()` // declaration is "hoisted" function foo() { a = 3; console.log( a ); // 3 var a; // declaration is "hoisted" // to the top of `foo()` } console.log( a ); / / 2Copy the code

Although the foo() function is defined later, it can also be called at the front.

Q25: What result does the following code return?

0.1 + 0.2 === 0.3
Copy the code

Q26: Please describe the Revealing Module Pattern.

⭐⭐⭐⭐⭐

A variation of the Module pattern is Revealing Module pattern. The purpose of this design pattern is to achieve good code isolation, only exposing variables and functions that need to be exposed. A direct implementation would look like this:

var Exposer = (function() { var privateVariable = 10; var privateMethod = function() { console.log('Inside a private method! '); privateVariable++; } var methodToExpose = function() { console.log('This is a method I want to expose! '); } var otherMethodIWantToExpose = function() { privateMethod(); } return { first: methodToExpose, second: otherMethodIWantToExpose }; }) (); Exposer.first(); // Output: This is a method I want to expose! Exposer.second(); // Output: Inside a private method! Exposer.methodToExpose; // undefinedCopy the code

Source: pausing. IO

About Fundebug

Fundebug focuses on JavaScript, wechat applets, wechat mini games, Alipay applets, React Native, Node.js and Java real-time BUG monitoring. Since its official launch on November 11, 2016, Fundebug has handled more than 800 million error events in total, which has been recognized by many well-known users such as Google, 360, Kingsoft, and People’s Net. Welcome free trial!