JavaScript Interview Questions

No, you cannot redeclare let and const variables. If you do, it throws below error

Uncaught SyntaxError: Identifier 'someVariable' has already been declared

Function Scope: variables defined inside a function are not accessible outside the function.

function foo() {
	var a = 1;
	function bar() {
		console.log(a); // 1
	}
	bar();
}

foo(); // 1

Block Scope :

This scope restricts the variable that is declared inside a specific block, from access by the outside of the block. The let & const keyword facilitates the variables to be block scoped.

if (true) {
	let a = 1;
	console.log(a); // 1
}
console.log(a); // ReferenceError: a is not defined

KEY DIFFERENCE

• Local variable is declared inside a function or block scope whereas Global variable is declared outside the function.
• Local variables are created when the function has started execution and is lost when the function terminates, on the other hand, Global variable is created as execution starts and is lost when the program ends.
• Local variable doesn’t provide data sharing whereas Global variable provides data sharing.
• Local variables are stored on the stack whereas the Global variable are stored on a fixed location decided by the compiler.

The main difference between let and var is that scope of a variable defined with let is limited to the block in which it is declared while variable declared with var has the global scope. So we can say that var is rather a keyword which defines a variable globally regardless of block scope.

Also, one difference between var and let is variable with var can be redeclared to some other value while variable could not be redeclared if it is defined with let.

In JavaScript, the memory management process is automated. The browser takes care of that thing for us. When a variable function or object is created in javascript the memory space is created for the reading and write operations. after the operations are done and no longer references are connected to the variable then the garbage collector release the variables from memory spaces. The Garbage Collection mechanism in JavaScript is governed by two algorithms

Reference Counting Algorithm It determines the usefulness of an object by finding out if the object is being referenced by some other object or not.

Mark and Sweep Algorithm. If an object is having zero references then it is effectively unreachable. So it is fit to be a garbage.

Below are the list of some new features of ES6,

• Support for constants or immutable variables
• Block-scope support for variables, constants and functions
• Arrow functions
• Default parameters
• Rest and Spread Parameters
• Template Literals
• Multi-line Strings
• Destructuring Assignment
• Enhanced Object Literals
• Promises
• Classes
• Modules

Global variables are those that are available throughout the length of the code without any scope. The var keyword is used to declare a local variable but if you omit it then it will become global variable

msg = 'Hello'; // var is missing, it becomes global variable

The namespace is a programming paradigm it's used to avoid variable naming collisions. Help to organize code into logical groups. JavaScript does not provide namespace by default. However, we can replicate this functionality by making a global object which can contain all functions and variables.

Example

const service = {
	get: function () {
		// Get Api Implemented
	},
	put: function () {
		// put Api Implemented
	},
	post: function () {
		// post Api Implmented
	}
};

service.get();
service.post();

Progressive Web Apps (PWAs) are web apps that use service workers, manifests, and other web-platform features in combination with progressive enhancement to give users an experience on par with native apps.

It's used to get the raw string form of template literals without processing to escape sequences (e.g. \n).

var str = `Hello world \n Jon Snow`;
console.log(str);
// Hello world
//  Jon Snow

var rawStr = String.raw`Hello world \n Jon Snow`;
console.log(rawStr); //Hello world \n Jon Snow

There are at least three great things about JavaScript:

1. Full integration with HTML/CSS.
2. Simple and easy to understand syntax.
3. Supported by all modern browsers and enabled by default in all modern browsers.

Event Delegation is basically a pattern to handle events efficiently. Instead of adding an event listener to each and every similar element, we can add an event listener to a parent element and call an event on a particular target using the .target property of the event object.

• No need to add many handlers.
• When adding or removing elements, no need to add/remove handlers.

JavaScript is a loosely typed or dynamic language because variables in JavaScript are not directly associated with any particular value type, and any variable can be assigned/reassigned with values of all types.

let age = 50; // age is a number now
age = 'old'; // age is a string now
age = true; // age is a boolean

JavaScript is called a dynamic language because it doesn't just have a few dynamic aspects, pretty much everything is dynamic.

All variables are dynamic (both in type and existance), and even the code is dynamic. You can create new variables at runtime, and the type of variables is determined at runtime

ES6 stands for ECMAScript 6. ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was published in 2015, and is also known as ECMAScript 2015.

Function Declaration A function created with a function declaration is a Function object and has all the properties, methods and behavior of Function

function add(a, b) {
	return a + b;
}

Function Expression A Functions stored in variables do not need function names. They are always invoked (called) using the variable name.

const add = function (a, b) {
	return a + b;
};

In JavaScript, Hoisting is the default behavior of moving all the declarations at the top of the scope before code execution. Basically, it gives us an advantage that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local.

It allows us to call functions before even writing them in our code.

Note: JavaScript only hoists declarations, not the initializations.

JavaScript allocates memory for all variables and functions defined in the program before execution. Reference

Javascript is a synchronized single-threaded programming language.

Polyfills allow web developers to use an API regardless of whether or not it is supported by a browser, and usually with minimal overhead. Typically they first check if a browser supports an API, and use it if available, otherwise using their own implementation.

The scope of a variable is the region of your program in which it is defined. JavaScript variables have only two scopes.

• Global Variables − A global variable has global scope which means it can be defined anywhere in your JavaScript code
• Local Variables − A local variable will be visible only within a function or block (let,const) where it is defined. Function parameters are always local to that function

A shallow copy is a copy of the object itself. It does not copy the properties of the object. It just copies the reference to the object.

const obj = {
	a: 1,
	b: 2
};

const obj2 = obj;
obj2.a = 2;

console.log(obj2); // {a: 2, b: 2}
console.log(obj); // {a: 2, b: 2}

The call stack has a maximum size assigned. Stack Overflow occurs when the number of function calls added to the stack increases the stack’s maximum limit (the call stack has a maximum size). A classic example to cause such a situation is Recursion. Recursion is a process in which a function calls itself until a terminating condition is found.

function recursion() {
	recursion(); //a function calling itself
}
recursion();

let allows you to declare variables that are limited to the scope of a block statement, or expression on which it is used, unlike the var keyword, which declares a variable globally, or locally to an entire function regardless of block scope.

function varTest() {
	var x = 1;
	{
		var x = 2; // same variable!
		console.log(x); // 2
	}
	console.log(x); // 2
}

function letTest() {
	let x = 1;
	{
		let x = 2; // different variable
		console.log(x); // 2
	}
	console.log(x); // 1
}

The call stack is used by JavaScript to keep track of multiple function calls. It is like a real stack in data structures where data can be pushed and popped and follows the Last In First Out (LIFO) principle. We use call stack for memorizing which function is running right now. The below example demonstrates the call stack.

