If you qualify as a senior JavaScript developer, there’s a good chance you’ll be asked some tough questions during your coding interview.

I know it’s not fair. Some unknown person put you in a corner and looked you up and down, as if to see what you were made of. It was an unpleasant experience.

What can you do?

Follow this advice: “Practice makes perfect.” By investing enough time to better understand JavaScript on a regular basis, you will improve your coding and, incidentally, your interview skills.

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

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

1. Unexpected global variables

The problem

In the following code, what are the values of typeof A and typeof B respectively:

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

The answer

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

The variable b is not declared in the foo() or global scope. So JavaScript interprets the expression b = 0 as window.b = 0.

B is a global variable created by accident.

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

function foo() {
  let a;  window.b = 0;  a = window.b;  a++;
  returna; } foo(); typeof a; / / = >'undefined'typeof window.b; / / = >'number'
Copy the code

Typeof a is ‘undefined’. The variable a is only declared in scope foo() and is not available outside scope.

Typeof B equals ‘number’. B is a global variable with a value of 0.

2. Array length property

The problem

What is the value of clothes[0] :

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

The answer

The length property of an array object has a special behavior:

Reducing the value of the length attribute has the side effect of removing elements whose indexes are between the old and new length values.

Because of the behavior of length, when JavaScript executes clothes. Length = 0, all items in the array clothes are removed.

Clothes [0] is undefined because the clothes array is cleared.

3. Hawk-eye test

The problem

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

The answer

Let’s take a closer look at the semicolon that appears before the open curly brace {; :

It’s easy to ignore the semicolon, and it creates an empty statement. A null statement is a statement that does nothing.

For () loops through the empty statement (doing nothing) four times, ignoring the block that actually adds elements to the array {numbers.push(I + 1); }.

The above code is equivalent to:

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 variable I up to 4. The JavaScript then goes into the code block {numbers.push(I + 1); }, add 4 + 1 to the numbers array.

So numbers are [5].

My story behind this question

I was asked this question a long time ago when I was interviewing for my first job. During the interview, I was asked to answer 20 coding questions in an hour. Null statements are among them. When I solve this problem in a hurry, I don’t see the comma; Just before the curly braces {. So I got the wrong answer [1,2,3,4] and I’m a little disappointed with the unfair tricks. I asked the interviewer why? The interviewer replied, “Because we need someone who pays attention to detail.” Luckily, I didn’t end up working for that company.

What do you think about this?

4. Automatically insert semicolons

The problem

What value does arrayFromValue() return?

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

The answer

It’s easy to ignore a line break between the return keyword and the [items] expression.

JavaScript automatically inserts a semicolon between the return and [items] expressions.

Here’s an equivalent code that inserts a semicolon after a return:

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

arrayFromValue(10); // => undefined
Copy the code

Return in a function; Cause it to return undefined.

So arrayFromValue(10) is undefined.

Check out this article to read more about automatic semicolon insertion.

5. Classic problem: Lousy closures

The problem

The following script will output what on the console:

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

The answer

If you haven’t heard this tricky question before, your answer is probably 0, 1 and 2, which isn’t true. When I first tried to solve it, my answer was the same!

Executing this code snippet involves two steps. Step 1

  1. for()Iterate 3 times. During each iteration, a new function is createdlog(), it captures variablesi. thensetTimout()performlog().
  2. whenfor()When the loop is complete,iThe value of the variable is3.

Log () is a closure that captures variable I, defined outside the scope of the for() loop. It is important to understand that closures capture the variable I lexically. Step 2

Step 2 occurs after 100 ms:

SetTimeout () invokes three log() callbacks in the queue. Log () reads the current value of variable I, which is 3, and records it to console 3.

That’s why the console prints 3, 3, and 3.

Do you know how to make code output0.1, and2? Please write your proposals in the comments.

6. Floating point problems

The problem

What is the result of the equal sign?

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

The 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 greater than 0.3.

Operations like floating-point addition are subject to rounding errors due to the encoding mechanism of floating-point numbers in binary.

Simply put, direct comparisons of floating-point numbers are inexact.

So 0.1 + 0.2 === 0.3 is false.

See 0.30000000000000004.com for more information.

7. Variable promotion

The problem

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

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

The answer

Variable 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. A promoted var variable has a undefined value before it is initialized.

However, accessing myConst before the declaration raises a ReferenceError. The const variable is in a temporary dead zone until line const myConst = 3.14 is declared.

See the guide to JavaScript variable promotion details, thoroughly grasp the concept of variable promotion.

Think 8.

You can assume that some questions are useless for an interview. I feel the same way, especially about the Hawk-eye test. Still, there are people who ask these questions.

Either way, most of these questions will test your familiarity with JavaScript. If you’re having trouble answering some of these questions as you read this, here’s a hint of what to learn next!

Is it fair to ask tough questions in an interview? Say what you think.

The original

communication

Welcome to follow my wechat public number “1024 translation station”, to provide you with more technical dry goods!