« Javascript interview questions

What are the different data types present in javascript?

To know the type of a JavaScript variable, we can use the typeof operator.

1. Primitive types

String - It represents a series of characters and is written with quotes. A string can be represented using a single or a double quote.

Copy
1var str = 'Vivek Singh Bisht'; //using double quotes
2var str2 = 'John Doe'; //using single quotes

Number - It represents a number and can be written with or without decimals.

Copy
1var x = 3; //without decimal
2var y = 3.6; //with decimal

BigInt - This data type is used to store numbers which are above the limitation of the Number data type. It can store large integers and is represented by adding “n” to an integer literal.

Copy
1var bigInteger = 234567890123456789012345678901234567890;

Boolean - It represents a logical entity and can have only two values : true or false. Booleans are generally used for conditional testing.

Copy
1var a = 2;
2var b = 3;
3var c = 2;
4a == b;
5a == c;

Undefined - When a variable is declared but not assigned, it has the value of undefined and it’s type is also undefined.

Copy
1var x; // value of x is undefined
2var y = undefined; // we can also set the value of a variable as undefined

Null - It represents a non-existent or a invalid value.

Copy
1var z = null;

Symbol - It is a new data type introduced in the ES6 version of javascript. It is used to store an anonymous and unique value.

Copy
1var symbol1 = Symbol('symbol');
2typeof of primitive types :
3typeof "John Doe" // Returns "string"
4typeof 3.14 // Returns "number"
5typeof true // Returns "boolean"
6typeof 234567890123456789012345678901234567890n // Returns bigint
7typeof undefined // Returns "undefined"
8typeof null // Returns "object" (kind of a bug in JavaScript)
9typeof Symbol('symbol') // Returns Symbol

2. Non-primitive types

Primitive data types can store only a single value. To store multiple and complex values, non-primitive data types are used.

Object - Used to store collection of data.

Copy
1var obj1 = {
2    x: 43,
3    y: 'Hello world!',
4    z: function () {
5        return this.x;
6    },
7};

// Collection of data as an ordered list

Copy
1var array1 = [5, 'Hello', true, 4.1];

Note- It is important to remember that any data type that is not a primitive data type, is of Object type in javascript.

Explain Hoisting in javascript

Hoisting is the default behaviour of javascript where all the variable and function declarations are moved on top.

This means that irrespective of where the variables and functions are declared, they are moved on top of the scope. The scope can be both local and global.

Example 1:

hoistedVariable = 3; console.log(hoistedVariable); // outputs 3 even when the variable is declared after it is initialized var hoistedVariable; Example 2:

hoistedFunction(); // Outputs " Hello world! " even when the function is declared after calling

function hoistedFunction(){ console.log(" Hello world! "); } Example 3:

// Hoisting takes place in the local scope as well function doSomething(){ x = 33; console.log(x); var x; } doSomething(); // Outputs 33 since the local variable “x” is hoisted inside the local scope

Note - Variable initializations are not hoisted, only variable declarations are hoisted: var x; console.log(x); // Outputs "undefined" since the initialization of "x" is not hoisted x = 23; Note - To avoid hoisting, you can run javascript in strict mode by using “use strict” on top of the code: "use strict"; x = 23; // Gives an error since 'x' is not declared var x;

Difference between “ == “ and “ === “ operators.

Both are comparison operators. The difference between both the operators is that "==" is used to compare values whereas, "===" is used to compare both values and types.

Copy
1var x = 2;
2var y = '2';
3x == y; // Returns true since the value of both x and y is the same
4x === y; // Returns false since the typeof x is "number" and typeof y is "string"

Difference between var, let and const keywords in JavaScript

Objects in javascript

Now each value of each keys we have here can be any type in JavaScript, it can be a number, a string, a boolean, null, undefined, it can even be another object, or an array, or a function.

Function vs Methods

If a function is part of an object, in object oriented programming terms, we refer to that function as a method.