Creation Phase It picks all function declarations and stores them in memory with their reference. Also picks all variables and assigns undefined to them.

Execution Phase In that phase read the code line by line and assigns variable values. and execute functions.

They're just different objects you're dealing with:

DOM

The DOM is the Document object model which is deals with the document, the HTML elements themselves, e.g document and all traversal you would do in it, events, etc.

BOM

The BOM is the Browser Object Model, which deals with browser components aside from the document, like history, location, navigator and screen (as well as some others that vary by browser).

Both are totally unrelated programming languages and no relation between them. Java is statically typed, compiled, runs on its own VM. Whereas Javascript is dynamically typed, interpreted, and runs in a browser and nodejs environments. Let's see the major differences in a tabular format,

Shallow Copy: Shallow copy is a bitwise copy of an object. A new object is created that has an exact copy of the values in the original object. If any of the fields of the object are references to other objects, just the reference addresses are copied i.e., only the memory address is copied.

var empDetails = {
	name: 'John',
	age: 25,
	expertise: 'Software Developer'
};

to create a duplicate

var empDetailsShallowCopy = empDetails; //Shallow copying!

if we change some property value in the duplicate one like this:

empDetailsShallowCopy.name = 'Johnson';

The above statement will also change the name of empDetails, since we have a shallow copy. That means we're losing the original data as well.

Deep copy: A deep copy copies all fields, and makes copies of dynamically allocated memory pointed to by the fields. A deep copy occurs when an object is copied along with the objects to which it refers.

var empDetails = {
	name: 'John',
	age: 25,
	expertise: 'Software Developer'
};

Create a deep copy by using the properties from the original object into new variable

var empDetailsDeepCopy = {
	name: empDetails.name,
	age: empDetails.age,
	expertise: empDetails.expertise
};

Now if you change empDetailsDeepCopy.name, it will only affect empDetailsDeepCopy & not empDetails

A temporal dead zone (TDZ) is the area of a block where a variable is inaccessible until the moment the computer completely initializes it with a value.

function somemethod() {
	console.log(counter1); // undefined
	console.log(counter2); // ReferenceError
	var counter1 = 1;
	let counter2 = 2;
}

ECMAScript 5 introduced the concept of "strict mode" . It allows you to place a program, or a function, in a "strict" operating context. This strict context prevents certain actions from being taken and throws more exceptions . Its main purpose is to do more checking.

With Strict Mode

'use strict';
username = 'Jon';
console.log(username);
// Uncaught ReferenceError: username is not defined

WithOut Strict Mode

username = 'Jon';
console.log(username);
//Jon

JavaScript is a multi-paradigm language, supporting imperative/procedural programming, Object-Oriented Programming and functional programming. JavaScript supports Object-Oriented Programming with prototypical inheritance.

The load event is fired when the whole page has loaded, including all dependent resources(stylesheets, images).

when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading

ES6 classes are syntactic sugar for the prototypical class system we use today. They make code more concise and self-documenting, which is reason enough to use them.

• The syntax is more clear and less error-prone
• The syntax is also way more clean and easier to understand.
• Setting up inheritance is really easy.
• You can inherit from Array, which wasn't possible before.
• In a subclass, calling a parent's function is very easy: just type super.

WithOut ES6 class:

var Foo = (function () {
	function Foo(bar) {
		this._bar = bar;
	}

	Foo.prototype.getBar = function () {
		return this._bar;
	};

	return Foo;
})();

With ES6 class: The syntax is also way more clean and easier to understand.

class Foo {
	constructor(bar) {
		this._bar = bar;
	}

	getBar() {
		return this._bar;
	}
}

You can create both link and script elements in the DOM and append them as children to the head tag. Let's create a function to add script and style resources as below,

function loadAssets(filename, filetype) {
	if (filetype == 'css') {
		// External CSS file
		var fileReference = document.createElement('link');
		fileReference.setAttribute('rel', 'stylesheet');
		fileReference.setAttribute('type', 'text/css');
		fileReference.setAttribute('href', filename);
	} else if (filetype == 'js') {
		// External JavaScript file
		var fileReference = document.createElement('script');
		fileReference.setAttribute('type', 'text/javascript');
		fileReference.setAttribute('src', filename);
	}
	if (typeof fileReference != 'undefined')
		document.getElementsByTagName('head')[0].appendChild(fileReference);
}

Handle multiple promises and complete each one before starting the next one. The Promise.all It takes an array of promises and returns a single promise.

const promiseOne = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve('one');
	}, 1000);
});

const promiseTwo = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve('two');
	}, 2000);
});

const promiseThree = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve('three');
	}, 3000);
});

const resolved = Promise.all([promiseOne, promiseTwo, promiseThree]).then((results) => {
	console.log(results);
});

Pending the promise has been created, and the asynchronous function it's associated with has not succeeded or failed yet. This is the state your promise is in when it's returned from a call to fetch(), and the request is still being made.

Fulfilled The asynchronous function has succeeded. When a promise is fulfilled, its then() handler is called.

Rejected The asynchronous function has failed. When a promise is rejected, its catch() handler is called.

when you declare variable in case statements, they would hoisted to the switch statement. I would show you a very simple way to make sure the variables you declare in your case statements can only be accessed from that block.

One important point to remember is that each case statement is not a block. Variables declared anywhere within the switch statement is locally scoped to the switch statement.

    let number  = 2;

    switch (number) {
        case 1:
            let message = "first number";
            console.log(message)
            break;
        case 2:
            let message = "second number";
            console.log(message)
            break;
    case 3:
            let message = "third number";
            console.log(message)
            break;
        default
            let message = "second number";
            console.log(message)
            break;
    }

    //This throws a syntax error: identifier "message"
    //has already been declared

There are cases where you might need yo hold different variable values in each of the case statements. It's possible to keep a variable scoped to the case statement. There's a very easy fix for this, Let's solve this

    let number  = 2;

    switch (number) {
        case 1: { // braces make the case statement a block
            let message = "number" + number; // this remains in this block
            console.log(message)
            break;
        }
        case 2: {
            let message =  "number" + number; // this is a valid syntax
            console.log(message)
            break;
        }
        case 3: {
            let message = "number" + number;
            console.log(message)
            break;
        }
        default
            let message =  "number" + number;
            console.log(message)
            break;
    }

By wrapping a block in braces, any variable declared within that block is only visible within the block,and is garbage collected once the block ends.

With this syntax, each of these variables are declared within a block, scoped away from each other. They can only be accessed from within the case scope and thrown away once the block ends.

Reference

Those are Essentials falsy values in Javascript.

