DIV Element
P Element
## 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. ```js // Unary function const unaryFunction = (number) => number + 10; console.log(unaryFunction(10)); // 20 ``` **⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-unary-function-j0h3gh?file=/src/index.js)** ## Q 9.9. What is currying function? Currying is the process of taking a function with multiple arguments and turning it into a sequence of functions each with only a single argument. In other words, when a function, instead of taking all arguments at one time, takes the first one and return a new function that takes the second one and returns a new function which takes the third one, and so forth, until all arguments have been fulfilled. ```js // Normal function const add = (a, b, c) => { return a + b + c; }; console.log(add(10, 10, 10)); // 30 // Currying function const addCurry = (a) => { return (b) => { return (c) => { return a + b + c; }; }; }; console.log(addCurry(20)(20)(20)); // 60 ``` *Note: Curried functions are great to improve code re-usability and functional composition.* **⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-currying-function-3kq1db?file=/src/index.js)** ## Q 9.10. What is a pure function? Pure functions are functions that accept an input and returns a value without modifying any data outside its scope(Side Effects). Its output or return value must depend on the input/arguments and pure functions must return a value. **Example:** Pure Function It is a pure function because you always get a Hello `
## Q 10.1. What is event handling in javascript? The change in the state of an object is known as an **Event**. In html, there are various events which represents that some activity is performed by the user or by the browser. When javascript code is included in HTML, js react over these events and allow the execution. This process of reacting over the events is called **Event Handling**. Thus, js handles the HTML events via **Event Handlers**. Some of the HTML event handlers are: **Mouse events:** |Event Handler |Description |----------------|------------------------------| |onclick |When mouse click on an element| |onmouseover |When the cursor of the mouse comes over the element| |onmouseout |When the cursor of the mouse leaves an element| |onmousedown |When the mouse button is pressed over the element| |onmouseup |When the mouse button is released over the element| |onmousemove |When the mouse movement takes place.| **Form events:** |Event Handler |Description | |--------------|----------------------| |onfocus |When the user focuses on an element| |onsubmit |When the user submits the form| |onblur |When the focus is away from a form element| |onchange |When the user modifies or changes the value of a form element| **Window/Document events:** |Event Handler |Description | |---------------|-----------------------| |onload |When the browser finishes the loading of the page| |onunload |When the visitor leaves the current webpage, the browser unloads it| |onresize |When the visitor resizes the window of the browser| **Example:** Click Event ```html
Click Event Example
``` **⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-click-event-rcvg65?file=/index.html)** ## Q 10.2. How to create and trigger events in javascript? Events can be handled either through `addEventListener()` method or we can trigger events on individual components by defining specific JavaScript functions. **Syntax:** ```js document.addEventListener(event, function, phase) ``` **Example:** ```htmlClick on the page to trigger click event
``` **⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-addeventlistener-kxesqw?file=/index.html)** ## Q 10.3. What is an event delegation? 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 `event.target` property of the event object. **Example:** ```html ``` **⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-event-delegation-7x5idt?file=/index.html)** ## Q 10.4. What is an event flow? Event flow is the order in which event is received on the web page. When you click an element that is nested in various other elements, before your click actually reaches its destination, or target element, it must trigger the click event each of its parent elements first, starting at the top with the global window object. There are two ways of event flow * Top to Bottom (Event Capturing) * Bottom to Top (Event Bubbling)
If you click on
```
**Stopping bubbling:**
```html
```
**⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-event-bubbling-y1sjrk?file=/index.html)**
## Q 10.6. What is event capturing?
Event capturing is a type of event propagation where the event is first captured by the outermost element and then successively triggers on the descendants (children) of the target element in the same nesting hierarchy till it reaches the inner DOM element.
**Example:**
```html
EM, the handler on DIV runs.
Click DIV1 Element
DIV 2
```
## Q 10.11. What is difference between stoppropagation, stopimmediatepropagation and preventdefault in javascript?
**1. event.preventDefault()**:
This method is used to stop the browser\'s default behavior when performing an action.
**Example:**
```html
DIV 1
Please click on the checkbox control.
``` **2. event.stopPropagation()**: This method is used to prevent the propagation of an event as defined in the capturing/bubbling phase of the flow of an event in the browser. **Example:** ```html## Q 11.1. What are the possible ways to create objects in JavaScript? **1. Object Constructor**: The simpliest way to create an empty object is using Object constructor. Currently this approach is not recommended. ```js let object = new Object(); ``` **2. Object create method**: The create method of Object creates a new object by passing the prototype object as a parameter ```js let object = Object.create(null); ``` **3. Object Literal**: The object literal syntax is equivalent to create method when it passes `null` as parameter ```js let person = {}; ``` **4. Function Constructor**: Create any function and apply the new operator to create object instances, ```js function Person(name) { let object = {}; object.name = name; object.age = 26; return object; } let person = new Person("Alex"); ``` **5. Function Constructor with prototype**: This is similar to function constructor but it uses prototype for their properties and methods, ```js function Person(){} Person.prototype.name = "Alex"; let person = new Person(); ``` **6. ES6 Class**: ES6 introduces class feature to create the objects ```js class Person { constructor(name) { this.name = name; } } let person = new Person("Alex"); ``` **7. Singleton Pattern**: A Singleton is an object which can only be instantiated one time. Repeated calls to its constructor return the same instance and this way one can ensure that they don\'t accidentally create multiple instances. ```js let object = new function() { this.name = "Alex"; } ``` ## Q 11.2. What are the recommendations to create new object? It is recommended to avoid creating new objects using `new Object()`. Instead you can initialize values based on it is type to create the objects. * Assign {} instead of new Object() * Assign "" instead of new String() * Assign 0 instead of new Number() * Assign false instead of new Boolean() * Assign [] instead of new Array() * Assign /()/ instead of new RegExp() * Assign function (){} instead of new Function() **Example:** ```js let obj1 = {}; let obj2 = ""; let obj3 = 0; let obj4 = false; let obj5 = []; let obj6 = /()/; let obj7 = function(){}; ``` ## Q 11.3. What are the different ways to access object properties? There are 3 possible ways for accessing the property of an object. **1. Dot notation:** It uses dot for accessing the properties ```js objectName.property ``` **2. Square brackets notation:** It uses square brackets for property access ```js objectName["property"] ``` **3. Expression notation:** It uses expression in the square brackets ```js objectName[expression] ``` ## Q 11.4. How to check if an object is an array or not? The `Array.isArray()` method determines whether an object is an array. This function returns `true` if the object is an array, and `false` if not. ```js // Creating some variables var v1 = {name: "John", age: 22}; var v2 = ["red", "green", "blue", "yellow"]; var v3 = [10, 20, 30, 40, 50]; var v4 = null; // Testing the variables data type typeof(v1); // Returns: "object" typeof(v2); // Returns: "object" typeof(v3); // Returns: "object" typeof(v3); // Returns: "object" // Testing if the variable is an array Array.isArray(v1); // Returns: false Array.isArray(v2); // Returns: true Array.isArray(v3); // Returns: true Array.isArray(v4); // Returns: false ``` *Note: The `Array.isArray()` method is supported in all major browsers, such as Chrome, Firefox, IE (9 and above)* ## Q 11.5. Can you give an example for destructuring an object? Destructuring is an expression available in ES6 which enables a succinct and convenient way to extract values of Objects or Arrays and place them into distinct variables. **Example:** ```js // Object Destructuring let person = { name: "Sarah", country: "India", job: "Developer" }; let name = person.name; let country = person.country; let job = person.job; console.log(name); // Sarah console.log(country); // India console.log(job); // Developer ``` **⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-object-destructuring-xg7q51?file=/src/index.js)** ## Q 11.6. How do you clone an object in JavaScript? Using the object spread operator `...`, the object own enumerable properties can be copied into the new object. This creates a shallow clone of the object. ```js const obj = { a: 10, b: 20 } const shallowClone = { ...obj } ``` With this technique, prototypes are ignored. In addition, nested objects are not cloned, but rather their references get copied, so nested objects still refer to the same objects as the original. **Example 01**: Clone the Object Using Object.assign() ```js const person = { name: 'John', age: 21, } // cloning the object const clonePerson = Object.assign({}, person); console.log(clonePerson); // changing the value of clonePerson clonePerson.name = 'Peter'; console.log(clonePerson.name); console.log(person.name); // Output {name: "John", age: 21} Peter John ``` **Example 02**: Clone the Object Using Spread Syntax ```js const person = { name: 'John', age: 21, } // cloning the object const clonePerson = { ... person} console.log(clonePerson); // changing the value of clonePerson clonePerson.name = 'Peter'; console.log(clonePerson.name); console.log(person.name); // Output {name: "John", age: 21} Peter John ``` **Example 03**: Clone the Object Using JSON.parse() ```js const person = { name: 'John', age: 21, } // cloning the object const clonePerson = JSON.parse(JSON.stringify(person)); console.log(clonePerson); // changing the value of clonePerson clonePerson.name = 'Peter'; console.log(clonePerson.name); console.log(person.name); // Output {name: "John", age: 21} Peter John ``` **⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-object-clone-hj5uhr?file=/src/index.js)** ## Q 11.7. How do you copy properties from one object to other? You can use `Object.assign()` method which is used to copy the values and properties from one or more source objects to a target object. It returns the target object which has properties and values copied from the target object. The syntax would be as below, ```js Object.assign(target, ...sources) ``` Let us take example with one source and one target object, ```js const target = { a: 1, b: 2 }; const source = { b: 3, c: 4 }; const returnedTarget = Object.assign(target, source); console.log(target); // { a: 1, b: 3, c: 5 } console.log(returnedTarget); // { a: 1, b: 3, c: 5 } ``` As observed in the above code, there is a common property(`b`) from source to target so it is value is been overwritten. ## Q 11.8. What is the difference between native, host and user objects? **1. Native Objects**: Are objects that are part of the JavaScript language defined by the ECMAScript specification. For example, `String`, `Math`, `RegExp`, `Object`, `Function` etc core objects defined in the ECMAScript spec. **2. Host Objects**: Are objects provided by the browser or runtime environment (Node). For example, `window`, `XmlHttpRequest`, `DOM nodes` etc considered as host objects. **3. User Objects**: Are objects defined in the javascript code. For example, User object created for profile information. ## Q 11.9. What are the properties of Intl object? The `Intl` object is the namespace for the ECMAScript Internationalization API that provides language number formatting, string comparison, and date/time formatting. Below are the list of properties available on Intl object, **1. Collator:** Intl.Collator provides a language-aware comparison of Strings for sorting and searching. **Example:** ```js // Intl.Collator() let collatorEs = new Intl.Collator("es").compare; console.log(["a", "z", "ñ", "b"].sort(collatorEs)); // ["a", "b", "ñ", "z"] let collatorEsCaseFirts = new Intl.Collator("es", { caseFirst: "upper" }).compare; console.log(["a", "A", "z", "ñ", "b"].sort(collatorEsCaseFirts)); // ["A", "a", "b", "ñ", "z"] ``` **⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-intl-collator-jusk3c?file=/src/index.js)** **2. DateTimeFormat:** These are the objects that enable language-sensitive date and time formatting. **Example:** ```js // Intl.DateTimeFormat() let now = new Date(); let nowEnUs = new Intl.DateTimeFormat("en-US"); let noeEs = new Intl.DateTimeFormat("es-ES"); console.log(nowEnUs.format(now)); // 5/17/2022 console.log(noeEs.format(now)); // 17/5/2022 ``` **⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-intl-datetimeformat-mnvt4u?file=/src/index.js)** **3. ListFormat:** These are the objects that enable language-sensitive list formatting. **Example:** ```js // Intl.ListFormat() let lfEn = new Intl.ListFormat("en", { localeMatcher: "lookup", type: "disjunction", style: "narrow" }); console.log(lfEn.format(['Hannibal smith', 'Murdock' , 'Faceman', 'B.A." Baracus'])); // Hannibal smith, Murdock, Faceman, or B.A." Baracus let lfEs = new Intl.ListFormat("es", { localeMatcher: "lookup", type: "disjunction", style: "narrow" }); console.log(lfEs.format(['Hannibal smith', 'Murdock' , 'Faceman', 'B.A." Baracus'])); // Hannibal smith, Murdock, Faceman o B.A." Baracus ``` **⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-intl-listformat-4dq79u?file=/src/index.js)** **4. NumberFormat:** Objects that enable language-sensitive number formatting. ```js // Intl.NumberFormat() let myNumber = 1000000.999; let nfEs = new Intl.NumberFormat('es-ES'); let nfEn = new Intl.NumberFormat('en-EU'); console.log(nfEs.format(myNumber)); //1.000.000,999 console.log(nfEn.format(myNumber)); // 1,000,000.999 ``` **⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-intl-numberformat-whhvc9?file=/src/index.js)** **5. RelativeTimeFormat:** Objects that enable language-sensitive relative time formatting. **Example:** ```js // Intl.RelativeTimeFormat() let rtfEn = new Intl.RelativeTimeFormat('en', { numeric: 'auto' }); console.log(rtfEn.format(2, 'day')); // in 2 days console.log(rtfEn.format(-1, 'day')); // yesterday console.log(rtfEn.format(-5, 'month')); //5 months ago let rtfEs = new Intl.RelativeTimeFormat('es', { numeric: 'auto' }); console.log(rtfEs.format(2, 'day')); // pasado mañana console.log(rtfEs.format(-1, 'day')); // ayer console.log(rtfEs.format(-5, 'month')); // Hace 5 meses ``` **⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-intl-relativetimeformat-cxwko6?file=/src/index.js)** **6. Locale:** Intl.Locale has a toString method that represents the complete contents of the locale. This method allows Locale instances to be provided as an argument to existing Intl constructors. **Example:** ```js // Example: Intl.Locale() let newLocale = new Intl.Locale("en-US", { language: "es" }); console.log(newLocale.toString()); // es-US let now = new Date(); let dtfMyNewLocale = new Intl.DateTimeFormat(newLocale); console.log(dtfMyNewLocale.format(now)); // 17/5/2022 let newLocale2 = new Intl.Locale("en-US", { language: "en" }); console.log(newLocale2.toString()); //en-US let now2 = new Date(); let dtfMyNewLocale2 = new Intl.DateTimeFormat(newLocale2); console.log(dtfMyNewLocale2.format(now2)); // 5/17/2022 ``` **⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-intl-locale-dgel2y?file=/src/index.js)** ## Q 11.10. How do you convert date to another timezone in javascript? The `.toLocaleString()` method to convert date in one timezone to another. For example, let us convert current date to British English timezone as below, ```js console.log(event.toLocaleString('en-GB', { timeZone: 'UTC' })); //29/06/2019, 09:56:00 ``` ## Q 11.11. Explain the difference between mutable and immutable objects? A mutable object is an object whose state can be modified after it is created. An immutable object is an object whose state cannot be modified after it is created. In JavaScript numbers, strings, null, undefined and Booleans are primitive types which are immutable. Objects, arrays, functions, classes, maps, and sets are mutable. ## Q 11.12. How to create immutable object in javascript In JavaScript, some built-in types (numbers, strings) are immutable, but custom objects are generally mutable. Some built-in immutable JavaScript objects are `Math`, `Date`. Here are a few ways to add/simulate immutability on plain JavaScript objects. **1. Object Constant Properties:** By combining `writable: false` and `configurable: false`, you can essentially create a constant (cannot be changed, redefined or deleted) as an object property, like: **Example:** ```js let myObject = {}; Object.defineProperty(myObject, 'number', { value: 10, writable: false, configurable: false, }); console.log(myObject.number); // 10 myObject.number = 20; console.log(myObject.number); // 10 ``` **2. Prevent Extensions:** This method prevents the addition of new properties to our existing object. `preventExtensions()` is a irreversible operation. We can never add extra properties to the object again. **Example:** ```js const myCar = { maxSpeed: 250, batteryLife: 300, weight: 123 }; Object.isExtensible(myCar); // true Object.preventExtensions(myCar); Object.isExtensible(myCar); // false myCar.color = 'blue'; console.log(myCar.color) // undefined ``` **3. Seal:** It prevents additions or deletion of properties. `seal()` also prevents the modification of property descriptors. **Example:** ```js const myCar = { maxSpeed: 250, batteryLife: 300, weight: 123 }; Object.isSealed(myCar); // false Object.seal(myCar); Object.isSealed(myCar); // true myCar.color = 'blue'; console.log(myCar.color); // undefined delete myCar.batteryLife; // false console.log(myCar.batteryLife); // 300 Object.defineProperty(myCar, 'batteryLife'); // TypeError: Cannot redefine property: batteryLife ``` **4. Freeze:** It does the same that `Object.seal()` plus it makes the properties non-writable. **Example:** ```js const myCar = { maxSpeed: 250, batteryLife: 300, weight: 123 }; Object.isFrozen(myCar); // false Object.freeze(myCar); Object.isFrozen(myCar); // true myCar.color = 'blue'; console.log(myCar.color); // undefined delete myCar.batteryLife; console.log(myCar.batteryLife); // 300 Object.defineProperty(myCar, 'batteryLife'); // TypeError: Cannot redefine property: batteryLife myCar.batteryLife = 400; console.log(myCar.batteryLife); // 300 ``` ## Q 11.13. How do you determine whether object is frozen or not? `Object.isFrozen()` method is used to determine if an object is frozen or not. An object is frozen if all of the below conditions hold true, 1. If it is not extensible. 2. If all of its properties are non-configurable. 3. If all its data properties are non-writable. The usage is going to be as follows, ```js const object = { property: 'Welcome JS world' }; Object.freeze(object); console.log(Object.isFrozen(object)); ``` ## Q 11.14. How can you achieve immutability in your own code? For "mutating" objects, use the spread operator, `Object.assign`, `Array.concat()`, etc., to create new objects instead of mutate the original object. **Example:** ```js // Array Example const arr = [10, 20, 30]; const newArr = [...arr, 40, 50]; // [10, 20, 30, 40, 50] // Object Example const human = Object.freeze({ race: "human" }); const aditya = { ...human, name: "Aditya" }; // {race: "human", name: "Aditya"} const alienAditya = { ...aditya, race: "alien" }; // {race: "alien", name: "Aditya"} ``` **⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-immutable-object-jty055?file=/src/index.js)** ## Q 11.15. What is the drawback of declaring methods directly in JavaScript objects? One of the drawback of declaring methods directly in JavaScript objects is that they are very memory inefficient. When you do that, a new copy of the method is created for each instance of an object. **Example:** ```js const Employee = function (name, company, salary) { this.name = name || ""; this.company = company || ""; this.salary = salary || 5000; // We can create a method like this: this.formatSalary = function () { return "$ " + this.salary; }; }; // we can also create method in Employee's prototype: Employee.prototype.formatSalary2 = function () { return "$ " + this.salary; }; // Creating Objects let emp1 = new Employee("Yuri Garagin", "Company 1", 1000); let emp2 = new Employee("Dinesh Gupta", "Company 2", 2000); ``` Here, each instance variable `emp1`, `emp2` has own copy of `formatSalary` method. However the `formatSalary2` will only be added once to an object `Employee.prototype`. **⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-class-object-96mc2r?file=/src/index.js)** ## Q 11.16. How do you compare Object and Map? **1. Object:** A data structure in which data is stored as key value pairs. In an object the key has to be a number, string, or symbol. The value can be anything so also other objects, functions, etc. An object is a **nonordered** data structure, i.e. the sequence of insertion of key value pairs is not remembered. **Example:** ```js // Object() let obj = {}; // adding properties to a object obj.prop = 10; obj[2] = 20; // getting nr of properties of the object Object.keys(obj).length; // 2 // deleting a property delete obj[2]; obj; // {prop: 10} ``` **2. ES6 Map:** A data structure in which data is stored as key value pairs. In which **a unique key maps to a value**. Both the key and the value can be in **any data type**. A map is an iterable data structure. This means that the sequence of insertion is remembered and that we can access the elements in e.g. a `for..of` loop. **Example:** ```js // Map() const myMap = new Map(); const keyString = "a string", keyObj = {}, keyFunc = function () {}; // setting the values myMap.set(keyString, "value associated with 'a string'"); myMap.set(keyObj, "value associated with keyObj"); myMap.set(keyFunc, "value associated with keyFunc"); myMap.size; // 3 // getting the values myMap.get(keyString); // "value associated with 'a string'" myMap.get(keyObj); // "value associated with keyObj" myMap.get(keyFunc); // "value associated with keyFunc" myMap.get("a string"); // "value associated with 'a string'" // because keyString === 'a string' myMap.get({}); // undefined, because keyObj !== {} myMap.get(function () {}); // undefined, because keyFunc !== function () {} ``` **Key differences:** * A `Map` is ordered and iterable, whereas a objects is not ordered and not iterable * We can put any type of data as a `Map` key, whereas objects can only have a number, string, or symbol as a key. * A `Map` inherits from `Map.prototype`. This offers all sorts of utility functions and properties which makes working with `Map` objects a lot easier. **⚝ [Try this example on CodeSandbox](https://codesandbox.io/s/js-object-vs-map-iodiyv?file=/src/index.js)** ## Q 11.17. What is shallow copy and deep copy in javascript? **1. Shallow Copy:** Shallow copy is a bit-wise 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. A Shallow copy of the object can be done using `object.assign()` **Example:** ```js // Shallow Copy let obj = { a: 10, b: 20, }; let objCopy = Object.assign({}, obj); console.log(objCopy); // Result - { a: 1, b: 2 } ``` **2. 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. A Deep copy of the object can be done using `JSON.parse(JSON.stringify(object))` **Example:** ```js // Deep Copy let obj2 = { a: 10, b: { c: 20 } }; let newObj = JSON.parse(JSON.stringify(obj2)); obj2.b.c = 30; console.log(obj2); // { a: 10, b: { c: 20 } } console.log(newObj); // { a: 10, b: { c: 20 } } ```
## Q 12.1. What is the difference between window and document object? **1. Window Object**: The window object is the topmost object of the DOM hierarchy. It represents a browser window or frame that displays the contents of the webpage. Whenever a window appears on the screen to display the contents of the document, the window object is created. **Syntax:** ```js window.property_name; ``` **Window Object Properties:** |Property |Description | |-----------------|---------------------------------------| |closed |Returns a boolean true if a window is closed.| |console |Returns the Console Object for the window.| |document |Returns the Document object for the window.| |frames |Returns all window objects running in the window.| |history |Returns the History object for the window.| |innerHeight |Returns the height of the window's content area (viewport) including scrollbars| |innerWidth |Returns the width of a window's content area (viewport) including scrollbars| |localStorage |Allows to save key/value pairs in a web browser. Stores the data with no expiration date| |location |Returns the Location object for the window.| |navigator |Returns the Navigator object for the window.| |opener |Returns a reference to the window that created the window| |outerHeight |Returns the height of the browser window, including toolbars/scrollbars| |outerWidth |Returns the width of the browser window, including toolbars/scrollbars| |pageXOffset |Returns the pixels the current document has been scrolled (horizontally) from the upper left corner of the window| |pageYOffset |Returns the pixels the current document has been scrolled (vertically) from the upper left corner of the window| |parent |Returns the parent window of the current window| |screen |Returns the Screen object for the window| |screenLeft |Returns the horizontal coordinate of the window relative to the screen| |screenTop |Returns the vertical coordinate of the window relative to the screen| |screenX |Returns the horizontal coordinate of the window relative to the screen| |screenY |Returns the vertical coordinate of the window relative to the screen| |sessionStorage |Allows to save key/value pairs in a web browser. Stores the data for one session| |scrollX |An alias of pageXOffset| |scrollY |An alias of pageYOffset| |self |Returns the current window| |top |Returns the topmost browser window| **2. Document Object:** The document object represent a web page that is loaded in the browser. By accessing the document object, we can access the element in the HTML page. The document object can be accessed with a `window.document` or just `document`. **Syntax:** ```js document.property_name; ``` **Document Object Properties:** |Property |Description | |---------------------|------------------------------------| |addEventListener() |Attaches an event handler to the document| |baseURI |Returns the absolute base URI of a document| |body |Sets or returns the document's body (the `` element)| |characterSet |Returns the character encoding for the document| |close() |Closes the output stream previously opened with document.open()| |cookie |Returns all name/value pairs of cookies in the document| |createAttribute() |Creates an attribute node| |createElement() |Creates an Element node| |createEvent() |Creates a new event| |createTextNode() |Creates a Text node| |defaultView |Returns the window object associated with a document, or null if none is available.| |designMode |Controls whether the entire document should be editable or not.| |doctype |Returns the Document Type Declaration associated with the document| |documentElement |Returns the Document Element of the document (the element)| |documentURI |Sets or returns the location of the document| |forms |Returns a collection of all `