Factory functions

Copy
1function createCircle(radius) {
2    // return {
3    //     radius: radius,
4    //     draw: function(){
5    //         console.log('circle draw method called fronm factory function');
6    //     }
7    // };
8    return {
9        radius,
10        draw() {
11            console.log('circle draw method called from factory function');
12        },
13    };
14}
15
16const circle1 = createCircle(5);
17circle1.draw();

Constructor function

When we use the new operator, 3 things happen:

• this operator first creates an empty object
• then it will set this to point to this object
• and finally it will return that object from this function.

Copy
1function Circle(radius) {
2    this.radius = radius;
3    this.draw = function () {
4        console.log('draw from Constructor function');
5    };
6}
7
8const circle2 = new Circle(7);
9circle2.draw();

Objects in JavaScript

Objects in JavaScript are dynamic which means once you create them you can always add new properties or methods, or remove existing ones.

Copy
1const myCircle = {
2    radius: 5,
3};
4
5console.log(myCircle);
6myCircle.color = 'red';
7console.log(myCircle);
8myCircle.draw = function () {};
9console.log(myCircle);
10delete myCircle.color;
11console.log(myCircle);
12delete myCircle.radius;
13console.log(myCircle);

Every object in javascript has a property called constructor

And that references the function that was used to construct or create that object.

Copy
1function createCircle(radius){
2    // return {
3    //     radius: radius,
4    //     draw: function(){
5    //         console.log('circle draw method called fronm factory function');
6    //     }
7    // };
8    return {
9        radius,
10        draw(){
11            console.log('circle draw method called from factory function');
12        }
13    };
14}
15
16const circle1 = createCircle(5);
17circle1.draw();
18
19circle1.constructor
20ƒ Object() { [native code] }
21
22function Circle(radius){
23    this.radius = radius;
24    this.draw = function(){
25        console.log('draw from Constructor function');
26    }
27}
28
29const circle2 = new Circle(7);
30circle2.draw();
31
32circle2.constructor
33ƒ Circle(radius){
34    this.radius = radius;
35    this.draw = function(){
36        console.log('draw from Constructor function');
37    }
38}

This is a built it constructor function in javascript. When we create an object using object literal syntax, internally the JavaScript engine uses this constructor function.

Copy
1ƒ Object() { [native code] }

In JavaScript we have a few other built in constructors,

So, single quotes or double code, or back tick. Using these literals is cleaner and simpler than using the constructor.

Copy
1const an =""
2an.constructor
3ƒ String() { [native code] }

Copy
1new String();
2new Boolean();
3new Number();

Functions are objects

Copy
1Circle.constructor
2ƒ Function() { [native code] }

When we declare a function using this syntax, internally, JavaScript engine will use this function constructor to create this object.

Internally, JavaScript engine will use this Function constructor to create this object.

In Javascript we have 2 categories of types

Value types:

• Number
• String
• Boolean
• Symbol
• undefined
• null

Value types:

• Objects
• Functions
• Arrays

Objects are not iterables

for of loop can only be used with iterables

Constructor Object Function

Whenever we create object using object literal syntax internally that is translated to a call to this constructor function.

Internally this

Copy
1const x = { value: 1 };

is translated to

Copy
1const x = new Object();

Object keys

This method returns string array of keys.

Copy
1for (let key of Object.keys(circle)) {
2    console.log(key);
3}

Object Entries

Copy
1for (let key of Object.entries(circle)) {
2    console.log(key);
3}

Check if a key exists in object

Copy
1if ('radius' in circle) console.log('yes');

Cloning Object

Object.assign

Copy
1const circle = {
2    radius: 1,
3    draw: function () {
4        console.log('draw');
5    },
6};
7
8const another1 = Object.assign({}, circle);
9const another2 = Object.assign({ color: 'red' }, circle);
10
11console.log(another1);
12console.log(another2);

spread operator