false;
undefined;
null;
NaN;
0 + 0 - 0;
('');
''``;

Strict mode is a way to tell the JavaScript engine to be more strict when running your code. Strict mode changes some of the ways that JavaScript treats your code to be more predictable and to prevent you from making errors. Strict mode is not a way to enforce the coding style of your code, but it can help you to be more predictable.

Strict mode can be enabled by adding the strict mode directive at the beginning of your code or before any statement which you want to be in strict mode.

Global scope strict mode

'use strict';

Local scope strict mode

function foo() {
	'use strict';
	return this;
}

The final statement executes after the try..catch statement gets a pass. Regardless of the result. If get an error on the catch block or closed on the try block. it will always get executed.

var result = 18;
try {
	if (result > 10) {
		throw new Error('result is too large');
	}
} catch (e) {
	console.log(e);
} finally {
	console.log('finally');
}

Output

 Error: result is too large
 finally

Break Statement The break statement is used at an instance whereby satisfying the condition being specified, the whole loop gets skipped and it takes you out of the loop. In other words, the loop is stopped

for (i = 1; i <= 8; i++) {
	if (i === 5) break;
	console.log(i);
}

Continue Let’s consider a situation where we are in a loop and we desire to break one iteration whenever a specified condition occurs and then we continue with the next iteration in the loop.

The Continue statement is going to fulfill that desire for us. Unlike break, the continue statement “jumps over” to the next iteration/execution of the loop.

Whenever a continue statement takes place, the loop condition is checked to see if the condition is satisfied or true and if so, it goes towards the next iteration.

for (i = 1; i < 8; i++) {
	if (i === 3 || i === 4) continue;
	console.log(i);
}

for (..in) loop The JavaScript for (..in) statement loops through the enumerable properties of an object. The loop will iterate over all enumerable properties of the object.

const obj = {
	a: 1,
	b: 2,
	c: 3
};

for (let key in obj) {
	console.log(key);
}

for (..of) loop This for (..of) statement lets you loop over the data structures that are iterable such as Arrays, Strings, Maps, Node Lists, and more. It calls a custom iteration hook with instructions to execute on the value of each property of the object.

const obj = {
	a: 1,
	b: 2,
	c: 3
};

for (let key of Object.entries(obj)) {
	console.log(key);
}

We can create an infinity loop using for loop without expression and also a while loop gave the starting condition true.

for (;;) {}
while (true) {}

The JavaScript for of statement loops through the values of an iterable object. It lets you loop over iterable data structures such as Arrays, Strings, Maps, NodeLists, and more:

const cars = ['BMW', 'Volvo', 'Mini'];

let text = '';
for (let x of cars) {
	text += x;
}

// BMW
// Volvo
// Mini

for in loops over enumerable property names of an object.

var obj = {
	a: 1,
	b: 2,
	c: 3
};

for (var key in obj) {
	console.log(key);
}

// a
// b
// c

for of (new in ES6) does use an object-specific iterator and loops over the values generated by that.

var obj = {
	a: 1,
	b: 2,
	c: 3
};

for (let item of Object.entries(obj)) {
	console.log(item);
}

// Output:
// [ 'a', 1 ]
// [ 'b', 2 ]
// [ 'c', 3 ]

The do..while loop is the variant of the while loop. It's executed once before checking the condition is true. Then it will repeat the condition as long as the condition is true.

let number = 1;

do {
	number++;
	console.log(number);
} while (number < 10);

A programming language is said to have First-class functions when functions in that language are treated like any other variable. For example, in such a language, a function can be passed as an argument to other functions, can be returned by another function and can be assigned as a value to a variable.

Example

function sayHello() {
	return 'Hello, ';
}
function greeting(helloMessage, name) {
	console.log(helloMessage() + name);
}
// Pass `sayHello` as an argument to `greeting` function
greeting(sayHello, 'JavaScript!');
// Hello, JavaScript!

A function that receives another function as an argument or that returns a new function or both is called Higher-order functions. Higher-order functions are only possible because of the First-class function.

const greet = function (name) {
	return function (m) {
		console.log(`Hi!! ${name}, ${m}`);
	};
};

const greet_message = greet('ABC');
greet_message('Welcome To GeeksForGeeks');

We can also call the function like this also — greet(‘ABC’)(‘Welcome To GeeksForGeeks’), It will also give the same output.

Hi!! ABC, Welcome To GeeksForGeeks

Call#

Call invokes the function and allows you to pass in arguments one by one.

const user = {
	name: 'Jobayer Hossain'
};

function greet(greet, ask) {
	return `Hello ${greet} ${this.name} ${ask}`;
}

const userJonCall = greet.call(user, 'Sir,', 'How are you ?');
// Hello Sir, Jobayer Hossain How are you ?

Apply#

Apply invokes the function and allows you to pass in arguments as an array.

const user = {
	name: 'Jobayer Hossain'
};

function greet(greet, ask) {
	return `Hello ${greet} ${this.name} ${ask}`;
}

const userJonApply = greet.apply(user, ['Sir', 'How are your?']);
// Hello Sir, Jobayer Hossain How are you?

Bind#

Bind returns a new function, allowing you to pass in a this array and any number of arguments.

const user = {
	name: 'Jobayer Hossain'
};

function greet(greet, ask) {
	return `Hello ${greet} ${this.name} ${ask}`;
}

const userJonBind = greet.bind(user);
const userJonResponse = userJonBind('Sir', 'How are your?');
// Hello Sir, Jobayer Hossain How are you ?

When destructuring happens the property's initial value was undefined now we can assign an initial value to the restructuring property instant of holding it undefined.

Arrays destructuring:

var x, y, z;

[x = 2, y = 4, z = 6] = [10];
console.log(x); // 10
console.log(y); // 4
console.log(z); // 6

Objects destructuring:

var { x = 2, y = 4, z = 6 } = { x: 10 };

console.log(x); // 10
console.log(y); // 4
console.log(z); // 6

Javascript has events that provide a dynamic interface to a webpage. These events are connected to elements in the Document Object Model(DOM).

The isNaN() function is used to determine whether a value is an illegal number (Not-a-Number) or not. i.e, This function returns true if the value equates to NaN. Otherwise it returns false.

isNaN('Hello'); //true
isNaN('100'); //false

Arrow functions have a few important distinctions in how they work that distinguish them from traditional functions, as well as a few syntactic enhancements. The biggest functional differences are that arrow functions do not have their own this binding or prototype and cannot be used as a constructor. Arrow functions can also be written as a more compact alternative to traditional functions, as they grant the ability to omit parentheses around parameters and add the concept of a concise function body with implicit return.

Cleaner Syntax#

