If you qualify as a senior developer and your job involves JavaScript, you’re likely to be asked tough questions during your coding interview.

Follow this advice: “Practice makes perfect.” Learning JavaScript in depth and on a regular basis will improve your coding skills and improve your interview skills.

In this article, you’ll find 7 JavaScript interview questions that at first glance seem simple but tricky.

While these questions may seem arbitrary at first, they attempt to hook into important concepts of JavaScript. So you better practice before your next interview!

1. Unexpected global variables

Question

The following code snippet is used to evaluate the contents of typeof A and Typeof B:

function foo() { let a = b = 0; a++; return a; } foo(); typeof a; / / = >??? typeof b; / / = >???Copy the code

Answer

Let’s look at line 2: let a = b = 0. This statement declares a local variable a. However, it also declares a global variable b.

The variable b is not declared in the foo() scope or the global scope. So JavaScript interprets the b = 0 expression as window.b = 0. In other words, b is a global variable created by accident.

In the browser, the above code snippet is equivalent to:

function foo() {
  let a;
  window.b = 0;
  a = window.b;
  a++;
  return a;
}

foo();
typeof a;        // => 'undefined'
typeof window.b; // => 'number'`Copy the code

Typeof a is equal to ‘undefined’, and variable a exists in scope foo() and is not used outside scope.

Since b is a global variable with a value of 0, the value of type B is ‘number’.

2. The length property of the array

Question

What is the value of clothes[0]?

const clothes = ['jacket', 't-shirt']; clothes.length = 0; clothes[0]; / / = >???Copy the code

Answer

The length attribute of an array object has special behavior: reducing the value of the length attribute has the side effect of deleting its own array element. Therefore, all elements are removed when JavaScript executes clothes. Length = 0.

Clothes [0] = undefined because the clothes array has been cleared.

3. Hawk-eye Test

Question

What is the contents of the numbers array?

const length = 4; const numbers = []; for (var i = 0; i < length; i++); { numbers.push(i + 1); } numbers; / / = >???Copy the code

Answer

Let’s take a closer look at the semicolon; Appears in the opening brace {:

This semicolon is easy to ignore; it creates an empty statement. An empty statement is an empty statement that does nothing.

For () iterates 4 times over the empty statement (doing nothing), ignoring the block that actually pushes the item into the array: {number.push (I + 1); }. The above code is equivalent to the following code:

const length = 4; const numbers = []; var i; for (i = 0; i < length; i++) { // does nothing } { // a simple block numbers.push(i + 1); } numbers; / / = > [5]Copy the code

For () increments the I variable to 4, and JavaScript enters the block {number.push (I + 1) once; }, push 4 +1 into the numeric array. In addition, follow the wechat public account: Java Technology Stack and reply: Interview in the background, you can get the N Java interview questions I sorted out.

Therefore, the contents of the numbers array are [5].

4. Automatic semicolon insertion

Question

What value does arrayFromValue() return?

function arrayFromValue(item) { return [item]; } arrayFromValue(10); / / = >???Copy the code

Answer

It’s easy to miss the newline between the return keyword and the [item] expression. This newline causes JavaScript to automatically insert semicolons between return and [item] expressions.

This is the equivalent code, with the semicolon inserted after the return:

function arrayFromValue(item) {
  return;
  [item];
}

arrayFromValue(10); // => undefinedCopy the code

return; Function to return undefined internally. So arrayFromValue(10) is undefined.

Classic problem: Tricky closures

Question

What does the following code output to the console?

let i;
for (i = 0; i < 3; i++) {
  const log = () => {
    console.log(i);
  }
  setTimeout(log, 100);
}Copy the code

Answer

If you’ve never heard this tricky question before, chances are your answers are 0, 1, and 2: that’s wrong. That was my answer when I first tried to solve it!

There are two phases to executing this code snippet.

Phase 1

1. Repeat for() three times. During each iteration, a new function log() is created to capture variable I. Then setTimout() plans to execute log().

2. When the for() loop completes, the value of the I variable is 3.

Log () is a closure that captures the variable I defined in the outer scope of the for() loop. It is important to note that closures can lexically capture I variables.

Phase 2

The second phase occurs after 100ms: setTimeout() calls the planned log() three times. Log () reads the current value of variable I as 3 and records it to console 3. This is why the console output is 3, 3, and 3.

Do you know how to record code snippets as 0, 1, and 2? Post your solution in the comments below!

6. Floating point calculation

Question

What is the result of this equation?

0.1 + 0.2 === 0.3 // =>??Copy the code

Answer

First, let’s look at the values of 0.1 + 0.2:

0.1 + 0.2; / / = > 0.30000000000000004Copy the code

The sum of 0.1 and 0.2 is not exactly 0.3, but slightly more than 0.3.

Because floating-point numbers are encoded in binary mode, operations like adding floating-point numbers produce rounding errors.

In short, comparing floating-point numbers directly is not exact.

So 0.1 + 0.2 === 0.3 is false.

Go to www.javastack.cn for more tutorials.

7. Variable promotion

Question

What happens if myVar and myConst are accessed before the declaration?

myVar; / / = >??? myConst; / / = >??? var myVar = 'value'; Const myConst = 3.14;Copy the code

Answer

Promotion and temporary dead zones are two important concepts that affect the life cycle of JavaScript variables.

The result of accessing myVar before the declaration is undefined. Before initialization, the promoted var variable has the value of undefined.

However, calling myConst before declaring a row raises a ReferenceError. Const is in a temporary dead zone until the declaration line const myConst = 3.14.

The last

You can assume that certain questions are useless for the interview. I feel the same way, especially about the Hawk-eye test. Nonetheless, they may be asked.

In any case, many of these questions can really assess your JavaScript proficiency, such as tricky closures. If you have some difficulty reading the post, it’s a good indication of what you have to learn next!

Is it fair to ask tough questions in an interview? Let me know your opinion. Follow wechat public number: Java technology stack, in the background reply: interview, you can get me sorted out N Java interview questions dry goods.

Original: dmitripavlutin.com/simple-but-tricky-javascript-interview-questions author: Dmitri Pavlutin translation: do what engineers do not code farmers, blog.csdn.net/duninet/article/details/104886321

Read more on my blog:

1.Java JVM, Collections, Multithreading, new features series tutorials

2.Spring MVC, Spring Boot, Spring Cloud series tutorials

3.Maven, Git, Eclipse, Intellij IDEA series tools tutorial

4.Java, backend, architecture, Alibaba and other big factory latest interview questions

Life is good. See you tomorrow