Exhaustive javascript reference for your next job interview. Part 1

Translation of the article Gustavo Azevedo The Definitive JavaScript Handbook for your next developer interview .



JavaScript has been and continues to be the most popular programming language, according to a Stack Overflow Survey survey . Not surprisingly, 1/3 of all jobs require JavaScript. Therefore, if you plan to work as a developer in the near future, then you should familiarize yourself with this extremely popular language.
')
The purpose of the publication is to gather in one place all the concepts of JavaScript, which are often found at the interview.


Before starting the article, I recommend to subscribe to my cozy telegram channel @justkorolev , in which I will post interesting technical articles and reviews on various books.

Types and Transformations

There are 7 built-in types: null , undefined , boolean , number , string , object, and symbol (ES6).

All of these types are called primitives (all but object ).

typeof 0 // number typeof true // boolean typeof 'Hello' // string typeof Math // object typeof null // object !! typeof Symbol('Hi') // symbol (New ES6) 

Null vs Undefined

Undefined is the absence of a variable declaration. It is used as the default value for non-initialized variables, function arguments (to which no values ​​were passed), and missing values ​​for objects.

Null is the absence of a variable value.

Implicit conversion

Take a look at this example:

 var name = 'Joey'; if (name) { console.log(name + " doesn't share food!") // Joey doesn't share food! } 

Here, the value of the name variable returns true, so the console will output: "Joey doesn't share food!". But how do we know what will return true, and what will return false?

False values ​​are values ​​that return false to us when they are cast to the Boolean type.

False values ​​include: "" , 0 , null , undefined , NaN, and false .

All that is not false returns true.

 Boolean(null) // false Boolean('hello') // true Boolean('0') // true Boolean(' ') // true Boolean([]) // true Boolean(function(){}) // true 

Yes. You all read right. Empty arrays, objects, and functions return true!

Strings and Numeric Conversions

The first thing you need to know about is the + operator. This is a complex statement, because it works to add numbers and concatenate strings.

Operators * , / and - are exclusive operators for numeric operations. Therefore, when they are used with a string, it causes it to be converted to a number format.

 1 + "2" = "12" "" + 1 + 0 = "10" "" - 1 + 0 = -1 "-9\n" + 5 = "-9\n5" "-9\n" - 5 = -14 "2" * "3" = 6 4 + 5 + "px" = "9px" "$" + 4 + 5 = "$45" "4" - 2 = 2 "4px" - 2 = NaN null + 1 = 1 undefined + 1 = NaN 

== vs ===

The widespread belief that == checks equality, and === checks for equality and type. But this is a wrong idea.

In fact, == checks the equality along with the conversion, and === checks the equality of the two values ​​without it - a strict comparison .

 2 == '2' // True 2 === '2' // False undefined == null // True undefined === null // False 

Conversion can be tricky. See the example below:

 let a = '0'; console.log(Boolean(a)); // True let b = false; console.log(Boolean(b)); // False 

What do you expect from the next comparison?

 console.log(a == b); (1) 

It returns true. Why?
What really happens under the hood is that if you compare a Boolean value with something other than a Boolean value, then JavaScript will convert the boolean to the number type and only then make a comparison (2) .

Now our expression is comparing number and string . To do this, JavaScript will force the string to be converted to the number (3) type.

Therefore, as a result, we get the expression 0 == 0 , which is true.

 '0' == false (1) '0' == 0 (2) 0 == 0 (3) 

To understand how similar comparisons are made, you can check out the ES5 documentation here .

You can also look at the cheat list .
Here are a couple of difficult examples:

 false == "" // true false == [] // true false == {} // false "" == 0 // true "" == [] // true "" == {} // false 0 == [] // true 0 == {} // false 0 == null // false 

Value vs Links

Null , undefined , boolean , number , string and ES6 symbol are simple values ​​(also known as primitives). They always copy their content into a variable.

Complex values ​​always create a copy of the reference when assigned.

 var a = 2; //  'a'    2 . var b = a; // 'b'    'a' b++; console.log(a); // 2 console.log(b); // 3 var c = [1,2,3]; var d = c; // 'd'      d.push( 4 ); //    console.log(c); // [1,2,3,4] console.log(d); // [1,2,3,4] /*     */ var e = [1,2,3,4]; console.log(c === d); // true console.log(c === e); // false 

To copy a complex value, you need to make a copy of it, then the link will not point to its original location.

 const copy = c.slice() // 'copy'     console.log(c); // [1,2,3,4] console.log(copy); // [1,2,3,4] console.log(c === copy); // false 

Area of ​​visibility

The scope sets the execution context. It determines the availability of values ​​and functions in the code.

The global scope is the largest volume. Values ​​declared outside functions are global and can be accessed in any part of the program. In the browser, the window object is the repository of the global scope.

The local scope is the area enclosed in the function. Variables declared in the local scope can only be accessible inside it.

 function outer() { let a = 1; function inner() { let b = 2; function innermost() { let c = 3; console.log(a, b, c); // 1 2 3 } innermost(); console.log(a, b); // 1 2 — 'c'   } inner(); console.log(a); // 1 — 'b'  'c'   } outer(); 

You can think of areas of visibility as a series of doors, decreasing in size (from the largest to the smallest). A short person who fits into the smallest door - the innermost area - will also pass through any large doors - the outer areas.

But, for example, a tall person who is stuck in the third door will have access to all the previous doors - the outer areas, but not to any smaller doors - the inner areas.

Uplifting

The behavior of "moving" declarations of variables and functions in the upper part of their respective areas at the compilation stage is called elevation .

The ad function is fully raised. This means that the declared function can be called before it is defined.

 console.log(toSquare(3)); // 9 function toSquare(n){ return n*n; } 

Variables partially raised. Variables declared with the var statement are raised, but their values ​​are not.

let and const do not support climbs.

 { /*   */ console.log(i); // undefined var i = 10 console.log(i); // 10 } { /*     */ var i; console.log(i); // undefined i = 10 console.log(i); // 10 } // ES6 let & const { console.log(i); // ReferenceError: i is not defined const i = 10 console.log(i); // 10 } { console.log(i); // ReferenceError: i is not defined let i = 10 console.log(i); // 10 } 

Functional Expression vs Functional Declaration

Functional expressions

A functional expression is created when the execution reaches its declaration (it is not raised).

Functional ad

A functional declaration can be called before and after its description (it is raised).

Variables: var, let and const

Before the introduction of the ES6 standard, a variable could only be declared using var . Variables and functions declared within another function cannot be accessed by any of the covering areas — they are limited by functionality.

Values ​​declared inside braces can be used outside of them.

Note A variable declared without the var , let or const keyword creates a var variable in the global scope.

 function greeting() { console.log(s) // undefined if(true) { var s = 'Hi'; undeclaredVar = 'I am automatically created in global scope'; } console.log(s) // 'Hi' } console.log(s); // Error — ReferenceError: s is not defined greeting(); console.log(undeclaredVar) // 'I am automatically created in global scope' 

ES6 let and const are new. They are not elevating + a pair of curly braces in which they are declared, limit their scope.

 let g1 = 'global 1' let g2 = 'global 2' { /*     */ g1 = 'new global 1' let g2 = 'local global 2' console.log(g1) // 'new global 1' console.log(g2) // 'local global 2' console.log(g3) // ReferenceError: g3 is not defined let g3 = 'I am not hoisted'; } console.log(g1) // 'new global 1' console.log(g2) // 'global 2' 

A common misconception is that const is immutable. It cannot be redeclared, but its value (if it is an array / object) to which it refers can be changed !

 const tryMe = 'initial assignment'; tryMe = 'this has been reassigned'; // TypeError: Assignment to constant variable. //    ,    ... const array = ['Ted', 'is', 'awesome!']; array[0] = 'Barney'; array[3] = 'Suit up!'; console.log(array); // [“Barney”, “is”, “awesome!”, “Suit up!”] const airplane = {}; airplane.wings = 2; airplane.passengers = 200; console.log(airplane); // {passengers: 200, wings: 2}