const sum = (a, b) => {
	return a + b;
};
sum(10, 10); // 20

this Bindings#

const sum = () => {
	return this;
};
sum(); // [object Window]

Constructor#

const person = () => {};
const p = new person();
// Uncaught TypeError: person is not a constructor

A Pure function is a function where the return value is only determined by its arguments without any side effects.

function sum(a, b) {
	return a + b;
}

sum(10, 20); // 30

Rest parameter is a way to provide handled uncountable params in a function. It's useful when we don't know how many parameters are coming from it's accept all unknown parameters as an array of values.

function getNames(...rest) {
	console.log(rest);
}

console.log(getNames('John', 'Doe', 'Jane', 'Doe'));
// ['John', 'Doe', 'Jane', 'Doe']

Arrow function is a function expression that has a shorter syntax than function declaration. And it is also a function expression that has no name. Arrow function does not have own this, arguments, super, or new.target.

function add(a, b) {
	return a + b;
}

const add = (a, b) => {
	return a + b;
};

It is a technique in functional programming, transforming of the function of multiple arguments into several functions of a single argument in sequence. It is also called nested function is ECMAScript

// Noncurried version
const add = (a, b, c) => {
	return a + b + c;
};
console.log(add(2, 3, 5)); // 10

// Curried version
const addCurry = (a) => {
	return (b) => {
		return (c) => {
			return a + b + c;
		};
	};
};
console.log(addCurry(2)(3)(5)); // 10

The destructuring assignment is a JavaScript expression that makes it possible to unpack values from arrays or properties from objects into distinct variables.

var [one, two, three] = ['JAN', 'FEB', 'MARCH'];

console.log(one); // "JAN"
console.log(two); // "FEB"
console.log(three); // "MARCH"

var { name, age } = { name: 'John', age: 32 };

console.log(name); // John
console.log(age); // 32

The eval() function evaluates JavaScript code represented as a string and returns its completion value. The source is parsed as a script.

console.log(eval('2 + 2'));
// 4

Default parameters are parameters that are set to a default value if they are not passed to the function. Default parameters are useful for functions that have optional parameters. Default parameters are also useful for functions that have multiple parameters with default values.

// Example
function greet(name = 'Anonymous') {
	console.log('Hello ' + name + '!');
}

greet(); // Hello Anonymous!

Rest parameters are used to represent an indefinite number of arguments. Rest parameters are not mandatory. It is useful when you want to represent an indefinite number of arguments as an array.

