More Modern JS Concepts | Part 3

 

1. 

this

The

this

is determined in three ways.

• In Object methods, it refers to the object that is executing the current function.
• In Regular functions, it refers to the 
  window
   object.
• In Arrow functions, it refers to the context in which the code is defined.

1.1 

this

 in Object Methods

1

2

3

4

5

6

7

8

9

let car = {

color: "blue",

brand: "Audi",

start: function() {

console.log(this); // Object { color: "blue", brand: "Audi", start: ƒ() }

}

};

car.start();

JAVASCRIPT

In the above example,

this

refers to the

car

object as it's executing the method

start

.

1.2 

this

 in Regular Functions

1

2

3

4

function start() {

console.log(this); // Window { }

}

start();

JAVASCRIPT

In the above example,

this

refers to the

window

object.

1.3 

this

 in Arrow Functions

In Arrow functions,

this

depends on two aspects:

• When the code is defined
• Context

Arrow function inherits

this

from the context in which the code is defined.

1.3.1 Object Methods

1

2

3

4

5

6

7

8

9

let car = {

color: "blue",

brand: "Audi",

start: () => {

console.log(this); // Window { }

}

};

car.start();

JAVASCRIPT

Arrow Functions with Callbacks

1

2

3

4

5

6

7

8

9

10

11

let car = {

color: "blue",

brand: "Audi",

start: function() {

setTimeout(() => {

console.log(this); // Object { color: "blue", brand: "Audi", start: ƒ() }

}, 1000);

}

};

car.start();

JAVASCRIPT

Collapse

1.4 

this

 in Constructor Functions

In Constructor Function,

this

refers to the instance object.

1

2

3

4

5

6

7

8

9

10

function Car(color, brand) {

this.color = color;

this.brand = brand;

this.start = function() {

console.log(this); // Car { }

};

}

let car1 = new Car("blue", "Audi");

car1.start();

JAVASCRIPT

In the above example,

this

refers to the object

car1

.

1.4.1 Arrow Functions

1

2

3

4

5

6

7

8

9

10

function Car(color, brand) {

this.color = color;

this.brand = brand;

this.start = () => {

console.log(this); // Car { }

};

}

let car1 = new Car("blue", "Audi");

car1.start();

JAVASCRIPT

Try out the

this

in different functions like Object Methods, Arrow Functions, and Constructor Functions etc. in the JavaScript Code Playground.

2. Immutable and Mutable Values

2.1 Immutable

All the primitive type values are immutable.

• Number
• String
• Boolean
• Symbol
• Undefined, etc.

1

2

3

4

5

6

let x = 5;

let y = x;

y = 10;

console.log(x); // 5

console.log(y); // 10

JAVASCRIPT

2.2 Mutable

All the Objects are mutable.

• Object
• Array
• Function

1

2

3

4

5

6

7

8

9

10

11

12

13

let x = { value: 5 };

let y = x;

let z = { value: 20 };

y.value = 10;

console.log(x); // Object { value: 10 }

console.log(y); // Object { value: 10 }

y = z;

console.log(x); // Object { value: 10 }

console.log(y); // Object { value: 20 }

JAVASCRIPT

Collapse

3. Declaring Variables

In JavaScript, a variable can be declared in 3 ways.

• Using 
  let
• Using 
  const
• Using 
  var

3.1 let

While declaring variables using

let

,

• Initialization is not mandatory
• Variables can be reassigned

1

2

3

4

5

6

7

let x;

x = 10;

console.log(x); // 10

x = 15;

console.log(x); // 15

JAVASCRIPT

3.2 const

While declaring variables using

const

,

• Initialization is mandatory
• Once a value is initialized, then it can't be reassigned

Without Initialization:

1

2

3

const x;

x = 7; // SyntaxError {"Const declarations require an initialization value (1:21)"}

JAVASCRIPT

Reassignment:

1

2

3

const x = 7;

x = 9; // TypeError {"Assignment to constant variable."}

JAVASCRIPT

3.2.1 Mutating Object properties

1

2

3

4

5

6

7

const car = {

color : "blue",

brand : "Audi"

};

car.color = "red";

console.log(car.color); // red

JAVASCRIPT

But objects can't be reassigned.

1

2

3

4

5

6

7

const car = {

color : "blue",

brand : "Audi"

};

car.color = "red";

car = {}; // TypeError {"Assignment to constant variable."}

JAVASCRIPT

Try out the Mutable and Immutable values and declare the variables using

const

in the JavaScript Code Playground.