7 sand sculpture with trap JS interview questions

By Dmitri Pavlutin

Translator: Front-end wisdom

Source: dmitripavlutin

In order to ensure readability, this paper adopts free translation rather than literal translation.

In JS interview, often see some simple and sand carving topics, these topics contain some traps, but these in our standard coding or business will not appear. Some interviewers do this. Instead of focusing on code standards and specifications, they use non-standard code to test whether others are careful.

This magical world is a comparative superiority, I can test you, I am superior to you, real.

Take a look at these seven sand sculptures.

1. Accidentally created global variables

The interviewer asks

What are the results of Typeof A and Typeof B in the following code? (sand)

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

The answer

The focus of this code is on line 2 :let a = b = 0. This statement declares a local variable A, but it also declares a global variable B.

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

As shown below, the I in function foo is an accidental global variable:

Again, in our problem, b is a global variable created by accident. In a browser, the code above is equivalent to the following:

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 ‘undefined’. The variable a is only declared in scope foo() and is not available in an external scope.

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

2. The length property of the array

The interviewer asks

What is the value of clothes[0]? (sand)

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

The answer

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

Reducing the value of the Length attribute has the side effect of deleting its own array elements whose array index is between the old and new length values.

Because of the length property behavior, all clothes items are deleted when JS executes clothes. Length = 0. So the value of clothes[0] is undefined because the clothes array has been emptied.

3. Magic puzzles that test your eyesight

The interviewer asks

What is the contents of the numbers array in the following code? Notice the semicolon (;) after for() What a sand sculpture.

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

The answer

The code above has a semicolon (;) after for() So the for loop executes four empty statements, and when it exits the loop, the value of I is 4.

Then perform {numbers. Push (I + 1); }, so the final numbers content is just the number 5.

The code above is equivalent to the code below

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

Using non-standard code to check whether others are careful, I feel very sand sculpture.

4. Automatic semicolon insertion

The interviewer asks

What value does arrayFromValue() return? (sand)

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

The answer

Note that the line between return and [items] is already wrapped, and JS inserts semicolons between the line breaks. So the above is equivalent to the following code:

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

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

return; Inside the function, make the function return undefined, so arrayFromValue(10) is undefined.

5. A classic closure problem that was badly tested

The interviewer asks

What is the result of the following code execution? (Can we change the question?)

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

The answer

It’s easy to give 0, 1, 2 answers when you don’t know the basics of JS. I met this question in school for the first time.

There are two stages to executing this code.

Phase 1

1. For () iterates three times. At each iteration, a new function log() is created that captures the variable I. SetTimout () then schedules the execution of log().

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

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

The stage 2

The second stage occurs 100 milliseconds later

SetTimeout () calls three log() callbacks. Log () reads the current value of the variable I, which is 3.

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

6. Floating point operations

The interviewer asks

What is the following code output? (Can we change the question?)

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

The answer

First, take a look at the value of 0.1 + 0.2

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

The sum of 0.1 and 0.2 does not equal 0.3, but is slightly higher than 0.3.

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

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

7. Variable enhancement

The interviewer asks

What happens if myVar and myConst are accessed before the declaration? (Can we change the question?)

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

The answer

Promotion and time dead are two important concepts that affect the life cycle of JS variables.

The result of calling myVar before the declaration is undefined, because variables declared using var are promoted and have 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.

conclusion

Do you feel that some of the above questions are useless for the interview, especially the third question. However, there are still a small number of interviews that will be asked.

Of course, although are said to be sand carving topic, but these are can evaluate whether you are proficient in JS, or we learn the knowledge.

In the interview, you also encountered what questions like this, welcome to leave a message to discuss.

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

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

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.