function sum(...args) {
	return args.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined. The signature of it would be as below,

(function () {
	// logic here
})();

The primary reason to use an IIFE is to obtain data privacy because any variables declared within the IIFE cannot be accessed by the outside world. i.e, If you try to access variables with IIFE then it throws an error as below,

(function () {
	var message = 'IIFE';
	console.log(message);
})();
console.log(message); //Error: message is not defined

Memoization is a programming technique which attempts to increase a function’s performance by caching its previously computed results. Each time a memoized function is called, its parameters are used to index the cache. If the data is present, then it can be returned, without executing the entire function. Otherwise the function is executed and then the result is added to the cache. Let's take an example of adding function with memoization,

const memoizAddition = () => {
	let cache = {};
	return (value) => {
		if (value in cache) {
			console.log('Fetching from cache');
			return cache[value]; // Here, cache.value cannot be used as property name starts with the number which is not a valid JavaScript  identifier. Hence, can only be accessed using the square bracket notation.
		} else {
			console.log('Calculating result');
			let result = value + 20;
			cache[value] = result;
			return result;
		}
	};
};
// returned function from memoizAddition
const addition = memoizAddition();
console.log(addition(20)); //output: 40 calculated
console.log(addition(20)); //output: 40 cached

A function that calls itself is called a recursive function. In some ways, recursion is analogous to a loop. Both execute the same code multiple times, and both require a condition (to avoid an infinite loop, or rather, infinite recursion in this case).

const factorial = function fac(n) {
	return n < 2 ? 1 : n * fac(n - 1);
};

factorial(3);

The arguments object is an array-like object containing the arguments passed to a function. The arguments object is a local variable within a function and is not accessible from outside the function.

// Example
function sum() {
	var sum = 0;
	for (var i = 0; i < arguments.length; i++) {
		sum += arguments[i];
	}
	return sum;
}
sum(1, 2, 3); // 6

The setTimeout() method allows you to execute a piece of code after a certain amount of time has passed. You can think of the method as a way to set a timer to run JavaScript code at a certain time.

For example, the code below will print "Hello World" to the JavaScript console after 2 seconds have passed:

setTimeout(function () {
	console.log('Hello World');
}, 2000);

console.log('setTimeout() example...');

You can also pass additional parameters to the setTimeout() method that you can use inside the function as follows:

function greeting(name, role) {
	console.log(`Hello, my name is ${name}`);
	console.log(`I'm a ${role}`);
}

setTimeout(greeting, 3000, 'Nathan', 'Software developer');

The preventDefault() method cancels the event if it is cancelable, meaning that the default action or behaviour that belongs to the event will not occur. For example, prevent form submission when clicking on submit button and prevent opening the page URL when clicking on hyperlink are some common use cases.

document.getElementById('link').addEventListener('click', function (event) {
	event.preventDefault();
});

Throttling is a technique used to limit the execution of an event handler function, even when this event triggers continuously due to user actions. The common use cases are browser resizing, window scrolling etc. The below example creates a throttle function to reduce the number of events for each pixel change and trigger scroll event for each 100ms except for the first event.

const throttle = (fn, limit) => {
	let isThrottled = false;
	return (...args) => {
		if (isThrottled) return;
		isThrottled = true;
		fn.apply(this, args);
		setTimeout(() => {
			isThrottled = false;
		}, limit);
	};
};
const sum = (a) => {
	console.log(a);
	return a + 10;
};
const throttled = throttle(() => sum(10), 1000);
document.body.addEventListener('click', () => throttled());

When an inner function uses the outer function's variable, then closer is created in javascript.

// Closure is not created example
function addSquares(a, b) {
	function square(x) {
		return x * x;
	}
	return square(a) + square(b);
}

// Closure is created example
function addSquares(a, b) {
	function square(x) {
		return a * x;
	}
	return square(a) + square(b);
}

Anonymous functions are often arguments being passed to higher-order functions, or used for constructing the result of a higher-order function that needs to return a function. If the function is only used once, or a limited number of times, an anonymous function may be syntactically lighter than using a named function. An anonymous function can be useful for creating IIFE(Immediately Invoked Function)

function (optionalParameters) {
  //do something
}

const myFunction = function(){ //Anonymous function assigned to a variable
  //do something
};

[1, 2, 3].map(function(element){ //Anonymous function used as a callback function
  //do something
});

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Here is a quick example:

function greeting(name) {
	alert('Hello ' + name);
}

function processUserInput(callback) {
	var name = prompt('Please enter your name.');
	callback(name);
}

processUserInput(greeting);

undefined is a variable that refers to something that doesn't exist, and the variable isn't defined to be anything. null is a variable that is defined but is missing a value.

let a;
console.log(a); // undefined

let b = null;
console.log(b); // null

A ReferenceError occurs when you try to use a variable that doesn't exist at all.

A TypeError occurs when the variable exists, but the operation you're trying to perform is not appropriate for the type of value it contains. In the case where the detailed message says "is not defined", this can occur if you have a variable whose value is the special undefined value, and you try to access a property of it.

It is used to check if a value is present in an array or not. It returns true if the value is present in the array and false if not.

Array Example

const arr = [1, 2, 3, 4, 5];
console.log(1 in arr); // true
console.log(6 in arr); // false

Example Object

const obj = {
	name: 'John',
	age: 30
};
console.log('name' in obj); // true
console.log('age' in obj); // true
console.log('job' in obj); // false

Using the delete operator. THe delete operator deletes a property from an object. It returns true if the property was deleted, false if the property was not found.

var person = {
	name: 'John',
	age: 30
};

delete person.age;

console.log(person.age); // undefined

That's not a special operator, it's 2 standard operators one after the other:

• A prefix decrement (--)
• A logical not (!)

x = 1;
if (!x) // false
if (!--x) // becomes 0 and then uses the NOT operator,
          // which makes the condition to be true

The debugger keyword is turned on, It stops the execution of JavaScript code. Otherwise, it has no effect.

The == and === operators are used to check the equality of two operands. The ‘==’ operator tests for abstract equality i.e. it does the necessary type conversions before doing the equality comparison. But the ‘===’ operator tests for strict equality i.e it will not do the type conversion hence if the two values are not of the same type, when compared, it will return false.

==

var a = 1;
var b = '1';

if (a == b) {
	console.log('EQUAL');
} else {
	console.log('NOT EQUAL');
}
// output: EQUAL

===

var a = 1;
var b = '1';

if (a === b) {
	console.log('EQUAL');
} else {
	console.log('NOT EQUAL');
}
// output: NOT EQUAL

Assignment expression is an expression that has a left hand side and a right hand side. The left hand side is the variable that is assigned a value. The right hand side is the value that is assigned to the variable.

Example:

var x = 5;
var y = x;
console.log(y); // 5

Example:

var x = 5;
var y = x;
x = 10;
console.log(y); // 5

Destructuring assignment is a JavaScript feature that allows you to assign values to variables from arrays and objects. It is done by destructuring the array or object and then assigning the variables. It is useful when you want to assign a value to a variable from an array or object. For example, you can assign the first and last name of a person to separate variables.

Object Example:

const person = {
	firstName: 'John',
	lastName: 'Doe'
};

const { firstName, lastName } = person;
console.log(firstName); // John
console.log(lastName); // Doe

Array Example:

const people = ['John', 'Doe', 'Jane', 'Doe'];
const [firstName, lastName, ...rest] = people;
console.log(firstName); // John
console.log(lastName); // Doe
console.log(rest); // ['Jane', 'Doe']

Immutability is the property of data that never changes. It is the property of data that never changes. For example, a person's name is immutable. If you change a person's name, you can't change it back.

'use strict';
const person = {
	name: 'John',
	age: 30
};
// Make it immutable
Object.freeze(person);

The NaN property is a global property that represents "Not-a-Number" value. i.e, It indicates that a value is not a legal number. It is very rare to use NaN in a program but it can be used as return value for few cases

The nullish assignment is a special operator that allows you to assign a value to a variable if the value is null or undefined. It is used to avoid the need to use an if statement to check if a variable is null or undefined. For example: var x = y ?? 'default'; // x is set to y if y is not null or undefined, otherwise x is set to 'default'.

var x = false;
var result = x ?? 'default';
console.log(result); // false

var x = undefined;
var result = x ?? 'default';
console.log(result); // default

The ternary operator is a short hand for an if statement. It is used to check if a condition is true or false and execute a different code block depending on the result. The syntax is: condition ? true code block : false code block.

Example In ternary operator:

var age = prompt('What is your age?');
var ageInNumber = parseInt(age);

var message = ageInNumber >= 18 ? 'You are old enough to drive' : 'You are not old enough to drive';
console.log(message);

Example In if statement:

var age = prompt('What is your age?');
var ageInNumber = parseInt(age);

if (ageInNumber >= 18) {
	console.log('You are old enough to drive');
} else {
	console.log('You are not old enough to drive');
}

A variable that has not been assigned a value is of type undefined. A method or statement also returns undefined if the variable that is being evaluated does not have an assigned value.

let x;
if (typeof x === 'undefined') {
	// these statements execute
}

it's short way to cast a variable to be a boolean (true or false) value. The !! ensures the resulting type is a boolean (true or false).

    console.log(!!"foo") --> true
    console.log(!!null) --> false

The isNaN() method determines whether a value is an illegal number. If the value is not a number, then the method returns true. Otherwise, it returns false.

Example

var x = '5';
var y = 'Hello';

console.log(isNaN(x)); // false
console.log(isNaN(y)); // true

There are various ways to solve this problem. One of the simplest ways is to use built-in functions. and the other way is to use a loop and if-else statement.

Using built-in functions

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var min = Math.min.apply(Math, numbers);
var max = Math.max.apply(Math, numbers);

console.log(min); // 1
console.log(max); // 10

Using a loop and if-else statement.

var min = numbers[0];
var max = numbers[0];

for (var i = 0; i < numbers.length; i++) {
	if (numbers[i] < min) {
		min = numbers[i];
	}
	if (numbers[i] > max) {
		max = numbers[i];
	}
}

console.log(min); // 1
console.log(max); // 10

Yes, it is. The abs() method returns the absolute value of a number. for example, the abs() method returns the absolute value of -5: 5.

var x = -5;
Math.abs(x); // 5

To avoid scientific notation, use the toFixed(n) method. The toFixed(n) method rounds a number to n decimal places. For example, the following code rounds the number to two decimal places:

var x = 12.3456;
var y = x.toFixed(2);
console.log(y); // 12.35

BigInt is a new data type in JavaScript that allows you to store very large numbers. For example, you can store a number with more than 53 bits of precision.

var a = BigInt(1234567890123456789012345678901234567890);
var b = BigInt(1234567890123456789012345678901234567890);

console.log(a + b); // 1234567890123456789012345678901234567891

parseFloat and parseInt are used to convert a string to a number. parseFloat converts a string to a floating point number and parseInt converts a string to an integer. It is important to note that parseFloat and parseInt do not convert a string to a number if the string contains a decimal point. for example, parseFloat("1.2") will return 1.2 and parseInt("1.2") will return 1.

Example

var num = '1.2';

parseFloat(num); // 1.2
parseInt(num); // 1

We can use the repeat method. Repeat method takes a string and a number and returns a new string that is n times the original string.

var str = 'Hello';
var n = 3;

var newStr = str.repeat(n);
console.log(newStr); // HelloHelloHello

use the string built-in method .trim() method to remove whitespace from a string. But be careful, this method only removes whitespace from the beginning and end of the string.

var str = '   Hello World   ';
str.trim(); // returns "Hello World"

The first letter of the string is capitalized using the toUpperCase() method. So first we need to get the first letter of the string and then we can use the toUpperCase() method to capitalize it.

Example:

var str = 'hello world';
var firstLetter = str.charAt(0);
var restOfString = str.slice(1);
var capitalizedString = firstLetter.toUpperCase() + restOfString; //
console.log(capitalizedString); // Hello World

Explanation:

We get the first letter of the string and then we use the toUpperCase() method to capitalize it. We then concatenate the capitalized letter with the rest of the string using the slice() method. The slice() method returns a new string from the original string based on the start and end index provided.

Use the replace method. The replace method takes two arguments: the first is the string to be replaced, and the second is the string to replace it with and returns a new string. For example, if you wanted to replace the word "hello" with "goodbye", you would use the replace method like this: "hello".replace("hello", "goodbye");

var str = 'hello world';
var newStr = str.replace('hello', 'goodbye');
// newStr: "goodbye world"

There are various ways to check a word in exist on string on not. but the most efficient way is to use includes method.

Using includes method

var str = 'Hello World';
console.log(str.includes('World')); // true

Using indexOf method

var str = 'Hello World';
console.log(str.indexOf('World')); // 6

Using search method

var str = 'Hello World';
console.log(str.search('World')); // 6

Using match method

var str = 'Hello World';
console.log(str.match('World')); // ["World"]

Tagged templates are an enhanced form of literal templates. It allows parsing templates with a function. The function accepts the first parameter as an array of strings and the remaining parameters as expression values.

Example

var user1 = 'John';
var skill1 = 'JavaScript';
var experience1 = 15;

var user2 = 'Kane';
var skill2 = 'JavaScript';
var experience2 = 5;

function myInfoTag(strings, userExp, experienceExp, skillExp) {
	var str0 = strings[0]; // "Mr/Ms. "
	var str1 = strings[1]; // " is a/an "
	var str2 = strings[2]; // "in"

	var expertiseStr;
	if (experienceExp > 10) {
		expertiseStr = 'expert developer';
	} else if (skillExp > 5 && skillExp <= 10) {
		expertiseStr = 'senior developer';
	} else {
		expertiseStr = 'junior developer';
	}

	return `${str0}${userExp}${str1}${expertiseStr}${str2}${skillExp}`;
}

var output1 = myInfoTag`Mr/Ms. ${user1} is a/an ${experience1} in ${skill1}`;
var output2 = myInfoTag`Mr/Ms. ${user2} is a/an ${experience2} in ${skill2}`;

console.log(output1); // Mr/Ms. John is a/an expert developer in JavaScript
console.log(output2); // Mr/Ms. Kane is a/an junior developer in JavaScript

startWith method checks if the string starts with the given string. and endWith() method checks if the string ends with the given string.

Example:

var str = 'Hello World';
str.startsWith('Hello'); // true
str.endsWith('World'); // true

str.startsWith('World'); // false
str.endsWith('Hello'); // false

Yes, we should use regular expressions when we want to match a pattern against a string. or operate search and replace operations on a string. or validate a string against a pattern. regular expressions can be a better choice than string methods.

1. Keys on objects are strings, on maps keys are of any type#

Indeed objects are collections of key-value pairs but the key can only be a string. While the key of a Map can be of any type.

If for example, we use a number as a key in an object literal, that number is converted to a string and used as the key.

Because the key is converted to a string we get the same result when trying to get value for the 1 number value or for the '1' string value.

const obj = {
	1: 'One'
};
console.log(obj[1]); // One

const map = new Map();
map.set(1, 'One');
console.log(map.get(1)); // One
console.log(map.get('1')); // undefined

When using maps the key can be of any type so the 1 number key is different from the '1' string key

const map = new Map();
map.set(1, 'One');
console.log(map.get(1)); // One
console.log(map.get('1')); // undefined

The key is unique in both cases. There cannot be two properties in an object with the same key or two entries in a map with the same key.

2. Maps preserve the order of their keys, objects do not#

The original order of key-value pairs is preserved in maps, while in objects it is not.

const gamesObj = {
	2: 'Tzolkin',
	1: 'Citadels'
};
const keys = Object.keys(gamesObj);
console.log(keys);
//["1", "2"];
const keyValuePairs = Object.entries(gamesObj);
console.log(keyValuePairs);
//["1", "Citadels"]
//["2", "Tzolkin"]

Notice that when the object is created the key 2 comes before the key 1. When retrieving all the keys 2 comes after 1.

Below is a similar collection built with the Map constructor. This time the initial order is preserved.

const gamesMap = new Map([
	[2, 'Tzolkin'],
	[1, 'Citadels']
]);
const keys = gamesMap.keys();
console.log(keys);
//MapIterator {2, 1}
const keyValuePairs = gamesMap.entries();
console.log(keyValuePairs);
//MapIterator {2 => "Tzolkin", 1 => "Citadels"}

The Array.isArray() method determines whether the passed value is an Array object.

var arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true

var obj = {};
console.log(Array.isArray(obj)); // false

The flat method is used to flatten an array. It takes an optional parameter which is the depth of the flattening. By default it flattens the array to one level. if we pass Infinity, it flattens the array to all levels.

var arr = [1, 2, [3, 4, [5, 6]]];
console.log(arr.flat(Infinity)); // [1, 2, 3, 4, 5, 6]

The Array#includes() method is used to determine whether an array includes a particular value among its entries by returning either true or false. Let's see an example to find an element(numeric and string) within an array.

var numericArray = [1, 2, 3, 4];
console.log(numericArray.includes(3)); // true

var stringArray = ['green', 'yellow', 'blue'];
console.log(stringArray.includes('blue')); //true

There are many ways we can determine where a specific value exists in the target array. The includes method in Javascript is one of the most convenient ways to find out whether a value exists in an array or not.

Example

if (numbers.includes(3)) {
	console.log('found it');
}

use reduce method and use concat method to merge arrays.

const nestedArr1 = [
	[1, 2, 3],
	[4, 5, 6],
	[7, 8, 9, [10, 11, 12]]
];
const nestedArr2 = [
	[1, 2, 3],
	[4, 5, 6],
	[7, 8, 9, [10, 11, 12]],
	[13, 14, 15]
];

function mergeArrays(arr1, arr2) {
	return normalizeNestedArray(arr1).concat(normalizeNestedArray(arr2));
}

function normalizeNestedArray(arr) {
	return arr.reduce((acc, curr) => {
		if (Array.isArray(curr)) {
			return acc.concat(normalizeNestedArray(curr));
		} else {
			return acc.concat(curr);
		}
	}, []);
}

mergeArrays(nestedArr1, nestedArr2);

Explanation First we normalize the nested arrays by reducing the array to a single array. then we merge the arrays. and finally we normalize the merged array.

The reduce method executes a reducer function (that you provide) on each element of the array, resulting in a single output value. It takes two arguments: the reducer function and an initial value. The reducer function takes two arguments: the accumulator and the current value to be transformed. The accumulator is the result of the last call to the reducer function, or the initial value if this is the first call. The current value is the value of the current element being processed in the array. The reducer function must return the accumulator. It is useful for transforming an array to a single value.

var array = [1, 2, 3, 4, 5];
var sum = array.reduce(function (accumulator, currentValue) {
	return accumulator + currentValue;
}, 0);
console.log(sum); // 15

The some() method is used to test whether at least one element in the array passes the test implemented by the provided function. The method returns a boolean value. Let's take an example to test for any odd elements,

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var odd = (element) => element % 2 !== 0;

console.log(array.some(odd)); // true (the odd element exists)

The slice() method returns the selected elements in an array as a new array object. It selects the elements starting at the given start argument, and ends at the given optional end argument without including the last element. If you omit the second argument then it selects till the end.

let arrayIntegers = [1, 2, 3, 4, 5];
let arrayIntegers1 = arrayIntegers.slice(0, 2); // returns [1,2]
let arrayIntegers2 = arrayIntegers.slice(2, 3); // returns [3]
let arrayIntegers3 = arrayIntegers.slice(4); //returns [5]

To merge two or more arrays. It don't change the original array and return a new array.

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];

