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

see code examples >>

References types are

• Objects
• and Functions

Examples related to

• Object.create
• Object.assign
• spread syntax

see code examples >>

 let pet = 'Narwhal';
 pet = 'The Kraken';
 console.log(pet); // ?

 function double(x) {
  x = x * 2;
 }

 let money = 10;
 double(money);
 console.log(money); // ?

 null = 10
 console.log(null)

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;

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.

see code examples >>

• operator typeof
• operator concatenation
• operator delete

see code examples >>

• continue
• switch
• break

see code examples >>

• Functions parameters and scope, localness of variables
• Function declaration vs function expression
• Arrow functions

see code examples >>

• Pass-by-references
• Pass-by-value

see code examples >>

• for loop
• do while
• while

see code examples >>

• 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()

see code examples >>

A closure is an inner function that has access to the outer (enclosing) function’s variables - scope chain.

• defining a closure
• setTimeout and closure

see code examples >>

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

see code examples >>

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.

see code examples >>