https://github.com/learning-zone/javascript-basics
JavaScript Basics
https://github.com/learning-zone/javascript-basics
es6-interview-questions javascript javascript-for-beginners javascript-interview-questions javascript-tutorials
Last synced: 12 months ago
JSON representation
JavaScript Basics
- Host: GitHub
- URL: https://github.com/learning-zone/javascript-basics
- Owner: learning-zone
- Created: 2019-03-06T04:59:32.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-08-07T07:40:49.000Z (almost 2 years ago)
- Last Synced: 2025-04-03T21:09:34.675Z (about 1 year ago)
- Topics: es6-interview-questions, javascript, javascript-for-beginners, javascript-interview-questions, javascript-tutorials
- Language: HTML
- Homepage: https://learning-zone.github.io/javascript-basics/
- Size: 3.41 MB
- Stars: 1,788
- Watchers: 24
- Forks: 633
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JavaScript Basics
> *Click ★ if you like the project. Your contributions are heartily ♡ welcome.*
## Related Topics
* *[HTML Basics](https://github.com/learning-zone/html-basics)*
* *[CSS Basics](https://github.com/learning-zone/css-basics)*
* *[JavaScript ES6 Basics](https://github.com/learning-zone/javascript-es6-basics)*
* *[JavaScript Unit Testing](https://github.com/learning-zone/javascript-unit-testing)*
* *[JavaScript Coding Practice](https://github.com/learning-zone/javascript-coding-practice)*
* *[JavaScript Design Patterns](https://github.com/learning-zone/javascript-design-patterns)*
* *[Data Structure in JavaScript](https://github.com/learning-zone/javascript-data-structure)*
## Table of Contents
* [Introduction](#-1-introduction)
* [Variables](#-2-variables)
* [Data types](#-3-data-types)
* [Operators](#-4-operators)
* [Numbers](#-5-numbers)
* [String](#-6-string)
* [Array](#-7-array)
* [Regular Expression](#-8-regular-expression)
* [Functions](#-9-functions)
* [Events](#-10-events)
* [Objects](#-11-objects)
* [Window and Document Object](#-12-window-and-document-object)
* [Classes](#-13-classes)
* [Error Handling](#-14-error-handling)
* [Promises](#-15-promises)
* [Collections](#-16-collections)
* [Modules](#-17-modules)
* [Miscellaneous](#-18-miscellaneous)
## # 1. Introduction
## Q 1.1. List out important features of JavaScript ES6?
**1. Template Strings:**
Template literals are string literals allowing embedded expressions.
**Benefits:**
* String interpolation
* Embedded expressions
* Multiline strings without hacks
* String formatting
* String tagging for safe HTML escaping, localization and more
```js
// String Substitution
let name = `Abhinav Sharma`;
console.log(`Hi, ${name}`); // Output: "Hi, Abhinav Sharma"
// Multiline String
let msg = `Hello \n
World`;
console.log(`${msg}`); // Output: "Hello World"
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-template-strings-dwj699?file=/src/index.js)**
**2. Spread Operator:**
Spread operator allows iterables( arrays / objects / strings ) to be expanded into single arguments/elements.
```js
function sum(x, y, z) {
return x + y + z;
}
const numbers = [10, 20, 30];
// Using Apply (ES5)
console.log(sum.apply(null, numbers)); // 60
// Using Spread Operator
console.log(sum(...numbers)); // 60
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-spread-operator-25tmcf?file=/src/index.js)**
**2.1. Copying an array:**
```js
const fruits = ["Apple", "Orange", "Banana"];
const newFruitArray = [...fruits];
console.log(newFruitArray);
```
Output:
```js
['Apple', 'Orange', 'Banana']
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-spread-operator-wy1q0l?file=/src/index.js)**
**2.2. Concatenating arrays:**
```js
const arr1 = ["A", "B", "C"];
const arr2 = ["X", "Y", "Z"];
const result = [...arr1, ...arr2];
console.log(result);
```
Output:
```js
['A', 'B', 'C', 'X', 'Y', 'Z']
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-spread-operator-m7v6gg?file=/src/index.js)**
**2.3. Spreading elements together with an individual element:**
```js
const fruits = ["Apple", "Orange", "Banana"];
const newFruits = ["Cherry", ...fruits];
console.log(newFruits);
```
Output:
```js
['Cherry', 'Apple', 'Orange', 'Banana']
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-spread-operator-16l7oh?file=/src/index.js)**
**2.4. Spreading elements on function calls:**
```js
const fruits = ["Apple", "Orange", "Banana"];
const getFruits = (f1, f2, f3) => {
console.log(`Fruits: ${f1}, ${f2} and ${f3}`);
};
getFruits(...fruits);
```
Output:
```js
Fruits: Apple, Orange and Banana
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-spread-operator-jdhoe6?file=/src/index.js)**
**2.5. Spread syntax for object literals:**
```js
const obj1 = { id: 101, name: 'Rajiv Sandal' }
const obj2 = { age: 35, country: 'INDIA' }
const employee = { ...obj1, ...obj2 }
console.log(employee);
```
Output:
```js
{
"id": 101,
"name": "Rajiv Sandal",
"age": 35,
"country": "INDIA"
}
```
**3. Sets:**
Sets are a new object type with ES6 (ES2015) that allow to create collections of unique values. The values in a set can be either simple primitives like strings or integers, but more complex object types like object literals or arrays can also be part of a set.
```js
const numbers = new Set([10, 20, 20, 30, 40, 50]);
console.log(numbers); Set(5) { 10, 20, 30, 40, 50 }
console.log(typeof numbers); // Object
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-sets-chwvp0)**
**4. Default Parametrs:**
```js
function add(x = 10, y = 20) {
console.log(x + y);
}
add(10, 30); // Output: 10 + 30 = 40
add(15); // Output: 15 + 20 = 35
add(); // Output: 10 + 20 = 30
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-default-parametrs-tjw9uk?file=/src/index.js)**
**5. repeat():**
The `repeat()` method constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.
```js
const msg = "Hello World \n";
console.log(`${msg.repeat(3)}`);
```
Output:
```js
Hello World
Hello World
Hello World
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-repeat-d3ko3z?file=/src/index.js)**
**6. Arrow Function (=>):**
```js
const add = (x, y) => x + y;
console.log(add(10, 20)); // 30
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-arrow-function-ejlrmf?file=/src/index.js)**
**7. Arrow function with `this`**
```js
/**
* Using Arrow function
*/
const person = {
name: "Diksha",
actions: ["bike", "hike", "ski"],
printActions() {
this.actions.forEach((action) => {
console.log(this.name + " likes to " + action);
});
},
};
person.printActions();
```
Output:
```js
Diksha likes to bike
Diksha likes to hike
Diksha likes to ski
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-arrow-function-kh1v84?file=/src/index.js)**
**8. Destructing Assignment:**
```js
// Destructing Assignment
const { title, price, description } = {
title: "iPhone",
price: 999,
description: "The iPhone is a smartphone developed by Apple"
};
console.log(title); // iPhone
console.log(price); // 999
console.log(description); // The iPhone is a smartphone developed by Apple
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-destructing-assignment-0c0fzl?file=/src/index.js)**
**9. Generators:**
A generator is a function that can stop midway and then continue from where it stopped. In short, a generator appears to be a function but it behaves like an `iterator`.
```js
function* generator(num) {
yield num + 10;
yield num + 20;
yield num + 30;
}
const gen = generator(10);
console.log(gen.next().value); // 20
console.log(gen.next().value); // 30
console.log(gen.next().value); // 40
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-generators-pboss2?file=/src/index.js)**
**10. Symbols:**
They are tokens that serve as unique IDs. We create symbols via the factory function Symbol(). Symbols primary use case is for making private object properties, which can be only of type String or Symbol (Numbers are automatically converted to Strings).
```js
const symbol1 = Symbol();
const symbol2 = Symbol(42);
const symbol3 = Symbol("Hi");
console.log(typeof symbol1); // symbol
console.log(symbol3.toString()); // Symbol(Hi)
console.log(Symbol("Hi") === Symbol("Hi")); // false
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-symbols-5oedjv?file=/src/index.js)**
**11. Iterator:**
The iterable is a interface that specifies that an object can be accessible if it implements a method who is key is `[symbol.iterator]`.
```js
const title = "ES6";
const iterateIt = title[Symbol.iterator]();
console.log(iterateIt.next().value); //output: E
console.log(iterateIt.next().value); //output: S
console.log(iterateIt.next().value); //output: 6
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-iterator-ceqbrw?file=/src/index.js)**
## # 2. VARIABLES
## Q 2.1. What are global variables?
Global variables are declared outside of a function or declared with a window object for accessibility throughout the program (unless shadowed by locals). If you declare a variable without using var, even if it\'s inside a function, it will still be seen as global.
The `var` **statement** declares a function-scoped or globally-scoped variable, optionally initializing it to a value.
**Example:**
```js
var x = 10;
if (x === 10) {
var x = 20;
console.log(x); // expected output: 20
}
console.log(x); // expected output: 20
```
**Example:** Declaring global variable within function
```js
window.value = 90;
// Declaring global variable by window object
function setValue() {
window.value = 100;
}
// Accessing global variable from other function
function getValue() {
setValue();
return window.value;
}
console.log(getValue()); // 100
```
**Using Undeclared Variables:**
* In strict mode, if you attempt to use an undeclared variable, you\'ll get a reference error when you run your code.
* Outside of strict mode, however, if you assign a value to a name that has not been declared with `let`, `const`, or `var`, you\'ll end up creating a new global variable. It will be global no matter how deeply nested within functions and blocks your code is, which is almost certainly not what you want, is bug-prone, and is one of the best reasons for using strict mode!
* Global variables created in this accidental way are like global variables declared with `var`: they define properties of the global object. But unlike the properties defined by proper var declarations, these properties can be deleted with the delete operator.
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-global-variables-b4isqk?file=/src/index.js)**
## Q 2.2. What are template literals in es6?
Template literals help make it simple to do string interpolation, or to include variables in a string.
```js
const person = { name: 'Tyler', age: 28 };
console.log(`Hi, my name is ${person.name} and I am ${person.age} years old!`);
// 'Hi, my name is Tyler and I am 28 years old!'
```
Template literals, however, preserve whatever spacing you add to them. For example, to create that same multi-line output that we created above, you can simply do:
```js
console.log(`This is line one.
This is line two.`);
// This is line one.
// This is line two.
```
Another use case of template literals would be to use as a substitute for templating libraries for simple variable interpolations:
```js
const person = { name: 'Tyler', age: 28 };
document.body.innerHTML = `
Name: ${person.name}
Name: ${person.age}
`
```
## Q 2.3. What are the differences between variables created using `let`, `var` or `const`?
Variables declared using the `var` keyword are scoped to the function in which they are created, or if created outside of any function, to the global object. `let` and `const` are _block scoped_, meaning they are only accessible within the nearest set of curly braces (function, if-else block, or for-loop).
```js
/**
* All variables are accessible within functions.
*/
function variableScope() {
var x = 10;
let y = 20;
const z = 30;
console.log(x); // 10
console.log(y); // 20
console.log(z); // 30
}
console.log(x); // ReferenceError: x is not defined
console.log(y); // ReferenceError: y is not defined
console.log(z); // ReferenceError: z is not defined
variableScope();
```
```js
/**
* var declared variables are accessible anywhere in the function scope.
*/
if (true) {
var a = 10;
let b = 20;
const c = 30;
}
console.log(a); // 10
console.log(b); // ReferenceError: b is not defined
console.log(c); // ReferenceError: c is not defined
```
`var` allows variables to be hoisted, meaning they can be referenced in code before they are declared. `let` and `const` will not allow this, instead throwing an error.
```js
console.log(a); // undefined
var a = 'foo';
console.log(b); // ReferenceError: can't access lexical declaration 'b' before initialization
let b = 'baz';
console.log(c); // ReferenceError: can't access lexical declaration 'c' before initialization
const c = 'bar';
```
Redeclaring a variable with `var` will not throw an error, but 'let' and 'const' will.
```js
var a = 'foo';
var a = 'bar';
console.log(a); // "bar"
let b = 'baz';
let b = 'qux'; // Uncaught SyntaxError: Identifier 'b' has already been declared
```
`let` and `const` differ in that `let` allows reassigning the variable's value while `const` does not.
```js
// This is ok.
let a = 'foo';
a = 'bar';
console.log(a); // bar
// This causes an exception.
const b = 'baz';
b = 'qux';
console.log(b) // TypeError: Assignment to constant variable.
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-variables-declaration-fmrkjz?file=/src/index.js)**
## Q 2.4. What is Hoisting in JavaScript?
JavaScript **Hoisting** refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.
Hoisting allows functions to be safely used in code before they are declared.
**Example 01:** Function Hoisting
One of the advantages of hoisting is that it lets you use a function before you declare it in your code.
```js
getName("Sadhika Sandal");
function getName(name) {
console.log("Hello " + name);
}
```
Output:
```js
Hello Sadhika Sandal
```
**Example 02:** Variable Hoisting
```js
console.log(message); // output: undefined
var message = "The variable Has been hoisted";
```
The above code looks like as below to the interpreter,
```js
var message;
console.log(message);
message = "The variable Has been hoisted";
```
**Example 03:** `let` and `const` hoisting
All declarations (function, var, let, const and class) are hoisted in JavaScript, while the `var` declarations are initialized with `undefined`, but `let` and `const` declarations remain uninitialized.
```js
console.log(x);
let x = 10;
// Output: ReferenceError: x is not defined
```
They will only get initialized when their lexical binding (assignment) is evaluated during runtime by the JavaScript engine. This means we can\'t access the variable before the engine evaluates its value at the place it was declared in the source code. This is what we call **Temporal Dead Zone**, A time span between variable creation and its initialization where they can\'t be accessed.
*Note: JavaScript only hoists declarations, not initialisation*
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-hoisting-l745nc?file=/src/index.js)**
## Q 2.5. In which case the function definition is not hoisted in JavaScript?
Let us take the following **function expression**
```js
var foo = function foo() {
return 12;
}
```
In JavaScript `var`-declared variables and functions are `hoisted`. Let us take function `hoisting` first. Basically, the JavaScript interpreter looks ahead to find all the variable declaration and hoists them to the top of the function where It is declared. For example:
```js
foo(); // Here foo is still undefined
var foo = function foo() {
return 12;
};
```
The code above behind the scene look something like this:
```js
var foo = undefined;
foo(); // Here foo is undefined
foo = function foo() {
// Some code stuff
}
```
```js
var foo = undefined;
foo = function foo() {
// Some code stuff
}
foo(); // Now foo is defined here
```
## Q 2.6. What is the Temporal Dead Zone in ES6?
In ES6, **let** bindings are not subject to "variable hoisting", which means that **let** declarations do not move to the top of the current execution context.
Referencing the variable in the block before the initialization results in a `ReferenceError` (contrary to a variable declared with var, which will just have the **undefined** value). The variable is in a "temporal dead zone" from the start of the block until the initialization is processed.
```js
console.log(aVar); // undefined
console.log(aLet); // causes ReferenceError: aLet is not defined
var aVar = 1;
let aLet = 2;
```
## Q 2.7. What is the purpose of double exclamation?
The double exclamation or negation(!!) ensures the resulting type is a boolean. If it was falsey (e.g. `0`, `null`, `undefined`, etc.), it will be `false`, otherwise, `true`.
For example, you can test IE version using this expression as below,
```js
let isIE11 = false;
isIE11 = !!navigator.userAgent.match(/Trident.*rv[ :]*11\./);
console.log(isIE11); // returns true or false
```
If you do not use this expression then it returns the original value.
```js
console.log(navigator.userAgent.match(/Trident.*rv[ :]*11\./)); // returns either an Array or null
```
*Note: The expression !! is not an operator, but it is just twice of ! operator*.
## Q 2.8. In JavaScript, what is the difference between `var x = 1` and `x = 1`?
`var x = 1`:
* Allowed in 'strict mode'.
* The var statement declares a function-scoped or globally-scoped variable, optionally initializing it to a value.
* Variables declared using var inside a { } block can be accessed from outside the block.
* Variables defined using var inside a function are not accessible (visible) from outside the function.
* Duplicate variable declarations using var will not trigger an error, even in strict mode, and the variable will not lose its value unless another assignment is performed.
```js
var x = 1;
if (x === 1) {
var x = 2;
console.log(x); // expected output: 2
}
console.log(x); // expected output: 2
```
```js
var x = 5; // global
function someThing(y) {
var x = 3; // local
var z = x + y;
console.log(z);
}
someThing(4); // 7
console.log(x); // 5
```
`x = 1`:
* Not allowed in 'strict mode'.
* Undeclared Variables like: x = 1 is accessible in: (Block scope - Function scope - Global scope)
* Outside of strict mode, however, if you assign a value to a name that has not been declared with let, const, or var, you\'ll end up creating a new global variable. It will be global no matter how deeply nested within functions and blocks your code is, which is almost certainly not what you want, is bug-prone, and is one of the best reasons for using strict mode!
* Global variables created in this accidental way are like global variables declared with var: they define properties of the global object.
* Unlike the properties defined by proper var declarations, these properties can be deleted with the delete operator.
* Not recommended.
```js
var x = 5; // global
function someThing(y) {
x = 1; // still global!
var z = x + y;
console.log(z);
}
someThing(4) // 5
console.log(x) // 1
```
**Example:**
```js
{
console.log(x + y); // NaN
var x = 1;
var y = 2;
}
```
```js
{
console.log(x + y); // Uncaught ReferenceError: x is not defined
x = 1;
y = 2;
}
```
| | var x = 1 | x = 1 |
|:---: | :---: | :---:|
|Strict mode | ✔ | ❌ |
|Block scope | ❌ | ✔ |
|Function scope | ✔ | ✔ |
|Global scope | ✔ | ✔ |
|Hoisting | ✔ | ❌ |
|Reassigning | ✔ | ✔ |
## Q 2.9. How do you assign default values to variables?
You can use the logical or operator `||` in an assignment expression to provide a default value.
**Syntax:**
```js
var a = b || c;
```
As per the above expression, variable 'a 'will get the value of 'c' only if 'b' is falsy (if is null, false, undefined, 0, empty string, or NaN), otherwise 'a' will get the value of 'b'.
## Q 2.10. What is the precedence order between local and global variables?
A local variable takes precedence over a global variable with the same name.
```js
var msg = "Good morning";
function greeting() {
msg = "Good Evening";
console.log(msg);
}
greeting();
```
Output:
```js
Good Evening
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-precedence-n1ve75?file=/src/index.js)**
## Q 2.11. What is variable shadowing in javascript?
Variable shadowing occurs when a variable declared within a certain scope (decision block, method, or inner class) has the same name as a variable declared in an outer scope. This outer variable is said to be shadowed.
If there is a variable in the global scope, and you'd like to create a variable with the same name in a function. The variable in the inner scope will temporarily shadow the variable in the outer scope.
**Example:**
```js
/**
* Variable Shadowing
*/
var val = 10;
function Hoist(val) {
console.log(val);
}
Hoist(20); // 20
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-variable-shadowing-dvibcw?file=/src/index.js)**
## Q 2.12. Explain `var self = this` in JavaScript?
The **self** is being used to maintain a reference to the original this even as the context is changing. It is a technique often used in event handlers ( especially in closures ).
`this` is a JavaScript keyword which refers to the current context. Unlike other programming languages, JavaScript does not have block scoping ( in C open/close {} curly braces refers to a block ). JavaScript has two scopes namely, global and local scope.
**Example:**
```js
/**
* this Context
*/
const context = {
prop: 10,
getCurrentContext: function () {
return this.prop;
}
};
console.log(context.getCurrentContext()); // 10
```
*Note: 'self' should not be used this way anymore, since modern browsers provide a global variable self pointing to the global object of either a normal window or a WebWorker.*
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-self-this-k1w0e8?file=/src/index.js)**
## Q 2.13. How do you swap variables using destructuring assignment?
```js
var x = 10, y = 20;
[x, y] = [y, x];
console.log(x); // 20
console.log(y); // 10
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-destructuring-sv99cd?file=/src/index.js)**
## Q 2.14. What is scope chain in javascript?
The scope chain in JavaScript refers to the chain of nested scopes that a JavaScript program uses to look up variable and function references. When a variable or function is referenced in JavaScript code, the interpreter first looks for it in the current scope. If it's not found there, it moves up the scope chain to the next outer scope and looks for it there. It continues doing this until the variable or function is found or until it reaches the global scope.
**Example:**:
```js
let globalVar = "I'm a global variable";
function outer() {
let outerVar = "I'm an outer variable";
function inner() {
let innerVar = "I'm an inner variable";
console.log(innerVar); // "I'm an inner variable"
console.log(outerVar); // "I'm an outer variable"
console.log(globalVar); // "I'm a global variable"
}
inner();
}
outer();
```
## # 3. DATA TYPES
## Q 3.1. What are data types in javascript?
There are eight basic data types in JavaScript.
|Data Types | Description |Example |
|-------------|--------------------------------------|----------------------------|
|String |Represents textual data |let str = 'Hi', let str2 = "Hello", let str3 = \`Hello World\`|
|Number |An integer or a floating-point number |let num = 3, let num2 = 3.234, let num3 = 3e-2 |
|BigInt |An integer with arbitrary precision |let num = 900719925124740999n, let num = 1n |
|Boolean |Any of two values: true or false |let flag = true |
|undefined |A data type whose variable is not initialized |let a; |
|null |Denotes a null value |let a = null; |
|Symbol |Data type whose instances are unique and immutable|let value = Symbol('hello');|
|Object |key-value pairs of collection of data |let student = { }; |
**String:**
`String` is used to store text. In JavaScript, strings are surrounded by quotes:
* Single quotes: 'Hello'
* Double quotes: "Hello"
* Backticks: \`Hello\`
**Example:**:
```js
// Strings
const firstName = "Mukul";
const lastName = "Mittal";
const result = `Name: ${firstName} ${lastName}`;
console.log(result); // Name: Mukul Mittal
```
**Number:**
Number represents integer and floating numbers (decimals and exponentials). A number type can also be `+Infinity`, `-Infinity`, and `NaN` (not a number).
```js
const number1 = 3;
const number2 = 3.433;
const number3 = 3e5; // 3 * 10^5
const number4 = 3 / 0;
console.log(number4); // Infinity
const number5 = -3 / 0;
console.log(number5); // -Infinity
// strings can't be divided by numbers
const number6 = "abc" / 3;
console.log(number6); // NaN
```
**BigInt:**
In JavaScript, Number type can only represent numbers less than (253 - 1) and more than -(253 - 1). However, if you need to use a larger number than that, you can use the BigInt data type.
A BigInt number is created by appending `n` to the end of an integer.
```js
// BigInt value
const num1 = 100000000000000000n;
const num2 = 1000000000000000000n;
const num3 = 10;
// Adding two big integers
const result1 = num1 + num2;
console.log(result1); // "1100000000000000000n"
// Error! BitInt and number cannot be added
const result2 = num1 + num2 + num3;
console.log(result2); // Uncaught TypeError: Cannot mix BigInt and other types
```
**Boolean:**
This data type represents logical entities. Boolean represents one of two values: `true` or `false`.
```js
const dataChecked = true;
const valueCounted = false;
```
**undefined:**
The undefined data type represents value that is not assigned. If a variable is declared but the value is not assigned, then the value of that variable will be undefined.
```js
let name;
console.log(name); // undefined
let name = undefined;
console.log(name); // undefined
```
**null:**
In JavaScript, `null` is a special value that represents empty or unknown value.
```js
const number = null;
```
**Symbol:**
A value having the data type Symbol can be referred to as a symbol value. Symbol is an immutable primitive value that is unique.
```js
// Two symbols with the same description
const value1 = Symbol('hello');
const value2 = Symbol('hello');
let result = (value1 === value2) ? true : false; // false;
// Note: Though value1 and value2 both contain 'hello', they are different as they are of the Symbol type.
```
**Object:**
An object is a complex data type that allows us to store collections of data.
```js
const employee = {
firstName: 'John',
lastName: 'K',
email: 'john.k@gmail.com'
};
```
## Q 3.2. What is `undefined` property?
The undefined property indicates that a variable has not been assigned a value, or not declared at all. The type of undefined value is undefined too.
```js
var user; // Value is undefined, type is undefined
console.log(typeof(user)) //undefined
```
Any variable can be emptied by setting the value to undefined.
```js
user = undefined
```
## Q 3.3. What is difference between `null` vs `undefined`?
**Null:**
`Null` means an empty or non-existent value. Null is assigned, and explicitly means nothing.
```js
var test = null;
console.log(test); // null
```
`null` is also an object. Interestingly, this was actually an error in the original JavaScript implementation:
```js
console.log(typeof test); // object
```
**Undefined:**
Undefined means a variable has been declared, but the value of that variable has not yet been defined. For example:
```js
var test2;
console.log(test2); // undefined
```
Unlike null, undefined is of the type undefined:
```js
console.log(typeof test2); // undefined
```
**Difference:**
| Null | Undefined |
|---- | -----------|
| It is an assignment value which indicates that variable points to no object. | It is not an assignment value where a variable has been declared but has not yet been assigned a value. |
| Type of null is object | Type of undefined is undefined |
| The null value is a primitive value that represents the null, empty, or non-existent reference. | The undefined value is a primitive value used when a variable has not been assigned a value.|
| Indicates the absence of a value for a variable | Indicates absence of variable itself |
| Converted to zero (0) while performing primitive operations | Converted to NaN while performing primitive operations |
## Q 3.4. What is Coercion in JavaScript?
Type coercion is the automatic or implicit conversion of values from one data type to another (such as strings to numbers). Type conversion is similar to type coercion because they both convert values from one data type to another with one key difference — type coercion is implicit whereas type conversion can be either implicit or explicit.
```js
const value1 = '10';
const value2 = 20;
let sum = value1 + value2;
console.log(sum);
```
In the above example, JavaScript has coerced the 10 from a number into a string and then concatenated the two values together, resulting in a string of 1020. JavaScript had a choice between a string or a number and decided to use a string.
```js
// Example of explicit coercion
const value1 = '10';
const value2 = 20;
let sum = Number(value1) + value2;
console.log(sum);
```
## # 4. OPERATORS
## Q 4.1. What are various operators supported by javascript?
An operator is capable of manipulating(mathematical and logical computations) a certain value or operand. There are various operators supported by JavaScript as below,
**Arithmetic Operators:**
Arithmetic operators are used to perform mathematical operations between numeric operands.
|Operators|Description | Example ( say `let x = 10, y = 20;`) |
|--------|------------------------|-------------|
| + |Adds two numeric operands.| x + y |
| - |Subtract right operand from left operand| y - x|
| * |Multiply two numeric operands.| x * y|
| / |Divide left operand by right operand.| y / x|
| % |Modulus operator. Returns remainder of two operands.| x % 2|
| ++ |Increment operator. Increase operand value by one.| x++|
| -- |Decrement operator. Decrease value by one.| x--|
**Comparison Operators:**
JavaScript provides comparison operators that compare two operands and return a boolean value `true` or `false`.
|Operators| Description|
|---------|-------------|
|== |Compares the equality of two operands without considering type.|
|=== |Compares equality of two operands with type.|
|!= |Compares inequality of two operands.|
|> |Returns a boolean value true if the left-side value is greater than the right-side value; otherwise, returns false.|
|< |Returns a boolean value true if the left-side value is less than the right-side value; otherwise, returns false.|
|>= |Returns a boolean value true if the left-side value is greater than or equal to the right-side value; otherwise, returns false.|
|<= |Returns a boolean value true if the left-side value is less than or equal to the right-side value; otherwise, returns false.|
**Logical Operators:**
The logical operators are used to combine two or more conditions.
**1. &&** - is known as AND operator. It checks whether two operands are non-zero or not (0, false, undefined, null or "" are considered as zero). It returns 1 if they are non-zero; otherwise, returns 0
**2. ||** - is known as OR operator. It checks whether any one of the two operands is non-zero or not (0, false, undefined, null or "" is considered as zero). It returns 1 if any one of of them is non-zero; otherwise, returns 0.
**3. !** - is known as NOT operator. It reverses the boolean result of the operand (or condition). !false returns true, and !true returns false.
**Assignment Operators:**
The assignment operators to assign values to variables with less key strokes.
|Operators | Description |
|----|--------------------|
|= |Assigns right operand value to the left operand.|
|+= |Sums up left and right operand values and assigns the result to the left operand.|
|-= |Subtract right operand value from the left operand value and assigns the result to the left operand.|
|*= |Multiply left and right operand values and assigns the result to the left operand.|
|/= |Divide left operand value by right operand value and assign the result to the left operand.|
|%= |Get the modulus of left operand divide by right operand and assign resulted modulus to the left operand.|
## Q 4.2. What are the bitwise operators available in javascript?
Below are the list of bit-wise logical operators used in JavaScript
|Operator | Usage | Description |
|------------|---------|-----------------------|
|Bitwise AND | a & b |Returns a one in each bit position for which the corresponding bits of both operands are ones.|
|Bitwise OR |a | b |Returns a one in each bit position for which the corresponding bits of either or both operands are ones.|
|Bitwise XOR | a ^ b |Returns a one in each bit position for which the corresponding bits of either but not both operands are ones.|
|Bitwise NOT | ~ a |Inverts the bits of its operand.|
|Left shift |a << b |Shifts a in binary representation b (< 32) bits to the left, shifting in zeroes from the right.|
|Sign-propagating right shift| a >> b |Shifts a in binary representation b (< 32) bits to the right, discarding bits shifted off.|
|Zero-fill right shift | a >>> b | Shifts a in binary representation b (< 32) bits to the right, discarding bits shifted off, and shifting in zeroes from the left.|
**Examples:**
|Operation| Result |Same as |Result |
|---------|-----------|-------------|----------|
|5 & 1 | 1 |0101 & 0001 |0001 |
|`5 | 1` | 5 |0101 | 0001 |0101 |
|`~ 5` |-6 |~0101 |1010 |
|`5 << 1` | 10 |0101 << 1 |1010 |
|`5 ^ 1` | 4 |0101 ^ 0001 |0100 |
|`5 >> 1` | 2 |0101 >> 1 |0010 |
|5 >>> 1 | 2 |0101 >>> 1 |0010 |
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-bitwise-operators-nnz00d?file=/src/index.js)**
## Q 4.3. What is the difference between == and === operators?
JavaScript provides both strict(===, !==) and type-converting(==, !=) equality comparison. The strict operators takes type of variable in consideration, while non-strict operators make type correction/conversion based upon values of variables. The strict operators follow the below conditions for different types,
1. Two strings are strictly equal when they have the same sequence of characters, same length, and same characters in corresponding positions.
2. Two numbers are strictly equal when they are numerically equal. i.e, Having the same number value.
There are two special cases in this,
1. NaN is not equal to anything, including NaN.
2. Positive and negative zeros are equal to one another.
3. Two Boolean operands are strictly equal if both are true or both are false.
4. Two objects are strictly equal if they refer to the same Object.
5. Null and Undefined types are not equal with ===, but equal with ==. i.e,
null===undefined --> false but null==undefined --> true
**Example:**
```js
0 == false // true
0 === false // false
1 == "1" // true
1 === "1" // false
null == undefined // true
null === undefined // false
"0" == false // true
"0" === false // false
[] === [] // false, refer different objects in memory
{} === {} // false, refer different objects in memory
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-comparison-0y16ii?file=/src/index.js)**
## Q 4.4. What is typeof operator?
In JavaScript, the typeof operator returns the data type of its operand in the form of a string. The operand can be any object, function, or variable.
**Example:**
```js
console.log(typeof undeclaredVariable); // "undefined"
let a;
console.log(typeof a); // "undefined"
const b = "Hello World";
console.log(typeof b); // "string"
const c = 42;
console.log(typeof c); // "number"
const d = 3.1415;
console.log(typeof d); // "number"
const e = true;
console.log(typeof e); // "boolean"
const f = null;
console.log(typeof f); // "object"
const g = undefined;
console.log(typeof g); // "undefined"
const h = { b: "c" };
console.log(typeof h); // "object"
const i = function () {
return 10;
};
console.log(typeof i); // "function"
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-typeof-jesw53?file=/src/index.js)**
## Q 4.5. What is an Unary operator?
The unary(+) operator is used to convert a variable to a number. If the variable cannot be converted, it will still become a number but with the value NaN.
**Example:**
```js
var x = "100";
var y = +x;
console.log(typeof x, typeof y); // string, number
var a = "Hello";
var b = +a;
console.log(typeof a, typeof b, b); // string, number, NaN
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-unary-operator-ld2luh?file=/src/index.js)**
## Q 4.6. What is the purpose of delete operator?
The delete keyword is used to delete the property as well as its value.
```js
var user = {name: "Sadhika Chaudhuri", age: 24};
delete user.age;
console.log(user); // {name: "Sadhika Chaudhuri"}
```
## Q 4.7. What is a conditional operator in javascript?
The conditional (ternary) operator is the only JavaScript operator that takes three operands which acts as a shortcut for if statement.
**Syntax:**
```js
? : ;
```
**Example:**
```js
const isAuthenticated = false;
console.log(isAuthenticated ? 'Hello, welcome' : 'Sorry, you are not authenticated');
```
## Q 4.8. Can you apply chaining on conditional operator?
Yes, you can apply chaining on conditional operator similar to if … else if … else if … else chain.
**Example:**
```js
function getValue(someParam) {
return condition1 ? value1
: condition2 ? value2
: condition3 ? value3
: value4;
}
// The above conditional operator is equivalent to:
function getValue(someParam) {
if (condition1) {
return value1;
} else if (condition2) {
return value2;
} else if (condition3) {
return value3;
} else {
return value4;
}
}
```
## Q 4.9. What is the difference between `typeof` and `instanceof` operator?
The `typeof` operator checks if a value has type of primitive type which can be one of boolean, function, object, number, string, undefined and symbol (ES6).
**Example:**
```js
const x = "Hello World";
const y = new String("Hello World");
typeof x; // returns 'string'
typeof y; // returns 'object'
```
The `instanceof` is a binary operator, accepting an object and a constructor. It returns a boolean indicating whether or not the object has the given constructor in its prototype chain.
```js
const a = "Hello World";
const b = new String("Hello World");
a instanceof String; // returns false
b instanceof String; // returns true
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-typeof-operator-9uejl1?file=/src/index.js)**
## Q 4.10. What is the output of below spread operator array?
```js
[...'Hello']
```
**Output**: ['H', 'e', 'l', 'l', 'o']
**Explanation**: The string is an iterable type and the spread operator with in an array maps every character of an iterable to one element. Hence, each character of a string becomes an element within an Array.
## # 5. NUMBERS
## Q 5.1. How do you generate random integers?
The `Math.random()` function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1). For example, if you want generate random integers between 1 to 100, the multiplication factor should be 100,
```js
// Example 01:
Math.random(); // returns a random integer between 0 to 1
// Example 02:
Math.floor(Math.random() * 100) + 1; // returns a random integer from 1 to 100
// Example 03:
function getRandomNumber(max) {
return Math.floor(Math.random() * max) + 1;
}
console.log(getRandomNumber(10)); // returns a random integer from 1 to 10
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-random-number-slllvd?file=/src/index.js)**
## Q 5.2. What is isNaN?
The `isNaN()` function determines whether a value is NaN ( Not a Number ) or not. This function returns `true` if the value equates to NaN. The `isNaN()` method converts the value to a number before testing it.
```js
isNaN('Hello') // true
isNaN('100') // false
typeof NaN // Number
Number.isNaN('Hello'); // false
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-isnan-6w1huz?file=/src/index.js)**
## Q 5.3. What is the purpose of isFinite function?
The global `isFinite()` function determines whether the passed value is a finite number. It returns `false` if the value is `+infinity`, `-infinity`, or `NaN` (Not-a-Number), otherwise it returns true.
```js
isFinite(Infinity); // false
isFinite(NaN); // false
isFinite(-Infinity); // false
isFinite(100); // true
isFinite(1/0); // false
Number.isFinite(0 / 0); // false
Number.isFinite(null); // false
Number.isFinite("123") // false
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-isfinite-5sl988?file=/src/index.js)**
## Q 5.4. Explain NEGATIVE_INFINITY in JavaScript?
The `Number.NEGATIVE_INFINITY` property represents the negative Infinity value.
**Syntax:**
```js
Number.NEGATIVE_INFINITY
```
* Negative infinity is a number in javascript, which is derived by 'dividing negative number by zero'.
* A number object needs not to be created to access this static property.
* The value of negative infinity is the same as the negative value of the infinity property of the global object.
```js
/**
* NEGATIVE_INFINITY
*/
console.log(-10/0); // -Infinity
console.log(Number.NEGATIVE_INFINITY); // -Infinity
console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity
console.log(-2 * Number.MAX_VALUE); // -Infinity
console.log("Math.pow(10, 1000): " + Math.pow(10, 1000)); // Infinity
console.log("Math.log(0): " + Math.log(0)); // -Infinity
console.log(Number.NEGATIVE_INFINITY === -2 * Number.MAX_VALUE); // true
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-negative-infinity-1gmh0r?file=/src/index.js)**
## # 6. STRING
## Q 6.1. What is the difference between slice and splice?
**1. slice():**
The `slice()` method returns a new array with a copied slice from the original array. The first optional argument is the beginning index and the second optional argument is the ending index (non-inclusive).
**Example:**
```js
let languages = [ "JavaScript", "Python", "Java", "PHP" ];
languages.slice(1,3); // ["Python", "Java"]
languages.slice(2); // (from index 2 until the end of the array).
// ["Java", "PHP"]
console.log(languages); // the original array is not mutated.
// [ "JavaScript", "Python", "Java", "PHP" ]
```
**2. splice():**
The `splice()` method changes the content of the array in place and can be used to add or remove items from the array.
When only one argument is provided, all the items after the provided starting index are removed from the array.
**Example:**
```js
let numbers = [10, 20, 30];
numbers.splice(2, 1, 40, 50); // returns removed array:[30]
console.log(numbers); // Original array is mutated.
// returns: [10, 20, 40, 50]
```
**Difference:**
| Slice | Splice |
|---- | ---------|
| Doesn't modify the original array(immutable) | Modifies the original array(mutable) |
| Returns the subset of original array | Returns the deleted elements as array |
| Used to pick the elements from array | Used to insert or delete elements to/from array|
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-slice-vs-splice-xm7c54?file=/src/index.js)**
## Q 6.2. How do you check whether a string contains a substring?
There are 3 fastest ways to check whether a string contains a substring or not,
**1. Using RegEx:**
The regular expression `test()` method checks if a match exists in a string. This method returns `true` if it finds a match, otherwise, it returns `false`.
```js
let str = "JavaScript, Node.js, Express.js, React.js, MongoDB";
let exp1 = /MongoDB/g;
let exp2 = /Ajax/;
exp1.test(str); // true
exp2.test(str); // false
```
**2. Using indexOf:**
The `indexOf()` method is case-sensitive and accepts two parameters. The first parameter is the substring to search for, and the second optional parameter is the index to start the search from (default index is 0).
```js
let str = "JavaScript, Node.js, Express.js, React.js, MongoDB";
str.indexOf('MongoDB') !== -1 // true
str.indexOf('PHP') !== -1 // false
str.indexOf('Node', 5) !== -1 // true
```
**3. Using includes:**
The `includes()` is also case-sensitive and accepts an optional second parameter, an integer which indicates the position where to start searching for.
```js
let str = "JavaScript, Node.js, Express.js, React.js, MongoDB";
str.includes('MongoDB') // true
str.includes('PHP') // false
str.includes('Node', 5) //true
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-substring-su64zr?file=/src/index.js)**
## Q 6.3. How do you trim a string in javascript?
The `trim()` method removes whitespace from both sides of a string. JavaScript provides 3 simple functions on how to trim strings.
**1. string.trim():**
The `string.trim()` removes sequences of whitespaces and line terminators from both the start and the end of the string.
```js
const name = " Karan Talwar ";
console.log(name.trim()); // => 'Karan Talwar'
const phoneNumber = "\t 80-555-123\n ";
console.log(phoneNumber.trim()); // => '80-555-123'
```
**2. string.trimStart():**
The `string.trimStart()` removes sequences of whitespaces and line terminators only from the start of the string.
```js
const name = " Karan Talwar ";
console.log(name.trimStart()); // => "Karan Talwar "
const phoneNumber = "\t 80-555-123\n ";
console.log(phoneNumber.trimStart()); // => "80-555-123 "
```
**3. string.trimEnd():**
The `string.trimEnd()` removes sequences of whitespaces and line terminators only from the end of the string.
```js
const name = " Karan Talwar ";
console.log(name.trimEnd()); // => " Karan Talwar"
const phoneNumber = "\t 80-555-123\n ";
console.log(phoneNumber.trimEnd()); // => " 80-555-123"
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-trim-4mo5bi?file=/src/index.js)**
## Q 6.4. What is eval function in javascript?
The `eval()` function evaluates JavaScript code represented as a string. The string can be a JavaScript expression, variable, statement, or sequence of statements.
```js
console.log(eval('10 + 20')); // 30
let x = 10;
let y = 20;
let z = '50';
eval('x + y + 1'); // returns 31
eval(z); // returns 50
```
If the argument of `eval()` is not a string, `eval()` returns the argument unchanged. In the following example, the String constructor is specified and eval() returns a String object rather than evaluating the string.
```js
eval(new String('10 + 20')); // returns a String object containing "10 + 20"
eval('10 + 20'); // returns 30
// work around
let expression = new String('10 + 20');
eval(expression.toString()); // returns 30
```
Warning: *Executing JavaScript from a string is an enormous security risk. It is far too easy for a bad actor to run arbitrary code when you use eval().*
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-eval-p9fxgs?file=/src/index.js)**
## Q 6.5. How do you check if a string starts with another string?
You can use ECMAScript 6 `String.prototype.startsWith()` method to check a string starts with another string or not. But it is not yet supported in all browsers. Let us see an example to see this usage,
```js
let str = "Hello World";
console.log(str.startsWith("Hello")); // true
console.log(str.startsWith("World")); // false
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-startswith-tvq7i5?file=/src/index.js)**
## # 7. ARRAY
## Q 7.1. Explain arrays in JavaScript?
JavaScript array is an object that represents a collection of similar type of elements. It can holds values (of any type) not particularly in named properties/keys, but rather in numerically indexed positions.
**Syntax:**
```js
const array_name = [item-1, item-2, item-3, ...];
```
**Example 01:** Creating an array
```js
// array of numbers
const numbers = [10, 20, 30, 40, 50];
// using new keyword
const numbers = new Array(10, 20, 30, 40, 50);
// array of strings
let fruits = ["Apple", "Orange", "Plum", "Mango"];
```
**Example 02:** Accessing array elements
```js
let fruits = ["Apple", "Orange", "Plum", "Mango"];
fruits[0]; // Apple
fruits[fruits.length - 1] // Mango
// Iterate array elements
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
```
**Example 03:** Adding new array elements
```js
let fruits = ["Apple", "Orange", "Plum", "Mango"];
fruits.push("Grapes"); // Adds a new element (Grapes) to fruits
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-array-y73m66?file=/src/index.js)**
## Q 7.2. What are associative arrays in javascript?
Associative arrays are basically objects in JavaScript where indexes are replaced by user-defined keys. They do not have a length property like a normal array and cannot be traversed using a normal for loop.
**Syntax:**
```js
const array_name = { key1: 'value1', key2: 'value2', key3: 'value3' }
```
**Example:**
```js
const employee = {
id: 12345,
name: "Sakshi Memon",
email: "sakshi.memon@email.com"
};
// Accesing employee elements
console.log(employee.id); // 12345
console.log(employee.name); // Sakshi Memon
// Array Length
console.log(Object.keys(employee).length); // 3
// Retrieve the elements
for (let key in employee) {
console.log(key + " = " + employee[key]);
}
// Output
id = 12345
name = Sakshi Memon
email = sakshi.memon@email.com
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-associative-arrays-vxc4qc?file=/src/index.js)**
## Q 7.3. Calculate the length of the associative array?
**Method 1:** Using `Object.keys().length`
```js
const employee = {
id: 12345,
name: "Sakshi Memon",
email: "sakshi.memon@email.com"
};
console.log(Object.keys(employee).length); // Output 3
```
**Method 2:** Using `Object.hasOwnProperty()`
```js
function getLength(object) {
let count = 0;
for (let key in object) {
// hasOwnProperty method check own property of object
if (object.hasOwnProperty(key)) count++;
}
return count;
}
console.log(getLength(employee)); // Output 3
```
**Method 3:** Using `Object.getOwnPropertyNames()`
```js
const employee = {
id: 12345,
name: "Sakshi Memon",
email: "sakshi.memon@email.com"
};
Object.getOwnPropertyNames(employee).length; // Output 3
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-associative-arrays-qye2t1?file=/src/index.js)**
## Q 7.4. What is the difference between Array and Array of Objects in JavaScript?
Objects represent a special data type that is mutable and can be used to store a collection of data (rather than just a single value). Arrays are a special type of variable that is also mutable and can also be used to store a list of values.
**Example:** Arrays
```js
const numbers = [10, 20, 30];
// Iterating through loop
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
// Pop an element from array
numbers.pop();
console.log("after pop(): " + numbers);
```
**Example:** Array of Objects
```js
const employees = [
{ id: 101, name: "Sakshi Memon", email: "sakshi.memon@email.com" },
{ id: 102, name: "Subhash Shukla", email: "subhash.shukla@email.com" },
{ id: 103, name: "Mohini Karpe", email: "mohini.karpe@email.com" }
];
// Using DOT notation
console.log(employees[0].name);
// Using delete keyword
delete employees[0];
// Iterating using for..in loop
for (let key in employees) {
console.log(employees[key]);
}
```
**Difference:**
|S.No. | Array | Array of objects |
|-------|---------|------------------|
|1. |Arrays are best to use when the elements are numbers.| Objects are best to use when the elements strings |
|3. |The elements can be manipulated using []. | The properties can be manipulated using both . ( DOT ) notation and [].|
|4. |The elements can be popped out of an array using the pop() function.| The keys or properties can be deleted by using the delete keyword.|
|5. |Iterating through an array is possible using For loop, For..in, For..of, and ForEach().| Iterating through an array of objects is possible using For..in, For..of, and ForEach().|
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-array-vs-object-w7wz7i?file=/src/index.js)**
## Q 7.5. Explain array methods [ join(), pop(), push(), shift(), unshift(), concat(), map(), filter(), reduce(), reduceRight(), every(), some(), indexOf(), lastIndexOf(), find(), findIndex(), includes() ]
**1. array.join()**:
The `join()` method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.
```js
var elements = ['Fire', 'Air', 'Water'];
console.log(elements.join()); // Output: "Fire,Air,Water"
console.log(elements.join('')); // Output: "FireAirWater"
console.log(elements.join('-')); // Output: "Fire-Air-Water"
```
**2. array.pop()**:
The pop() method removes the last element from an array and returns that element. This method changes the length of the array.
```js
var plants = ['broccoli', 'cauliflower', 'kale'];
console.log(plants.pop()); // Output: "kale"
console.log(plants); // Output: Array ["broccoli", "cauliflower"]
console.log(plants.pop()); // Output: "cauliflower"
console.log(plants.pop()); // Output: "broccoli"
console.log(plants.pop()); // Output: "undefined"
```
**3. array.push()**:
The push() method adds one or more elements to the end of an array and returns the new length of the array.
```js
const animals = ['pigs', 'goats', 'sheep'];
const count = animals.push('cows');
console.log(count); // Output: 4
console.log(animals); // Output: Array ["pigs", "goats", "sheep", "cows"]
```
**4. array.shift()**:
The shift() method removes the first element from an array and returns that removed element. This method
changes the length of the array.
```js
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
console.log(fruits) // Output: Array ["Orange", "Apple", "Mango"]
```
**5. array.unshift()**:
The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.
```js
var fruits = ["Banana", "Orange", "Apple"];
fruits.unshift("Mango","Pineapple");
console.log(fruits); // Output: Array ["Mango", "Pineapple", "Banana", "Orange", "Apple"]
```
**6. array.concat()**:
The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
```js
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
console.log(array1.concat(array2)); // Output: Array ["a", "b", "c", "d", "e", "f"]
```
**7. array.map()**:
The map() method creates a new array with the results of calling a provided function on every element in the calling array.
```js
var array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1); // Output: Array [2, 8, 18, 32]
```
**8. array.filter()**:
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
```js
var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction'];
const result = words.filter(word => word.length > 6);
console.log(result); // Output: Array ["exuberant", "destruction"]
```
**9. array.reduce()**:
The reduce() method executes a reducer function (that you provide) on each element of the array,
resulting in a single output value.
```js
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
console.log(array1.reduce(reducer)); // Output: 10
console.log(array1.reduce(reducer, 5)); // Output: 15
```
**10. array.reduceRight()**:
The reduceRight() method applies a function against an accumulator and each value of the array (from right-to-left) to reduce it to a single value.
```js
const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
(accumulator, currentValue) => accumulator.concat(currentValue)
);
console.log(array1); // Output: Array [4, 5, 2, 3, 0, 1]
```
**11. array.every()**:
The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.
```js
function isBelowThreshold(currentValue) {
return currentValue < 40;
}
var array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold)); // Output: true
```
**12. array.some()**:
The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.
```js
var array = [1, 2, 3, 4, 5];
var even = function(element) {
// checks whether an element is even
return element % 2 === 0;
};
console.log(array.some(even)); // Output: true
```
**13. array.indexOf()**:
The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.
```js
var beasts = ['ant', 'bison', 'camel'];
console.log(beasts.indexOf('camel')); // Output: 2
console.log(beasts.indexOf('giraffe')); // Output: -1
```
**14. array.lastIndexOf()**:
The lastIndexOf() method returns the index within the calling String object of the last occurrence
of the specified value, searching backwards from fromIndex. Returns -1 if the value is not found.
```js
var paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';
var searchTerm = 'dog';
console.log('The index of the first "' + searchTerm + '" from the end is ' + paragraph.lastIndexOf(searchTerm));
// Output: "The index of the first "dog" from the end is 52"
```
**15. array.find()**:
The find() method returns the value of the first element in the provided array that satisfies the provided testing function.
```js
var array1 = [5, 12, 8, 130, 44];
var found = array1.find(function(element) {
return element > 100;
});
console.log(found); // Output: 130
```
**16. array.findIndex()**:
The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.
```js
var array1 = [5, 12, 8, 130, 44];
function isLargeNumber(element) {
return element > 20;
}
console.log(array1.findIndex(isLargeNumber)); // Output: 3
```
**17. array.includes()**:
The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.
```js
var array1 = [1, 2, 3];
console.log(array1.includes(2)); // Output: true
var pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('at')); // Output: false
```
## Q 7.6. What are the benefits of using spread syntax and how is it different from rest syntax?
Spread operator or Spread Syntax allow us to expand the arrays and objects into elements in the case of an array and key-value pairs in the case of an object.
**Example:**
```js
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));
// ES-5 way
console.log(sum.apply(null, numbers));
```
**Example:** Merge arrays
```js
const newBrands = ["Tesla", "Mahindra"];
const brands = ["Ford", "Honda", ...newBrands, "BMW"];
console.log(brands);
```
**Example:** Copy array/object
```js
let obj = { a: 10, b: 20, c: 30 };
// spread the object into a list of parameters
let objCopy = { ...obj };
// add new
obj.d = 40;
console.log(JSON.stringify(obj)); // { "a":10, "b":20, "c":30, "d":40 }
console.log(JSON.stringify(objCopy)); // { "a":10, "b":20, "c":30 }
```
**Difference:**
The main difference between `rest` and `spread` is that the rest operator puts the rest of some specific user-supplied values into a JavaScript array. But the spread syntax expands iterables into individual elements.
|Spread Syntax | Rest Syntax |
|------------------------|---------------------------------|
|Spread operator as its name suggests it spreads or expands the content of the given element.| Rest Syntax is just the opposite of spread syntax it collects the data and stores that data in a variable which we can use further in our code.|
|It expands an Array in form of elements, while in key-value pairs in the case of Objects. | It collects the data in the developer's desired format.|
|You may or may not use the strict mode inside the function containing the spread operator. | You can not use the strict mode inside function containing the rest operator.|
|It will overwrite the identical properties inside two objects and replace the former with the latter. | It simply collects all properties and wraps them inside a container.|
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-spread-vs-spread-qvxkkz?file=/src/index.js)**
## Q 7.7. What is the difference between for..in and for..of?
Both `for..of` and `for..in` statements iterate over lists; the values iterated on are different though, `for..in` returns a **list of keys** on the object being iterated, whereas `for..of` returns a **list of values** of the numeric properties of the object being iterated.
* **for in**: iterates over all enumerable properties of an object that are **keyed** by strings.
* **for of**: iterates over the **values** of an iterable objects. including: built-in `String`, `Array`, array-like objects (e.g., `arguments` or `NodeList`), `TypedArray`, `Map`, `Set`, and `user-defined` iterables.
**Example:**
```js
// for..in
const list = [10, 20, 30];
for (let i in list) {
console.log(i); // "0", "1", "2",
}
// for..of
for (let i of list) {
console.log(i); // "10", "20", "30"
}
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-for-in-for-of-b0vn3v?file=/src/index.js)**
## Q 7.8. Can you give an example for destructuring an array?
Destructuring is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. That is, we can extract data from arrays and objects and assign them to variables.
```js
// Variable assignment.
const numbers = [10, 20, 30];
const [one, two, three] = numbers;
console.log(one); // 10
console.log(two); // 20
console.log(three); // 30
```
```js
// Swapping variables
let a = 100;
let b = 200;
[a, b] = [b, a];
console.log(a); // 20
console.log(b); // 10
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-array-destructure-bg71je?file=/src/index.js)**
## Q 7.9. What are default values in destructuring assignment?
A variable can be assigned a default value when the value unpacked from the array or object is undefined during destructuring assignment. It helps to avoid setting default values separately for each assignment.
**Array Destructuring:**
```js
const [x = 2, y = 4, z = 6] = [10];
console.log("x: " + x); // 10
console.log("y: " + y); // 4
console.log("z: " + z); // 6
```
**Object Destructuring:**
```js
const { i = 2, j = 4, k = 6 } = { n: 10 };
console.log("i: " + i); // 2
console.log("j: " + j); // 4
console.log("k: " + k); // 6
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/ecstatic-drake-iq971p?file=/src/index.js)**
## Q 7.10. When to use reduce(), map(), foreach() and filter() in JavaScript?
**1. forEach():**
It takes a callback function and run that callback function on each element of array one by one.
Basically forEach works as a traditional for loop looping over the array and providing array elements to do operations on them.
```js
let numbers = [10, 20, 30];
numbers.forEach(function (number, index) {
console.log(number + " comes at " + index);
});
// Output
10 comes at 0
20 comes at 1
30 comes at 2
```
**2. filter():**
The main difference between forEach() and filter() is that forEach just loop over the array and executes the callback but filter executes the callback and check its return value. If the value is true element remains in the resulting array but if the return value is false the element will be removed for the resulting array.
*Note: filter does not update the existing array it will return a new filtered array every time*.
```js
let numbers = [10, 20, 30];
let result = numbers.filter(function (number) {
return number !== 20;
});
console.log(result);
// Output
[10, 30]
```
**3. map():**
map() like filter() & forEach() takes a callback and run it against every element on the array but whats makes it unique is it generate a new array based on your existing array.
Like filter(), map() also returns an array. The provided callback to map modifies the array elements and save them into the new array upon completion that array get returned as the mapped array.
```js
let numbers = [10, 20, 30];
let mapped = numbers.map(function (number) {
return number * 10;
});
console.log(mapped);
// Output
[100, 200, 300]
```
**4. reduce():**
reduce() method of the array object is used to reduce the array to one single value.
```js
let numbers = [10, 20, 30];
let sum = numbers.reduce(function (sum, number) {
return sum + number;
});
console.log(sum); // Output: 60
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-loop-m755cw?file=/src/index.js)**
## Q 7.11. How do you define JSON arrays?
JSON is an acronym for JavaScript Object Notation, and is "an open standard data interchange format".
JSON array represents ordered list of values. JSON array can store multiple values. It can store string, number, boolean or object in JSON array.
```js
// Empty JSON array
const empty = [ ];
// JSON Array of Numbers
const numbers = [12, 34, 56, 43, 95];
// JSON Array of Objects
{
"employees": [
{ "name": "Kabir Dixit", "email": "kabir.dixit@gmail.com", "age": 23 },
{ "name": "Mukta Bhagat", "email": "mukta.bhagat@gmail.com", "age": 28 },
{ "name": "Sakshi Ramakrishnan", "email": "sakshi.ramakrishnan@gmail.com", "age": 33 }
]
}
// access array values
console.log(employees[0].name) // Kabir Dixit
```
## Q 7.12. How to validate JSON Object in javascript?
`JSON.parse()` function will use string and converts to JSON object and if it parses invalidate JSON data, it throws an exception ( **Uncaught SyntaxError: Unexpected string in JSON** ).
```js
function isValidJson(json) {
try {
JSON.parse(json);
return true;
} catch (e) {
return false;
}
}
console.log(isValidJson("{}")); // true
console.log(isValidJson("abc")); // false
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-validate-json-iwzom7?file=/src/index.js)**
## Q 7.13. What is the purpose JSON stringify?
When sending data to a web server, the data has to be in a string format. The `JSON.stringify()` method converts a JavaScript object or value to a JSON string format.
```js
const user = {'name': 'Shashi Meda', 'email': 'shashi.meda@email.com', 'age': 28}
console.log(JSON.stringify(user)); // {"name":"Shashi Meda","email":"shashi.meda@email.com","age":28}
```
## Q 7.14. How do you parse JSON string?
When receiving the data from a web server, the data is always in a string format. But you can convert this string value to javascript object using `JSON.parse()` method.
```js
const user = '{"name": "Shashi Meda", "email": "shashi.meda@email.com", "age": 28}'
console.log(JSON.parse(user));// {'name': 'Shashi Meda', 'email': 'shashi.meda@email.com', 'age': 28}
```
## Q 7.15. What is the purpose of compare function while sorting arrays?
The purpose of the compare function is to define an alternative sort order. When the `sort()` function compares two values, it sends the values to the compare function, and sorts the values according to the returned (negative, zero, positive) value.
If omitted, the array elements are converted to strings, then sorted according to each character's Unicode code point value.
```js
const numbers = [1, 2, 5, 3, 4];
numbers.sort((a, b) => b - a);
console.log(numbers); // [5, 4, 3, 2, 1]
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-sort-ykfhck?file=/src/index.js)**
## Q 7.16. Can you describe the main difference between a `.forEach` loop and a `.map()` loop and why you would pick one versus the other?
To understand the differences between the two, Let us look at what each function does.
**1. Array.forEach():**
* Iterates through the elements in an array.
* Executes a callback for each element.
* Does not return a value.
```js
const numbers = [10, 20, 30];
const doubled = numbers.forEach((num, index) => {
return num * 2;
});
console.log(doubled) // undefined
```
**2. Array.map():**
* Iterates through the elements in an array.
* "Maps" each element to a new element by calling the function on each element, creating a new array as a result.
```js
const numbers = [10, 20, 30];
const doubled = numbers.map(num => {
return num * 2;
});
console.log(doubled) // [20, 40, 60]
```
The main difference between `.forEach` and `.map()` is that `.map()` returns a new array. If you need the result, but do not wish to mutate the original array, `.map()` is the clear choice. If you simply need to iterate over an array, `forEach` is a fine choice.
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-foreach-vs-map-kxch52?file=/src/index.js)**
## Q 7.17. What is unshift() method in JavaScript?
The `unshift()` method adds one or more elements to the beginning of an array and returns the new length of the array.
**Example:**
```js
const numbers = [10, 20, 30];
console.log(numbers.unshift(40, 50)); // 5
console.log(numbers); // [40, 50, 10, 20, 30]
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-unshift-khl0dq?file=/src/index.js)**
## Q 7.18. What is a rest parameter?
The rest parameter is used to represent an indefinite number of arguments as an array. The important point here is only the function\'s last parameter can be a "rest parameter".
This feature has been introduced to reduce the boilerplate code that was induced by the arguments.
**Example:**
```js
function sum(...args) {
return args.reduce((previous, current) => {
return previous + current;
});
}
console.log(sum(10)); // 10
console.log(sum(10, 20)); // 30
console.log(sum(10, 20, 30)); // 60
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/es6-rest-parameters-w8zy28?file=/src/index.js)**
## Q 7.19. What happens if you do not use rest parameter as a last argument?
The rest parameter should be the last argument, as its job is to collect all the remaining arguments into an array.
**Example:** If you define a function like below it does not make any sense and will throw an `SyntaxError`.
```js
function display(a, ...args, b) {
console.log(a);
for (let i = 0; i < args.length; i++) {
console.log(args[i]);
}
console.log(b);
}
display(10, 20, 30, 40, 50);
// Output
SyntaxError: Rest element must be last element
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-rest-parameter-v8r5yt?file=/src/index.js)**
## Q 7.20. What is difference between [] and new Array()?
`[]` and `new Array()` are two different ways of creating an array, but they are functionally equivalent.
The primary difference between them is in how they are created and in their behavior when used with certain methods.
`[]` is a shorthand for creating a new array. It is the preferred way to create an array in most cases, because it's more concise and easier to read. For example:
```js
const myArray = []; // create a new empty array
```
On the other hand, `new Array()` is a constructor function that creates a new array object. It can be used to create an array of a specific length or with specific elements. For example:
```js
const myArray = new Array(); // create a new empty array
const myOtherArray = new Array(3); // create a new array with a length of 3
const myThirdArray = new Array("a", "b", "c"); // create a new array with three elements
```
One potential pitfall of using `new Array()` is that it can be ambiguous when you pass a single argument to the constructor. For example, `new Array(3)` creates an array with a length of 3, but `new Array("3")` creates an array with a single element, the string "3". This is because the argument is treated as the value of the first element when it's a non-negative integer, but as the length of the array when it's a string or a negative integer.
In summary, `[]` is the preferred way to create a new array in JavaScript, while `new Array()` is an alternative way that can be used when you need more control over the array's length or contents.
## # 8. Regular Expression
## Q 8.1. What is a RegExp object?
A regular expression is an object that describes a pattern of characters.
The JavaScript `RegExp` class represents regular expressions, and both String and `RegExp` define methods that use regular expressions to perform powerful pattern-matching and search-and-replace functions on text.
**Syntax:**
```js
// Using literal notation
let pattern = /pattern/attributes;
// Using RegExp Object
let pattern = new RegExp(pattern, attributes);
// * pattern − A string that specifies the pattern of the regular expression or another regular expression.
// * attributes − An optional string containing any of the "g", "i", and "m" attributes that specify global, case-insensitive, and multi-line matches, respectively.
```
**Example:**
```js
let pattern = /ab+c/i; // literal notation
let pattern = new RegExp(/ab+c/, 'i') // constructor with regular expression literal as first argument
```
## Q 8.2. What are the string method available in regular expression?
Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects. These patterns are used with the `exec()` and `test()` methods of `RegExp`, and with the `match()`, `matchAll()`, `replace()`, `replaceAll()`, `search()`, and `split()` methods of String.
**Example 01:** `test()`
Tests for a match in a string. It returns `true` or `false`
```js
let exp = /Hello/;
let res1 = exp.test("Hello World");
let res2 = exp.test("Hi");
console.log(res1); // true
console.log(res2); // false
```
**Example 02:** `exec()`
Executes a search for a match in a string. It returns an array of information or `null` on a mismatch.
```js
let res1 = exp.exec("Hello World");
let res2 = exp.exec("Hi");
console.log(res1); // ['Hello', index: 0, input: 'Hello World', groups: undefined]
console.log(res2); // null
```
|Method |Description |
|-------------|------------------------|
|exec() |Executes a search for a match in a string. It returns an array of information or `null` on a mismatch.|
|test() |Tests for a match in a string. It returns `true` or `false`.|
|match() |Returns an array containing all of the matches, including capturing groups, or `null` if no match is found.|
|matchAll() |Returns an iterator containing all of the matches, including capturing groups.|
|search() |Tests for a match in a string. It returns the index of the match, or `-1` if the search fails.|
|replace() |Executes a search for a match in a string, and replaces the matched substring with a replacement substring.|
|replaceAll() |Executes a search for all matches in a string, and replaces the matched substrings with a replacement substring.|
|split() |Uses a regular expression or a fixed string to break a string into an array of substrings.|
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-regular-expression-fn79dp?file=/src/index.js)**
## Q 8.3. What are modifiers in regular expression?
Modifiers can be used to perform case-insensitive and global searches.
| Modifier | Description |
|---- | -----------------|
| i | Perform case-insensitive matching |
| g | Perform a global match rather than stops at first match |
| m | Perform multiline matching|
**Example 01:** Global Search
```js
let text = "Hello World! Hello World!";
let pattern = /Hello/g;
console.log(text.match(pattern)); // ['Hello', 'Hello']
```
**Example 02:** Case-insensitive match
```js
let string = "Hello World!";
let pattern = /WORLD/i;
console.log(string.match(pattern2)); // ['World', index: 6, input: 'Hello World!', groups: undefined]
```
**Example 03:** Multiline match
The "m" modifier specifies a multiline match. It only affects the behavior of start `^` and end `$`. `^` specifies a match at the start of a string. `$` specifies a match at the end of a string.
```js
let paragraph = `Lorem Ipsum is simply dummy text of the printing and typesetting industry.`;
let pattern = /Lorem/m;
console.log(paragraph.match(pattern3)); // ["Lorem"]
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-modifier-sm7ul2)**
## Q 8.4. What are regular expression patterns?
Regular Expressions provided group of patterns in order to match characters. Basically they are categorized into 3 types,
**Brackets:**
These are used to find a range of characters.
* **[...]**: Any one character between the brackets.
* **[^...]**: Any one character not between the brackets.
* **[0-9]**: It matches any decimal digit from **0** through **9**.
* **[a-z]**: It matches any character from lowercase **a** through lowercase **z**.
* **[A-Z]**: It matches any character from uppercase **A** through uppercase **Z**.
* **[a-Z]**: It matches any character from lowercase **a** through uppercase **Z**.
**Metacharacters:**
These are characters with a special meaning
* **.**: a single character
* **\s**: a whitespace character (space, tab, newline)
* **\S**: non-whitespace character
* **\d**: a digit (0-9)
* **\D**: a non-digit
* **\w**: a word character (a-z, A-Z, 0-9, _)
* **\W**: a non-word character
* **[\b]**: a literal backspace (special case).
* **[aeiou]**: matches a single character in the given set
* **[^aeiou]**: matches a single character outside the given set
* **(foo|bar|baz)**: matches any of the alternatives specified
**Quantifiers:**
These are useful to define quantities
* **p+**: It matches any string containing one or more p\'s.
* **p: It matches any string containing zero or more p\'s.
* **p?**: It matches any string containing at most one p.
* **p{N}**: It matches any string containing a sequence of **N** p\'s
* **p{2,3}**: It matches any string containing a sequence of two or three p\'s.
* **p{2, }**: It matches any string containing a sequence of at least two p\'s.
* **p$**: It matches any string with p at the end of it.
* **^p**: It matches any string with p at the beginning of it.
**Example:**
```js
// Brackets
"Hello World".match(/[a-d]/); // -> matches 'a'
"Hello World".match(/[A-D]/); // -> no match
"Hello World".match(/[A-D]/i); // -> matches 'a'
// Metacharacters
"Hello World".match(/[A-Za-z]\s[A-Za-z]/); // -> matches
"Hello World".match(/[0-9]\s[A-Za-z]/); // -> no match
// Quantifiers
"Hello".match(/l+/); // -> matches
"Hello".match(/A*/); // -> no match
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-regular-expression-patterns-b5ojtl?file=/src/index.js)**
## Q 8.5. How do you search a string for a pattern?
**1. Using test()** It searches a string for a pattern, and returns `true` or `false`, depending on the result.
```js
let re1 = /Hi/;
let re2 = /you/;
re1.test("How are you?"); // false
re2.test("How are you?"); // true
```
**2. Using exec()** It searches a string for a specified pattern, and returns the found text as an object. If no match is found, it returns an empty (null) object.
```js
let re1 = /Hi/;
let re2 = /you/;
re1.exec("How are you?"); // null
re2.exec("How are you?"); // ["you"]
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-regular-expression-m10bgo?file=/src/index.js)**
## Q 8.6. What is the purpose of exec method?
The purpose of exec method is similar to test method but it returns a founded text as an object instead of returning true/false.
```js
// Using test() method
var pattern = /you/;
console.log(pattern.test("How are you?")); // true
// Using exec() method
var pattern = /you/;
console.log(pattern.exec("How are you?")); // ["you", index: 8, input: "How are you?", groups: undefined]
```
## Q 8.7. How do you validate an email in javascript?
The `test()` method returns `true` if there is a match in the string with the regex pattern. The regular expression (regex) describes a sequence of characters used for defining a search pattern
```js
// Program to validate the email address
function validateEmail(email) {
// regex pattern for email
const re = /\S+@\S+\.\S+/g;
// check if the email is valid
let result = re.test(email);
if (result) {
console.log("Valid");
} else {
console.log("Not valid.");
}
}
let email = "pradeep.kumar@gmail.com";
let email2 = "pradeep.kumar.com";
validateEmail(email); // Valid
validateEmail(email2); // Not Valid
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-regular-expression-rkxjb1?file=/src/index.js)**
## Q 8.8. How do you detect a mobile browser using regexp?
You can detect mobile browser by simply running through a list of devices and checking if the useragent matches anything. This is an alternative solution for RegExp usage,
```js
function detectMobile() {
if (
navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPad/i) ||
navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/BlackBerry/i) ||
navigator.userAgent.match(/Windows Phone/i)
) {
return true;
} else {
return false;
}
}
```
## # 9. FUNCTIONS
## Q 9.1. What are the benefits of using arrow function over es5 function?
Arrows is a new syntax for functions, which brings several benefits:
* Arrow syntax automatically binds `this` to the surrounding code\'s context
* The syntax allows an implicit return when there is no body block, resulting in shorter and simpler code in some cases
* Last but not least, `=>` is shorter and simpler than `function`, although stylistic issues are often subjective
**Example 01:** Arrow Function with No Argument
If a function doesn\'t take any argument, then you should use empty parentheses.
```js
let greet = () => console.log('Hello');
greet(); // Hello
```
**Example 02:** Arrow Function with One Argument
If a function has only one argument, you can omit the parentheses.
```js
let greet = x => console.log(x);
greet('Hello'); // Hello
```
**Example 03:** Arrow Function as an Expression
You can also dynamically create a function and use it as an expression.
```js
let age = 25;
let welcome = (age < 18) ?
() => console.log('Baby') :
() => console.log('Adult');
welcome(); // Adult
```
**Example 04:** Multiline Arrow Functions
If a function body has multiple statements, you need to put them inside curly brackets `{}`.
```js
let area = (r) => {
const pi = 3.14;
return pi * r * r;
}
let result = area(10);
console.log(result); // 314
```
*Note: Unlike regular functions, arrow functions do not have their own `this`. The value of `this` inside an arrow function remains the same throughout the lifecycle of the function and is always bound to the value of `this` in the closest non-arrow parent function.*
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/es6-arrow-function-yl7oqo?file=/src/index.js)**
## Q 9.2. What is the benefit of using the arrow syntax for a method in a constructor?
The main advantage of using an arrow function as a method inside a constructor is that the value of `this` gets set at the time of the function creation and can\'t change after that. So, when the constructor is used to create a new object, `this` will always refer to that object.
```js
const Person = function(firstName) {
this.firstName = firstName;
this.sayName1 = function() { console.log(this.firstName); };
this.sayName2 = () => { console.log(this.firstName); };
};
const john = new Person('John');
const dave = new Person('Dave');
john.sayName1(); // John
john.sayName2(); // John
// The regular function can have its 'this' value changed, but the arrow function cannot
john.sayName1.call(dave); // Dave (because "this" is now the dave object)
john.sayName2.call(dave); // John
john.sayName1.apply(dave); // Dave (because 'this' is now the dave object)
john.sayName2.apply(dave); // John
john.sayName1.bind(dave)(); // Dave (because 'this' is now the dave object)
john.sayName2.bind(dave)(); // John
var sayNameFromWindow1 = john.sayName1;
sayNameFromWindow1(); // undefined (because 'this' is now the window object)
var sayNameFromWindow2 = john.sayName2;
sayNameFromWindow2(); // John
```
## Q 9.3. Difference between `Function`, `Method` and `Constructor` calls in JavaScript?
**1. Functions:** The simplest usages of function call:
```js
function display(name) {
return "Hello " + name;
}
display("World"); // "Hello World"
```
**2. Methods:** in JavaScript are nothing more than object properties that are functions.
```js
var obj = {
display : function() {
return "Hello " + this.name;
},
name: 'Minali Peri'
}
obj.display(); // "Hello Minali Peri"
```
**3. Constructors:** Like function and method, `constructors` are defined with function.
```js
function Employee(name, age) {
this.name = name;
this.age = age;
}
var emp1 = new Employee('Drishya Sama', 28);
emp1.name; // "Drishya Sama"
emp1.age; // 28
```
Unlike function calls and method calls, a constructor call `new Employee('Drishya Sama', 28)` creates a new object and passes it as the value of `this`, and implicitly returns the new object as its result. The primary role of the constructor function is to initialize the object.
## Q 9.4. When you should not use arrow functions in ES6?
An arrow function is a shorter syntax for a function expression and does not have its own **this, arguments, super, or new.target**. These function are best suited for non-method functions, and they cannot be used as constructors.
**Arrow functions in ES6 has two limitations:**
* Do not work with new
* Fixed this bound to scope at initialisation
**When should not use Arrow Functions:**
**1. Object methods:**
The counter object has two methods: current() and next(). The current() method returns the current counter value and the next() method returns the next counter value.
```js
// Usin arrow function
const counter = {
count: 0,
next: () => ++this.count,
current: () => this.count
};
console.log(counter.next()); // NaN
```
**2. Event handlers:**
If we click the button, we would get a TypeError. It is because this is not bound to the button, but instead bound to its parent scope.
```js
let button = document.getElementById('press');
button.addEventListener('click', () => {
this.classList.toggle('on');
});
```
**3. Prototype methods:**
The `this` value in these `next()` and `current()` methods reference the global object. Since the `this` value inside the methods to reference the Counter object, it needs to use the regular functions instead
```js
function Counter() {
this.count = 0;
}
Counter.prototype.next = () => {
return this.count;
};
Counter.prototype.current = () => {
return ++this.next;
}
```
**4. Functions that use the arguments object:**
Arrow functions don\'t have the arguments object. Therefore, if a function that uses arguments object, you cannot use the arrow function.
```js
const concat = (separator) => {
let args = Array.prototype.slice.call(arguments, 1);
return args.join(separator);
}
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-arrow-function-52ny7c?file=/src/index.js)**
## Q 9.5. What are the properties of function objects in javascript?
**JavaScript function objects** are used to define a piece of JavaScript code. This code can be called within a JavaScript code as and when required.
**Javascript Function Objects Property:**
|Name |Description |
|-----------------|----------------------------------|
|arguments |An array corresponding to the arguments passed to a function.|
|arguments.callee |Refers the currently executing function.|
|arguments.length |Refers the number of arguments defined for a function.|
|constructor |Specifies the function that creates an object.|
|length |The number of arguments defined by the function.|
|prototype |Allows adding properties to a Function object.|
## Q 9.6. What is a first class function?
In javaScript, functions can be stored as a variable inside an object or an array as well as it can be passed as an argument or be returned by another function. That makes function **first-class function** in JavaScript.
**Example 01:** Assign a function to a variable
```js
const message = function() {
console.log("Hello World!");
}
message(); // Invoke it using the variable
```
**Example 02:** Pass a function as an Argument
```js
function sayHello() {
return "Hello, ";
}
function greeting(helloMessage, name) {
console.log(helloMessage() + name);
}
// Pass `sayHello` as an argument to `greeting` function
greeting(sayHello, "JavaScript!");
```
**Example 03:** Return a function
```js
function sayHello() {
return function() {
console.log("Hello!");
}
}
```
**Example 04:** Using a variable
```js
const sayHello = function() {
return function() {
console.log("Hello!");
}
}
const myFunc = sayHello();
myFunc();
```
**Example 05:** Using double parentheses
```js
function sayHello() {
return function() {
console.log("Hello!");
}
}
sayHello()();
```
We are using double parentheses `()()` to invoke the returned function as well.
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-first-class-function-ckck8k?file=/src/index.js)**
## Q 9.7. What is a higher order function?
A Higher-Order function is a function that receives a function as an argument or returns the function as output.
For example, `Array.prototype.map()`, `Array.prototype.filter()` , `Array.prototype.forEach()` and `Array.prototype.reduce()` are some of the Higher-Order functions in javascript.
**Example 01:** .map()
```js
const array = [10, 20, 30];
const result = array.map(function (item) {
return item * 2;
});
console.log(result); // [20, 40, 60]
```
**Example 02:** .filter()
```js
const randomNumbers = [4, 11, 42, 14, 39];
const filteredArray = randomNumbers.filter((number) => {
return number > 15;
});
console.log(filteredArray); // [42, 39]
```
**Example 03:** .forEach()
```js
const numbers = [28, 77, 45];
numbers.forEach((number) => {
console.log(number);
});
```
**Example 04:** .reduce()
```js
const arrayOfNumbers = [10, 20, 30];
const sum = arrayOfNumbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
});
console.log("Sum: " + sum); // 60
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-higher-order-function-yhbo9v?file=/src/index.js)**
## Q 9.8. What is a unary function?
Unary function (i.e. monadic) is a function that accepts exactly one argument. It stands for single argument accepted by a function