var arr3 = arr1.concat(arr2);
// arr3 = [1, 2, 3, 4, 5, 6]

Array is a collection of values and Set is a collection of unique values. Removing duplicates from an array is a O(n) operation and from a set is a O(1) operation.

Example

var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];
var set = new Set(arr);
// console.log(set); // Set {1, 2, 3, 4, 5}
// console.log(arr); // [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

// Remove an item from an array
arr.splice(0, 1);
// console.log(arr); // [2, 3, 4, 5, 1, 2, 3, 4, 5]
set.delete(1);
// console.log(set); // Set {2, 3, 4, 5}

Map is a data structure which helps in storing the data in the form of pairs. The pair consists of a unique key and a value mapped to the key. It helps prevent duplicity. Object follows the same concept as that of map i.e. using key-value pair for storing data. But there are slight differences which makes map a better performer in certain situations.

Few basic differences are as follows:

• In Object, the data-type of the key-field is restricted to integer, strings, and symbols. Whereas in Map, the key-field can be of any data-type (integer, an array, even an object!)
• In the Map, the original order of elements is preserved. This is not true in case of objects.

A map is an object that holds key-value pairs. Each key is unique on the map. The value can be any type, even another map. A map is an iterable object. It has a forEach() method, which can be used to iterate over all key-value pairs in the map. The map is a collection of key-value pairs.