Copy
1const circle = {
2    radius: 1,
3    draw: function () {
4        console.log('draw');
5    },
6};
7
8const another = { ...circle };
9console.log(another);

Garbage Collector

A javascript engine has a garbage collector. It finds constants and variables and then de-allocate the memory that was allocated to them. Memory allocation and de-allocation happens automatically behind the scenes and I have no control over that. We can't tell Garbage Collector when to run and de-allocate which objects from the memory.

Math Object

Math.round(1.9)

Math object

Copy
1console.log(Math.round(1.9));
2console.log(Math.max(1, 2, 6, 0, -2));
3console.log(Math.min(1, 2, 6, 0, -2));

String

In javascript we have 2 types of strings. One is primitive string another is string object. When we use the dot notation with a string primitive, JavaScript engine internally wraps this with a string object, we don't see that, but we can work with this like a string object.

Copy
1const message = 'Anish';
2console.log(typeof message);
3const another = new String('Dubey');
4console.log(typeof another);

Copy
1const message = 'This is my first message';
2console.log(typeof message);
3const another = new String('Dubey');
4console.log(typeof another);
5
6console.log(message.length);
7console.log(message[0]);
8console.log(message[1]);
9console.log(message.includes('An'));
10console.log(message.includes('an'));
11console.log(message.includes('my'));
12console.log(message.includes('This'));
13console.log(message.includes('this'));
14console.log(message.startsWith('This'));
15console.log(message.startsWith('me'));
16console.log(message.endsWith('message'));
17console.log(message.endsWith('me'));
18console.log(message.indexOf('me'));
19console.log(message.replace('first', 'second'));
20console.log(message);
21console.log(message.toUpperCase());
22console.log(message.toLowerCase());
23console.log(message);
24
25const unTrimmedMessage = '  This is my untrimmed message. ';
26console.log(unTrimmedMessage.trim());
27console.log(unTrimmedMessage);
28
29const newLineMessage = 'This is my\n first message';
30console.log(newLineMessage);
31
32const escapeCharMessage = "This is my 'first message";
33console.log(escapeCharMessage);
34
35console.log(message.split(' '));

Template literals

Copy
1const name = 'Anish';
2
3const message = `Hi ${name} ${2 + 3} 
4
5Thank you for joining my mailing list
6
7Regards
8Anish
9`;
10
11console.log(message);

Date

Copy
1const now = new Date();
2const date1 = new Date('May 11 2018 09:00');
3const date2 = new Date(2017, 4, 11, 9);
4
5console.log(now);
6console.log(date1);
7console.log(date2);
8
9now.setFullYear(2005);
10console.log(now);

Object Equality

Copy
1let address1 = new Address('a', 'b', 'c');
2let address2 = new Address('a', 'b', 'c');
3let address3 = address1;
4
5function Address(street, city, zipCode) {
6    this.street = street;
7    this.city = city;
8    this.zipCode = zipCode;
9}
10
11function areEqual(address1, address2) {
12    return (
13        address1.street === address2.street &&
14        address1.city === address2.city &&
15        address1.zipCode === address2.zipCode
16    );
17}
18
19function areSame(address1, address2) {
20    return address1 === address2;
21}
22
23console.log(areEqual(address1, address2));
24console.log(areSame(address1, address2));
25console.log(areSame(address1, address3));

Adding elements in Array

Copy
1const numbers = [3, 4, 1, 3];
2
3numbers.push(5, 6);
4numbers.unshift(1, 2);
5numbers.splice(2, 0, 'a', 'b');
6console.log(numbers);
7
8console.log(numbers.indexOf(1));
9console.log(numbers.indexOf(4));
10console.log(numbers.indexOf(9));
11
12console.log(numbers.lastIndexOf(1));
13
14console.log(numbers.includes(5));
15console.log(numbers.includes(9));
16
17console.log(numbers.indexOf(1));
18console.log(numbers.indexOf(1, 3));

