By Dmitri Pavlutin

Translation: Crazy geek

Original text: dmitripavlutin.com/simple-but-…

Reproduced without permission

In software development, I think the most important things to note are:

  1. Coding interview
  2. Toxic supervisor or pig teammate

Not JavaScript, this, CSS, Internet Explorer, but both!

If you attend an interview for advanced JavaScript development, chances are you’ll be asked some tough questions during the coding interview.

I know it’s not fair. Some unknown person will put you aside and judge you. It was not a pleasant experience.

What can you do?

Follow this advice: “Become perfect through practice.” By investing enough time (preferably regularly) in an in-depth understanding of JavaScript, you can improve your coding and, as a positive result, your interviewing skills.

In this article, you’ll find seven simple and tricky JavaScript interview questions.

Although these questions may seem arbitrary, they touch on important concepts of JavaScript. So you better practice before your next interview!

1. Unexpected global variables

The problem

In the following code snippet, what is the evaluation result of Typeof A and Typeof B:

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

foo();
typeof a; / / = >???
typeof b; / / = >???
Copy the code

The answer

Let’s look at line 2 closely: let a = b = 0. This statement declares the local variable a. But it also declares the global variable B.

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

B is the global variable created by accident.

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

const clothes = ['jacket'.'t-shirt'];
clothes.length = 0;

clothes[0]; / / = >???
Copy the code

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

The result of typeof B is ‘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 special behavior:

🏛 Reducing the value of the length attribute has the side effect of deleting the current array element (whose index value is between the old and new length values).

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

Clothes [0] is undefined, because the clothes array is empty.

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

Take a close look at the semicolon before the curly braces {; :

It’s easy to ignore this semicolon when creating null statements. A NULL statement is an empty statement that does nothing.

For () iterates 4 times over the null statement (doing nothing), ignoring the block that actually stores the elements into the array: {numbers.push(I + 1); }.

The previous code is equivalent to the following:

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

Therefore, numbers is [5].

The story behind this question

I was asked this question a long time ago when I was interviewing for my first job.

In this interview, I answered 20 coding questions in an hour. Null statements are also part of the problem.

In the rush to solve the problem, I didn’t see it in braces{The previous semicolon;. So I got the wrong answer[1, 2, 3, 4].

I was a little disappointed by the unfair game. What was the reason behind the ruse, I asked the interviewer. The interviewer replied:

“Because we need people who pay great attention to detail.”

Luckily, I didn’t end up working for that company.

I’ll leave it to you to draw your own conclusions about what to make of it.

4. Automatically insert semicolons

The problem

What value does arrayFromValue() return?

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

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

The answer

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

Line breaks cause JavaScript to automatically insert semicolons between return and [items] expressions.

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

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

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

A return inside a function; Make it return undefined.

So arrayFromValue(10) is undefined.

Read more about automatic semicolon insertion in this section.

5. Classic problem: Tricky closures

The problem

What will the script output in the console:

let i;
for (i = 0; i < 3; i++) {
  const log = (a)= > {
    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 is wrong. That was my answer when I first tried to solve it!

There are two stages to executing this code.

Phase 1

  1. for()Iterate 3 times. At each iteration, a new function is createdlog(), which captures variablesi. And then,setTimout()schedulinglog()The execution.
  2. whenfor()When the loop completes, the variableiThe value of3.

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

The stage 2

The second stage occurs after 100ms:

  1. Three fixedlog()The callback bysetTimeout()The call.log()Read the variablei 的The current value 3And put the3Log to the console.

That’s why the console output is 3, 3, and 3.

Do you know how to fix the code snippet to output 0, 1, and 3? Post your solution in the comments below!

6. Floating point number

The problem

What is the result of the equality check?

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.30000000000000004
Copy the code

The sum of 0.1 and 0.2 is not equal to 0.3, but slightly greater 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.

Therefore, 0.1 + 0.2 === 0.3 is false.

Visit 0.30000000000000004.com for more information.

7. Improve

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

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

,

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

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

Follow the instructions in the article detailing JavaScript variable promotion to get a better handle on promotion.

8. Key points

You might think that some interview questions are useless, and I feel the same way, especially with the Hawk-eye test. But they may still be asked.

In any case, most of the above questions really assess your JavaScript proficiency. If you’re having trouble answering questions as you read this, it means you need to learn more about them!

Is it fair to ask tough questions in an interview? Leave your thoughts in the comments.

Welcome to pay attention to the front end public number: front end pioneer, receive front-end engineering practical toolkit.