• 1. The map is used to store data in key-value pairs.
• 2. Map keys are unique. and can be set in any kind of data type.
• 3. Maps keys are stored in insertion order.
• 4. The map is iterable.

var map = new Map();
map.set('1', 'a');
map.set('2', 'b');
map.set('3', 'c');

// Iterate over all key-value pairs in the map
map.forEach(function (value, key) {
	console.log(key + ' = ' + value);
});
// 1 = a
// 2 = b
// 3 = c

The Set is a data structure that stores unique values of any type. It is a collection of values. It is a collection of values that are not duplicated. And have useful built-in methods for manipulating the collection.

Example

var set = new Set();
set.add(1);
set.add(2);
set.add(2);

for (let value of set) {
	console.log(value);
}
// Output:
// 1
// 2

getOwnPropertyNames returns only enumerable properties, Object.keys returns all properties.

var obj = {
	a: 1,
	b: 2,
	c: 3
};

Object keys

Object keys returns all enumerable properties of an object. It does not return non-enumerable properties.

console.log(Object.keys(obj)); // ['a', 'c']

Object getOwnPropertyNames

getOwnPropertyNames returns all properties of an object.

console.log(Object.getOwnPropertyNames(obj)); // [ 'a', 'b', 'c' ]

There are two ways to access an object's values. One is using the dot notation and the other is using the bracket notation.

var person = {
	name: 'John',
	age: 30
};

// Dot notation
console.log(person.name);

// Bracket notation
console.log(person['name']);

Using Object.create The Object.create() method created a new object and allows you to specify an object that will be used as the new objects' prototype.

Here's an example:-

const personPrototype = {
	greet() {
		console.log('hello!');
	}
};

const carl = Object.create(personPrototype);
carl.greet(); // hello!

Here we create an object personPrototype, which has a greet() method. We then use Object.create() to create a new object with personPrototype as its prototype. Now we can call greet() on the new object, and the prototype provides its implementation.

Ans: The object getPrototypeOf() method accept an object as parameter an return all prototypes properties this object.

const myObject = {
	city: 'Paris',
	greet() {
		console.log(`Hello ${this.city}`);
	}
};

Object.getPrototypeOf(myObject);

You can use the Object.getOwnPropertyDescriptors() method which returns all own property descriptors of a given object. The example usage of this method is below,

const newObject = {
	a: 1,
	b: 2,
	c: 3
};
const descriptorsObject = Object.getOwnPropertyDescriptors(newObject);
console.log(descriptorsObject.a.writable); //true
console.log(descriptorsObject.a.configurable); //true
console.log(descriptorsObject.a.enumerable); //true
console.log(descriptorsObject.a.value); // 1

Object.create() Inherit prototypes from the targeted object and create a new object. the first parameter is for targeted object prototypes and the second parameter is for property descriptors (optional).