All these methods have second parameter that is optional that is starting index.

Array find method

Copy
1const courses = [
2    { id: 1, name: 'a' },
3    { id: 2, name: 'b' },
4];
5
6const course = courses.find(function (course) {
7    return course.name === 'a';
8});
9
10console.log(course);
11
12const course1 = courses.find(function (course) {
13    return course.name === 'xyz';
14});
15
16console.log(course1);
17
18const courseIndex = courses.findIndex(function (course) {
19    return course.name === 'xyz';
20});
21
22console.log(courseIndex);
23
24const courseIndex1 = courses.findIndex(function (course) {
25    return course.name === 'b';
26});
27
28console.log(courseIndex1);

If not found then undefined will be returned and if found that particular element of the array is returned.

Shorter way using arrow functions.

Copy
1const courses = [
2    { id: 1, name: 'a' },
3    { id: 2, name: 'b' },
4];
5
6const course = courses.find((course) => course.name === 'a');
7
8console.log(course);

Removing elements from Array

Copy
1const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
2
3const last = numbers.pop();
4console.log(last);
5console.log(numbers);
6
7const first = numbers.shift();
8console.log(first);
9console.log(numbers);
10
11numbers.splice(2, 3);
12console.log(numbers);

Emptying the array

Copy
1let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
2let another = numbers;
3
4// This won't work if we have multiple references to the original array
5numbers = [];
6
7console.log(numbers);
8console.log(another);

Copy
1let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
2let another = numbers;
3
4numbers.length = 0;
5
6console.log(numbers);
7console.log(another);

Copy
1let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
2let another = numbers;
3
4numbers.splice(0, numbers.length);
5
6console.log(numbers);
7console.log(another);

Copy
1let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
2let another = numbers;
3
4//This is not ideal where we have a million elements Because then pop will be called a million times
5while (numbers.length > 0) {
6    numbers.pop();
7}
8
9console.log(numbers);
10console.log(another);

Combining and slicing arrays

Copy
1const first = [1, 2, 3, 4];
2const second = [7, 8, 9, 10];
3
4const combined = first.concat(second);
5
6console.log({ combined });
7console.log({ first });
8console.log({ second });
9
10const slice = combined.slice(2, 5);
11
12console.log({ slice });
13console.log({ combined });
14
15const slice1 = combined.slice(2);
16console.log({ slice1 });
17
18// this will copy the entire array
19const combined2 = combined.slice();
20console.log({ combined2 });

In both these methods if we are dealing with primitive values then these primitive values will be copied to the new array. But if you have objects inside array then those are not copied their references are copied that means input in both the arrays will point to the same object.

Copy
1const first = [1, 2, 3, { id: 5 }];
2const second = [7, 8, 9, 10];
3
4const combined = first.concat(second);
5
6first[3].id = 115;
7
8console.log({ combined });
9console.log({ first });
10console.log({ second });

Shorter using spread operator

Copy
1const first = [1, 2, 3, { id: 5 }];
2const second = [7, 8, 9, 10];
3
4const combined = [...first, ...second];
5const combined1 = [...first, 'a', ...second, 'b'];
6
7console.log({ combined });
8console.log({ combined1 });
9console.log({ first });
10console.log({ second });

Iterating through array

Copy
1const numbers = [1, 2, 3, { id: 5 }];
2
3for (let num of numbers) {
4    console.log(num);
5}
6
7numbers.forEach(function (num) {
8    console.log(num);
9});
10
11numbers.forEach((num) => console.log(num));
12numbers.forEach((num, index) => console.log(index, num));

Joining Arrays

Copy
1const numbers = [1, 2, 3, 4];
2const joined = numbers.join(',');
3console.log(joined);
4
5const message = 'This is my message';
6const parts = message.split(' ');
7console.log(parts);
8
9console.log(parts.join('-'));

Sorting Arrays

