I use this repo to track examples of tricky JS code, which will help me to imrove my knowledges. See examples of code and answers or explanation below. Code examples divided by topics.
- Primitive types
- References types
- Variables
- Comparison operators: with and without coercion
- Operators
- Control flow
- Functions
- Arrow functions
- Pass-by-references vs pass-by-value
- Loops
- Array methods
- Closure
- .bind, .call, .apply
- Class
Primitives types are
- undefined,
- Boolean,
- Number,
- String,
- Symbol,
- BigInt and
- special primitive type null
References types are
- Objects
- and Functions
Examples related to
- Object.create
- Object.assign
- spread syntax
let pet = 'Narwhal';
pet = 'The Kraken';
console.log(pet); // ?
Explanation
The answer is "The Kraken" — immutability of strings doesn’t play a role. Variables are not values. Variables point to values. function double(x) {
x = x * 2;
}
let money = 10;
double(money);
console.log(money); // ?
Explanation
If we thought double(money) was passing a variable, we could expect that x = x * 2 would double that variable. But that’s not how it works. We know that double(money) means “figure out the value of money, and then pass that value to double”. So the answer is 10. null = 10
console.log(null)
Explanation
This code produce an error Uncaught SyntaxError: Invalid left-hand side in assignment.
It is error because the left side of assignment must always be 'wire'.
Variables are wires, so they can appear on the left side.
A literal like null is not a 'wire',
so trying to assign something to it is meaningless.
let x = 10;
let y = x;
x = 0;
Explanation
Declare a variable called x. Make a wire for the x variable. Assign to x the value of 10. Point x’s wire to the value 10.Declare a variable called y. Make a wire for the y variable. Assign to y the value of x.
Evaluate the expression: x. The x expression resulted in the value 10. Therefore, assign to y the value of 10. Point y’s wire to the value 10.
Assign to x the value of 0. Point x’s wire to the value 0.
At the end, the x variable points to the value 0, and the y variable points to the value 10.
== checks for equality with coercion and === checks for equality without coercion - strict equality.
When an operator is applied to the “wrong” type of value, JavaScript will quietly convert that value to the type it needs, using a set of rules that often aren’t what you want or expect. This is called type coercion.
== with coercion
=== without coercion
If the value is 0, -0, null, false, NaN, undefined, or the empty string (""), the object has an initial value of false. All other values, including any object, an empty array ([]), or the string "false", create an object with an initial value of true.
Do not confuse the primitive Boolean values true and false with the true and false values of the Boolean object.
- operator typeof
- operator concatenation
- operator delete
- continue
- switch
- break
- Functions parameters and scope, localness of variables
- Function declaration vs function expression
- Arrow functions
- Pass-by-references
- Pass-by-value
- for loop
- do while
- while
- Array.prototype.map()
const arr = [1, 4, 9, 16];
const map1 = arr.map(x => x * 2);
console.log(map1); // expected output: Array [2, 8, 18, 32]
- Array.prototype.forEach()
A closure is an inner function that has access to the outer (enclosing) function’s variables - scope chain.
- defining a closure
- setTimeout and closure
const obj1= {
num: 1
}
const obj2 = {
num: 2
}
let addToThis = function(a,b,c) {
const sum = this.num + a + b + c;
console.log('sum', sum);
return sum;
}
addToThis.call(obj1, 1, 2, 3) // -> sum is 7
addToThis.apply(obj2, [1,2,3]) // -> sum is 8
let bound1 = addToThis.bind(obj1);
let bound2 = addToThis.bind(obj2);
bound1(1,2,3) // -> sum is 7
bound2(1,2,3) // -> sum is 8
ES5 syntax
// constructor
// just create this as an empty {} and return this behind a scene
function Building(floors) {
this.what = 'building'
this.floors = floors;
// this.countFloors = ...
// it's not a good practice tot create method in constructor
// because the same function creates for each object
}
// prototype is just an object
Building.prototype.countFloors = function() {
if (this.floors >= 10) {
console.log('I have', this.floors, 'floors')
}
}
const myHouse = new Building(2);
myHouse.countFloors(); // -> condition is false
const officeBuilding = new Building(12);
officeBuilding.countFloors(); // -> I have 12 floors
const whateverHouse = {}
whateverHouse.countFloors() // -> whateverHouse.countFloors is not a function
// you can not call this method, because it doesn't exist
// you can run only countFloors for instance created from Building
ECMAScript 2015 (ES6) syntax
class Building {
constructor(floors) {
this.what = 'building';
this.floors = floors
}
countFloors() {
if (this.floors >= 2) {
console.log('I have', this.floors, 'floors')
}
}
}
const myFlat = new Building(2);
myFlat.countFloors(); // I have 2 floors
Using prototypes you can create a method in constructor function. But it's not a good practice, because this method creates for each object. Better to use prototype.
In classes there is the constructor method, which is a special method for creating and initializing an object created with a class. There can only be one special method with the name "constructor" in a class. A SyntaxError will be thrown if the class contains more than one occurrence of a constructor method.
A constructor can use the super keyword to call the constructor of the super class.