const extractJSON = {
	extractProperties: function () {
		let properties = [];
		for (let key in this) {
			if (this.hasOwnProperty(key)) {
				properties.push(key);
			}
		}
		return properties;
	},
	extractValues: function () {
		let values = [];
		for (let key in this) {
			if (this.hasOwnProperty(key)) {
				values.push(this[key]);
			}
		}
		return values;
	}
};
const userInfoProperties = Object.create(extractJSON);
userInfoProperties.name = 'John';
userInfoProperties.age = 30;
userInfoProperties.extractProperties(); //   ['name', 'age']
userInfoProperties.extractValues(); //   ['John', 30]

Optional chaining is the safe way to get access to nested object properties even if the intermediary property doesn't exist.

As an example let's say we have an empty user object when we access the user.name it returns undefined because we know in the user object name property doesn't exist. but if we attempt to access the firstName property in the nested name object it throws an Error. Becouse we attempt to access an undefined values property that might not exist.

At some point, we might expect the undefined instant of not getting an error. In Javascript we can use the .? syntax to check the left part for null/undefined and allowing to safely access nested properties.

const user = {};
console.log(user.name); // undefined
console.log(user.name.age); // Property 'name' does not exist on type '{}'.
console.log(user.name?.age); // undefined

Let's see:

const myDate = new Date(1995, 11, 17);

console.log(myDate.getYear()); // 95

myDate.getYear = function () {
	console.log('something else!');
};

myDate.getYear(); // 'something else!'

When we call getYear() the browser first looks in myDate for a property with that name, and only checks the prototype if myDate does not define it. So when we add getYear() to myDate, then the version in myDate is called.

Prototypes are the means of inheritance in JavaScript. The prototype of an object would also have a prototype object. This continues until we reach the top level when there is no prototype object.

This is called prototype chaining or prototype chain in JavaScript.

A constructor function is a function that is used to create objects. The new keyword is used to call the constructor function and use the constructor as a blueprint to create an object.

Note: It it convention to use capital letters for constructor function names.

function Person(name, age) {
	this.name = name;
	this.age = age;
}

var john = new Person('John', 30);
var jane = new Person('Jane', 32);
var mark = new Person('Mark', 25);

The getter and setter is a function that is used to get and set the value of a property. In Object Oriented Programming, the getter and setter is a method that is used to get and set the value of a property. The main benefit of using getter and setter is that we can implement some logic before and after getting and setting the value of a property.

Example without getter and setter:

var person = {
	firstName: 'John',
	lastName: 'Doe',
	fullName: function () {
		return this.firstName + ' ' + this.lastName;
	}
};
console.log(person.fullName()); // John Doe

Example with getter and setter:

var person = {
	firstName: 'John',
	lastName: 'Doe',
	get fullName() {
		return this.firstName + ' ' + this.lastName;
	}
};
console.log(person.fullName); // John Doe

Used to copy the values and properties from one or more source objects to a target object and then return modified target object.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

Object is a collection of key-value pairs. this useful when we want to store data in a structured way. we can access the data using key.

var person = {
	name: 'John',
	age: 30,
	isMarried: false
};

console.log(person.name); // John

Object property descriptor is an object that describes the property of an object and its behavior. the object property descriptor is an object with the following properties: value, writable, enumerable, configurable.

'use strict';
const person = {
	name: 'John',
	age: 30,
	isMarried: false
};

Object.defineProperty(person, 'name', {
	value: 'Jack',
	writable: false,
	enumerable: false,
	configurable: false
});
console.log(person.name);

Value: The value property is a data property that stores the value of the property.

console.log(person.name); // Jack

Writable: The writable property is a boolean property that determines whether the property can be changed.

person.name = 'Jill';
// => error : Uncaught TypeError: Cannot assign to read only property 'name' of object

Enumerable: The enumerable property is a boolean property that determines whether the property can be enumerated by a for-in loop.

for (const item of Object.entries(person)) {
	console.log(item);
}
// ['age', 30]
// ['isMarried', false]

Configurable: The configurable property is a boolean property that determines whether the property can be deleted.

delete person.name;
// Uncaught TypeError: Cannot delete property 'name

We can use the following syntax: #methodName to define a private method. it will be private to the class and can be accessed only from the class itself and not from outside the class.

class Person {
	#name;
	#age;
	constructor(name, age) {
		this.#name = name;
		this.#age = age;
	}
	getName() {
		return this.#name;
	}
	getAge() {
		return this.#age;
	}
}

var person = new Person('John', 30);
console.log(person.getName()); // John
console.log(person.getAge()); // 30
console.log(person.#name); //  Private field '#name' must be declared in an enclosing clas
console.log(person.#age); //  Private field '#age' must be declared in an enclosing clas

JavaScript proposal, in the standard, that provides language-level support for private properties and methods.

Privates should start with #. They are only accessible from inside the class.

class Person {
	#age = 0;
	name = '';
	constructor(name) {
		this.name = name;
	}

	getAge() {
		return this.#age;
	}

	setAge(age) {
		this.#age = age;
	}
}

const person = new Person('John');
person.setAge(30);
console.log(person.#age);
// Uncaught SyntaxError: Private field '#age' must be declared in an enclosing class (

No , it is not hoisted. It behaves like let and const keyword in javascript.

The constructor method is a special method for creating and initializing an object created within a class. If you do not specify a constructor method, a default constructor is used. The example usage of constructor would be as below,

class Employee {
	constructor() {
		this.name = 'John';
	}
}

var employeeObject = new Employee();
console.log(employeeObject.name); // John

Making coffee with a coffee machine is a good example of abstraction. You need to know how to use your coffee machine to make coffee. You need to provide water and coffee beans, switch it on and select the kind of coffee you want to get. The thing you don’t need to know is how the coffee machine is working internally to brew a fresh cup of delicious coffee. You don’t need to know the ideal temperature of the water or the amount of ground coffee you need to use. Someone else worried about that and created a coffee machine that now acts as an abstraction and hides all these details. You just interact with a simple interface that doesn’t require any knowledge about the internal implementation.

class CoffeeMachine {
	constructor(power, capacity) {
		this.power = power;
		this.capacity = capacity;
		this.waterAmount = 0;
	}
	getWaterAmount() {
		return this.waterAmount;
	}
	setWaterAmount(amount) {
		this.waterAmount = amount;
	}
	getPower() {
		return this.power;
	}
	getCapacity() {
		return this.capacity;
	}
	getTimeToBoil() {
		return (this.waterAmount * 80) / this.power;
	}
	boil() {
		this.waterAmount = 0;
	}
	makeCoffee(amount) {
		this.waterAmount += amount;
		if (this.waterAmount > this.capacity) {
			console.log('Too hot!');
			this.boil();
		}
	}
}

const coffeeMachine = new CoffeeMachine(10000, 400);
coffeeMachine.makeCoffee(200);