Copy
1const numbers = [2, 3, 1];
2numbers.sort();
3console.log(numbers);
4
5numbers.reverse();
6console.log(numbers);

sorting objects

Copy
1const courses = [
2    { id: 1, name: 'Nodejs' },
3    { id: 2, name: 'javascript' },
4];
5console.log(courses);
6
7courses.sort(function (a, b) {
8    const nameA = a.name.toLowerCase();
9    const nameB = b.name.toLowerCase();
10
11    if (nameA < nameB) return -1;
12    if (nameA > nameB) return 1;
13
14    return 0;
15});
16
17console.log(courses);

Testing elements of array

every method & some method

Copy
1const numbers = [1, -1, 2, 3];
2
3const allPositive = numbers.every(function (value) {
4    return value >= 0;
5});
6
7console.log(allPositive);
8
9const atLeastOnePositive = numbers.some(function (value) {
10    return value >= 0;
11});
12
13console.log(atLeastOnePositive);

As soon as every finds an element that doesn't match this criteria, it's going to stop searching.

As soon as some finds an element that matches this criteria, it's going to return true.

Filtering Arrays

Copy
1const numbers = [1, -1, 2, 3];
2
3const filtered = numbers.filter(function (value) {
4    return value >= 0;
5});
6
7console.log(filtered);

shorter using arrow functions.

Copy
1const numbers = [1, -1, 2, 3];
2
3const filtered = numbers.filter((value) => value >= 0);
4
5console.log(filtered);

Mapping an array

these don't modify original array. They return new array;

Copy
1const numbers = [1, -1, 2, 3];
2const items = numbers.map((n) => '<li>' + n + `</li>`);
3const html = '<ul>' + items.join('') + '</ul>';
4console.log(html);
5
6const items1 = numbers.map((n) => {
7    const obj = { value: n };
8    return obj;
9});
10
11console.log(items1);

Chaining methods

Copy
1const numbers = [1, -1, 2, 3];
2const items = numbers
3    .filter((n) => n >= 0)
4    .map((n) => ({ value: n }))
5    .filter((obj) => obj.value > 1)
6    .map((obj) => obj.value);
7
8console.log(items);

Reducing an array

Copy
1let numbers = [1, -1, 2, 3];
2
3let sum = 0;
4
5for (let number of numbers) {
6    sum = sum + number;
7}
8
9console.log(sum);
10
11numbers = [1, 2, 3];
12
13const ans = numbers.reduce((accumulator, currentValue) => {
14    return accumulator + currentValue;
15}, 0);
16
17console.log(ans);

This callback function is executed multiple times, each time this currentValue will be set to one element in this array. So in each call, we want to get this currentValue and add it to accumulator.

Now we can make this code even shorter. We can exclude the initialization of the accumulator, and with this, accumulator will be set to the first element and currentValue to be the second element.

Copy
1let numbers = [1, 2, 3];
2
3const ans = numbers.reduce((accumulator, currentValue) => {
4    return accumulator + currentValue;
5});
6
7console.log(ans);

Functions

We can use the function declaration syntax or function expression which basically involves declaring a variable or a constant.

Copy
1//Function declaration
2function walk() {
3    console.log('walk');
4}
5
6//Anonymous function expression
7const run = function () {
8    console.log('walk');
9};
10
11//Named function expression
12const run1 = function walk1() {
13    console.log('walk');
14};
15
16let move = run;
17
18run();
19walk();
20run1();
21move();

Hoisting in Javascript

We can call a function that is defined using the function declaration syntax before it's definition. The reason for this is because when our JavaScript engine executes this code, it moves all the function declarations to the top.

Hoisting is the process of moving function declarations to the top of the file. And this is done automatically by the JavaScript engine that is executing this code.

Copy
1walk();
2function walk() {
3    console.log('walk');
4}
5
6// run(); // this will give error Cannot access 'run' before initialization
7const run = function () {
8    console.log('walk');
9};

Javascript is a dynamic language

JavaScript is a dynamic language, so we can declare a variable, set it to a number and then change its type and set it to a string and that perfectly fine from the perspective of a JavaScript engine.

Copy
1let x = 1;
2console.log(x);
3
4x = 'a';
5console.log(x);

Arguments

But in JavaScript, it doesn't matter that if a function has 2 parameters, we can pass only 1 argument. We can even pass no arguments.

Copy
1function sum(a, b) {
2    return a + b;
3}
4
5console.log(sum(1, 2));
6console.log(sum(1)); //a=1 b=undefined so answer is NaN
7console.log(sum()); //a=undefined b=undefined so answer is NaN

We can even pass additional arguments.

Every function in JavaScript has a special object called arguments. arguments has a length property that returns the number of arguments that are passed. We have this other property, callee which returns the currently executed function, so you see we have a reference to our sum function.

We can use the for of loop, on arrays, but technically this loop can be used on any object that has an iterator. So the plain objects that we create with the object literal syntax, they don't have an iterator, but this particular object you can see, here we have symbol.iterator.

Copy
1function sum(a, b) {
2    console.log(arguments);
3    return a + b;
4}
5
6console.log(sum(1, 2, 3, 4, 5));
7
8function sum1(a, b) {
9    let total = 0;
10    for (let value of arguments) {
11        total = total + value;
12    }
13    return total;
14}
15
16console.log(sum1(1, 2, 3, 4, 5));
17
18function sum2() {
19    let total = 0;
20    for (let value of arguments) {
21        total = total + value;
22    }
23    return total;
24}
25
26console.log(sum2(1, 2, 3, 4, 5, 10));

The rest operator

Copy
1function sum(...args) {
2    console.log(args);
3    return args.reduce((a, b) => a + b);
4}
5
6console.log(sum(1, 2, 3, 4, 5));

Rest parameter must be last formal parameter. So we cannot have a parameter after using the rest operator.

Default Parameter

Whenever you want to give the function parameter a default value, make sure that parameter is the last parameter in the list, or give all the parameters after that a default value.

Copy
1function interest(principal, rate, years) {
2    rate = rate || 3.5;
3    years = years || 5;
4    return ((principal * rate) / 100) * years;
5}
6console.log(interest(10000));
7
8function interest(principal, rate = 3.5, years = 5) {
9    return ((principal * rate) / 100) * years;
10}
11console.log(interest(10000));

getter setter

Copy
1const person = {
2    firstname: 'Anish',
3    secondname: 'Kumar',
4    get fullName() {
5        return `${this.firstname} ${this.secondname}`;
6    },
7    set fullName(value) {
8        const parts = value.split(' ');
9        this.firstname = parts[0];
10        this.secondname = parts[1];
11    },
12};
13
14console.log(person.fullName);
15console.log(person.firstname);
16console.log(person.secondname);
17
18person.fullName = 'John smith';
19
20console.log(person.fullName);
21console.log(person.firstname);
22console.log(person.secondname);

Try Catch

Copy
1const person = {
2    firstname: 'Anish',
3    secondname: 'Kumar',
4    get fullName() {
5        return `${this.firstname} ${this.secondname}`;
6    },
7    set fullName(value) {
8        if (typeof value !== 'string') {
9            throw new Error('Value is not a string');
10        }
11        const parts = value.split(' ');
12        if (parts.length !== 2) {
13            throw new Error('Enter a first and second name');
14        }
15        this.firstname = parts[0];
16        this.secondname = parts[1];
17    },
18};
19
20try {
21    person.fullName = null;
22} catch (e) {
23    alert(e);
24}

Scope

So a scope of a variable or a constant, determines where that variable or constant is accessible.

Copy
1{
2    const name = 'ansih';
3}
4
5// console.log(name); //ReferenceError: name is not defined

Copy
1function start() {
2    const message = 'hi';
3
4    if (true) {
5        const another = 'bye';
6    }
7
8    // console.log(another); //ReferenceError: another is not defined
9}
10
11start();

Copy
1function start() {
2    for (let i = 0; i < 10; i++) {
3        console.log(i);
4    }
5    //console.log(i); //ReferenceError: i is not defined
6}
7
8start();

Copy
1const color = 'red'; //global scope
2
3function start() {
4    console.log(color);
5}
6
7function stop() {
8    console.log(color);
9}
10
11start();
12
13stop();

let vs var

When you declare a variable with var. It's scope, is not limited to the block in which it's defined. It's limited to the function in which it's defined.

So before ES6, var was the only way to declare variables and constants. Starting from ES6, also called ES2015, now we have two new keywords let and const, to define different variables and constants.

These two keywords create block scope variables, but var creates function scoped variables.

Copy
1function start() {
2    for (let i = 0; i < 10; i++) {
3        console.log(i);
4    }
5    //console.log(i); //ReferenceError: i is not defined
6}
7
8start();

Copy
1function start() {
2    for (var i = 0; i < 10; i++) {
3        console.log(i);
4    }
5    console.log(i);
6}
7
8start();

When we use var, outside of a function, this creates a global variable and attaches that global variable to the window object in the browser. So in browsers we have this window object, which is a complex object with lots of proprties.

In contrast when we use the let keyword to define a global variable, that global variable is not attached to the window object.

If a third party library also has a variable with the same name, that variable can override your variable.

Copy
1var color = 'red';
2let age = 30;
3
4//So technically this is a global function, it's attached to the window object and that is bad practice.
5function sayHi() {
6    console.log('HI');
7}

this

when you use the new operator this new operator creates a new empty object and sets this in this constructor function to point to this empty object.

Copy
1const video = {
2    title: 'a',
3    play: function () {
4        console.log(this);
5    },
6};
7
8video.stop = function () {
9    console.log(this);
10};
11
12video.play();
13video.stop();
14
15function playVideo() {
16    console.log(this); // we are going to see the global object which is window in browsers and global in Node.
17}
18playVideo();
19
20function Video() {
21    this.title = 'kumar';
22    this.name = 'manish';
23    console.log(this);
24}
25
26const v = new Video();

Copy
1const video = {
2    title: 'a',
3    tags: ['a', 'b', 'c'],
4    showTags() {
5        this.tags.forEach(function (tag) {
6            console.log(this, tag);
7        });
8    },
9};
10
11// showTags function is just a regular function. It's not a method in the video object. So because this is a regular function, this references the global object
12video.showTags();
13
14//for each method has two parameters,the first parameter is our callback function, the second parameter is thisArg? So we can pass an object here, and this will reference that object. For example, here I can pass a new object
15
16const video1 = {
17    title: 'a',
18    tags: ['a', 'b', 'c'],
19    showTags() {
20        this.tags.forEach(function (tag) {
21            console.log(this, tag);
22        }, this);
23    },
24};
25
26video1.showTags();

Changing this

Copy
1const video = {
2    title: 'a',
3    tags: ['a', 'b', 'c'],
4    showTags() {
5        const self = this;
6        this.tags.forEach(function (tag) {
7            console.log(self.title, tag);
8        });
9    },
10};
11video.showTags();

Copy
1function playVideo(a, b) {
2    console.log(this);
3}
4
5playVideo();
6
7playVideo.call({ title: 'call' }, 1, 2);
8
9playVideo.apply({ title: 'apply' }, [1, 2]);
10
11fn = playVideo.bind({ title: 'bind' });
12playVideo();
13fn();

Copy
1const video = {
2    title: 'a',
3    tags: ['a', 'b', 'c'],
4    showTags() {
5        this.tags.forEach(
6            function (tag) {
7                console.log(this.title, tag);
8            }.bind(this)
9        );
10    },
11};
12video.showTags();