{"id":13459402,"url":"https://github.com/learning-zone/javascript-basics","last_synced_at":"2025-05-15T05:04:33.861Z","repository":{"id":37500774,"uuid":"174074570","full_name":"learning-zone/javascript-basics","owner":"learning-zone","description":"JavaScript Basics ","archived":false,"fork":false,"pushed_at":"2024-08-07T07:40:49.000Z","size":3572,"stargazers_count":1788,"open_issues_count":0,"forks_count":633,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-04-03T21:09:34.675Z","etag":null,"topics":["es6-interview-questions","javascript","javascript-for-beginners","javascript-interview-questions","javascript-tutorials"],"latest_commit_sha":null,"homepage":"https://learning-zone.github.io/javascript-basics/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/learning-zone.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-06T04:59:32.000Z","updated_at":"2025-04-02T04:37:59.000Z","dependencies_parsed_at":"2024-01-13T18:09:52.220Z","dependency_job_id":"720d4366-bbef-4cb3-814a-67f7c42be260","html_url":"https://github.com/learning-zone/javascript-basics","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-zone%2Fjavascript-basics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-zone%2Fjavascript-basics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-zone%2Fjavascript-basics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-zone%2Fjavascript-basics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/learning-zone","download_url":"https://codeload.github.com/learning-zone/javascript-basics/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248388245,"owners_count":21095358,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6-interview-questions","javascript","javascript-for-beginners","javascript-interview-questions","javascript-tutorials"],"created_at":"2024-07-31T09:01:20.434Z","updated_at":"2025-04-11T11:46:58.748Z","avatar_url":"https://github.com/learning-zone.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# JavaScript Basics\n\n\u003e *Click \u0026#9733; if you like the project. Your contributions are heartily ♡ welcome.*\n\n\u003cbr/\u003e\n\n## Related Topics\n\n* *[HTML Basics](https://github.com/learning-zone/html-basics)*\n* *[CSS Basics](https://github.com/learning-zone/css-basics)*\n* *[JavaScript ES6 Basics](https://github.com/learning-zone/javascript-es6-basics)*\n* *[JavaScript Unit Testing](https://github.com/learning-zone/javascript-unit-testing)*\n* *[JavaScript Coding Practice](https://github.com/learning-zone/javascript-coding-practice)*\n* *[JavaScript Design Patterns](https://github.com/learning-zone/javascript-design-patterns)*\n* *[Data Structure in JavaScript](https://github.com/learning-zone/javascript-data-structure)*\n\n\u003cbr/\u003e\n\n## Table of Contents\n\n* [Introduction](#-1-introduction)\n* [Variables](#-2-variables)\n* [Data types](#-3-data-types)\n* [Operators](#-4-operators)\n* [Numbers](#-5-numbers)\n* [String](#-6-string)\n* [Array](#-7-array)\n* [Regular Expression](#-8-regular-expression)\n* [Functions](#-9-functions)\n* [Events](#-10-events)\n* [Objects](#-11-objects)\n* [Window and Document Object](#-12-window-and-document-object)\n* [Classes](#-13-classes)\n* [Error Handling](#-14-error-handling)\n* [Promises](#-15-promises)\n* [Collections](#-16-collections)\n* [Modules](#-17-modules)\n* [Miscellaneous](#-18-miscellaneous)\n\n\u003cbr/\u003e\n\n## # 1. Introduction\n\n\u003cbr/\u003e\n\n## Q 1.1. List out important features of JavaScript ES6?\n\n**1. Template Strings:**\n\nTemplate literals are string literals allowing embedded expressions.\n\n**Benefits:**\n\n* String interpolation\n* Embedded expressions\n* Multiline strings without hacks\n* String formatting\n* String tagging for safe HTML escaping, localization and more\n\n```js\n// String Substitution\nlet name = `Abhinav Sharma`;\nconsole.log(`Hi, ${name}`); // Output: \"Hi, Abhinav Sharma\"\n\n// Multiline String\nlet msg = `Hello \\n\nWorld`;\nconsole.log(`${msg}`); // Output: \"Hello World\"\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-template-strings-dwj699?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n**2. Spread Operator:**\n\nSpread operator allows iterables( arrays / objects / strings ) to be expanded into single arguments/elements. \n\n```js\nfunction sum(x, y, z) {\n return x + y + z;\n}\nconst numbers = [10, 20, 30];\n\n// Using Apply (ES5)\nconsole.log(sum.apply(null, numbers)); // 60\n\n// Using Spread Operator\nconsole.log(sum(...numbers)); // 60\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-spread-operator-25tmcf?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n**2.1. Copying an array:**\n\n```js\nconst fruits = [\"Apple\", \"Orange\", \"Banana\"];\nconst newFruitArray = [...fruits];\n\nconsole.log(newFruitArray); \n```\n\nOutput:\n\n```js\n['Apple', 'Orange', 'Banana']\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-spread-operator-wy1q0l?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n**2.2. Concatenating arrays:** \n\n```js\nconst arr1 = [\"A\", \"B\", \"C\"];\nconst arr2 = [\"X\", \"Y\", \"Z\"];\n\nconst result = [...arr1, ...arr2];\n\nconsole.log(result); \n```\n\nOutput:\n\n```js\n['A', 'B', 'C', 'X', 'Y', 'Z']\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-spread-operator-m7v6gg?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n**2.3. Spreading elements together with an individual element:**\n\n```js\nconst fruits = [\"Apple\", \"Orange\", \"Banana\"];\nconst newFruits = [\"Cherry\", ...fruits];\n\nconsole.log(newFruits); \n```\n\nOutput:\n\n```js\n['Cherry', 'Apple', 'Orange', 'Banana']\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-spread-operator-16l7oh?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n**2.4. Spreading elements on function calls:**\n\n```js\nconst fruits = [\"Apple\", \"Orange\", \"Banana\"];\n\nconst getFruits = (f1, f2, f3) =\u003e {\n console.log(`Fruits: ${f1}, ${f2} and ${f3}`);\n};\n\ngetFruits(...fruits); \n```\n\nOutput:\n\n```js\nFruits: Apple, Orange and Banana\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-spread-operator-jdhoe6?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n**2.5. Spread syntax for object literals:**\n\n```js\nconst obj1 = { id: 101, name: 'Rajiv Sandal' }\nconst obj2 = { age: 35, country: 'INDIA' }\n\nconst employee = { ...obj1, ...obj2 }\n\nconsole.log(employee);\n```\n\nOutput:\n\n```js\n{\n \"id\": 101,\n \"name\": \"Rajiv Sandal\",\n \"age\": 35,\n \"country\": \"INDIA\"\n}\n```\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n**3. Sets:** \n\nSets 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.\n\n```js\nconst numbers = new Set([10, 20, 20, 30, 40, 50]);\n\nconsole.log(numbers); Set(5) { 10, 20, 30, 40, 50 }\nconsole.log(typeof numbers); // Object\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-sets-chwvp0)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n**4. Default Parametrs:**\n\n```js\nfunction add(x = 10, y = 20) {\n console.log(x + y);\n}\n\nadd(10, 30); // Output: 10 + 30 = 40\nadd(15); // Output: 15 + 20 = 35\nadd(); // Output: 10 + 20 = 30\n\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-default-parametrs-tjw9uk?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n**5. repeat():** \n\nThe `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.\n\n```js\nconst msg = \"Hello World \\n\";\n\nconsole.log(`${msg.repeat(3)}`);\n```\n\nOutput:\n\n```js\nHello World\nHello World\nHello World\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-repeat-d3ko3z?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n**6. Arrow Function (=\u003e):**\n\n```js\nconst add = (x, y) =\u003e x + y;\n\nconsole.log(add(10, 20)); // 30\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-arrow-function-ejlrmf?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n**7. Arrow function with `this`**\n\n```js\n/**\n * Using Arrow function\n */\nconst person = {\n name: \"Diksha\",\n actions: [\"bike\", \"hike\", \"ski\"],\n printActions() {\n this.actions.forEach((action) =\u003e {\n console.log(this.name + \" likes to \" + action);\n });\n },\n};\n\nperson.printActions();\n```\n\nOutput:\n\n```js\nDiksha likes to bike \nDiksha likes to hike \nDiksha likes to ski\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-arrow-function-kh1v84?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n**8. Destructing Assignment:**\n\n```js\n// Destructing Assignment\nconst { title, price, description } = {\n title: \"iPhone\",\n price: 999,\n description: \"The iPhone is a smartphone developed by Apple\"\n};\n\nconsole.log(title); // iPhone\nconsole.log(price); // 999\nconsole.log(description); // The iPhone is a smartphone developed by Apple\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-destructing-assignment-0c0fzl?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n**9. Generators:** \n\nA 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`.\n\n```js\nfunction* generator(num) {\n yield num + 10;\n yield num + 20;\n yield num + 30;\n}\nconst gen = generator(10);\n\nconsole.log(gen.next().value); // 20\nconsole.log(gen.next().value); // 30\nconsole.log(gen.next().value); // 40\n``` \n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-generators-pboss2?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n**10. Symbols:** \n\nThey 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).\n\n```js\nconst symbol1 = Symbol();\nconst symbol2 = Symbol(42);\nconst symbol3 = Symbol(\"Hi\");\n\nconsole.log(typeof symbol1); // symbol\nconsole.log(symbol3.toString()); // Symbol(Hi)\nconsole.log(Symbol(\"Hi\") === Symbol(\"Hi\")); // false\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-symbols-5oedjv?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n**11. Iterator:** \n \nThe iterable is a interface that specifies that an object can be accessible if it implements a method who is key is `[symbol.iterator]`.\n\n```js\nconst title = \"ES6\";\nconst iterateIt = title[Symbol.iterator]();\n\nconsole.log(iterateIt.next().value); //output: E\nconsole.log(iterateIt.next().value); //output: S\nconsole.log(iterateIt.next().value); //output: 6\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-iterator-ceqbrw?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 2. VARIABLES\n\n\u003cbr/\u003e\n\n## Q 2.1. What are global variables?\n\nGlobal 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.\n\nThe `var` **statement** declares a function-scoped or globally-scoped variable, optionally initializing it to a value.\n\n**Example:**\n\n```js\nvar x = 10;\n\nif (x === 10) {\n var x = 20;\n\n console.log(x); // expected output: 20\n}\n\nconsole.log(x); // expected output: 20\n```\n\n**Example:** Declaring global variable within function\n\n```js\nwindow.value = 90;\n\n// Declaring global variable by window object\nfunction setValue() {\n window.value = 100;\n}\n\n// Accessing global variable from other function\nfunction getValue() {\n setValue();\n return window.value;\n}\n\nconsole.log(getValue()); // 100\n```\n\n**Using Undeclared Variables:**\n\n* In strict mode, if you attempt to use an undeclared variable, you\\'ll get a reference error when you run your code. \n* 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!\n* 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.\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-global-variables-b4isqk?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 2.2. What are template literals in es6?\n\nTemplate literals help make it simple to do string interpolation, or to include variables in a string.\n\n```js\nconst person = { name: 'Tyler', age: 28 };\n\nconsole.log(`Hi, my name is ${person.name} and I am ${person.age} years old!`);\n// 'Hi, my name is Tyler and I am 28 years old!'\n```\n\nTemplate 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:\n\n```js\nconsole.log(`This is line one.\nThis is line two.`);\n// This is line one.\n// This is line two.\n```\n\nAnother use case of template literals would be to use as a substitute for templating libraries for simple variable interpolations:\n\n```js\nconst person = { name: 'Tyler', age: 28 };\n\ndocument.body.innerHTML = `\n \u003cdiv\u003e\n \u003cp\u003eName: ${person.name}\u003c/p\u003e\n \u003cp\u003eName: ${person.age}\u003c/p\u003e\n \u003c/div\u003e\n`\n```\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 2.3. What are the differences between variables created using `let`, `var` or `const`?\n\nVariables 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).\n\n```js\n/**\n * All variables are accessible within functions.\n */\nfunction variableScope() {\n\n var x = 10;\n let y = 20;\n const z = 30;\n\n console.log(x); // 10\n console.log(y); // 20\n console.log(z); // 30\n}\n\nconsole.log(x); // ReferenceError: x is not defined\nconsole.log(y); // ReferenceError: y is not defined\nconsole.log(z); // ReferenceError: z is not defined\n\nvariableScope();\n```\n\n```js\n/**\n * var declared variables are accessible anywhere in the function scope.\n */\nif (true) {\n var a = 10;\n let b = 20;\n const c = 30;\n}\n\nconsole.log(a); // 10\nconsole.log(b); // ReferenceError: b is not defined\nconsole.log(c); // ReferenceError: c is not defined\n```\n\n`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.\n\n```js\nconsole.log(a); // undefined\nvar a = 'foo';\n\nconsole.log(b); // ReferenceError: can't access lexical declaration 'b' before initialization\nlet b = 'baz';\n\nconsole.log(c); // ReferenceError: can't access lexical declaration 'c' before initialization\nconst c = 'bar';\n```\n\nRedeclaring a variable with `var` will not throw an error, but 'let' and 'const' will.\n\n```js\nvar a = 'foo';\nvar a = 'bar';\nconsole.log(a); // \"bar\"\n\nlet b = 'baz';\nlet b = 'qux'; // Uncaught SyntaxError: Identifier 'b' has already been declared\n```\n\n`let` and `const` differ in that `let` allows reassigning the variable's value while `const` does not.\n\n```js\n// This is ok.\nlet a = 'foo';\na = 'bar';\nconsole.log(a); // bar\n\n// This causes an exception.\nconst b = 'baz';\nb = 'qux';\nconsole.log(b) // TypeError: Assignment to constant variable.\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-variables-declaration-fmrkjz?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 2.4. What is Hoisting in JavaScript?\n\nJavaScript **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.\n\nHoisting allows functions to be safely used in code before they are declared.\n\n**Example 01:** Function Hoisting\n\nOne of the advantages of hoisting is that it lets you use a function before you declare it in your code.\n\n```js\ngetName(\"Sadhika Sandal\");\n\nfunction getName(name) {\n console.log(\"Hello \" + name);\n}\n```\n\nOutput:\n\n```js\nHello Sadhika Sandal\n```\n\n**Example 02:** Variable Hoisting \n\n```js\nconsole.log(message); // output: undefined\nvar message = \"The variable Has been hoisted\";\n```\n\nThe above code looks like as below to the interpreter,\n\n```js\nvar message;\nconsole.log(message);\nmessage = \"The variable Has been hoisted\";\n```\n\n**Example 03:** `let` and `const` hoisting\n\nAll 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.\n\n```js\nconsole.log(x);\nlet x = 10;\n\n// Output: ReferenceError: x is not defined\n```\n\nThey 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.\n\n*Note: JavaScript only hoists declarations, not initialisation*\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-hoisting-l745nc?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 2.5. In which case the function definition is not hoisted in JavaScript?\n\nLet us take the following **function expression**\n\n```js\nvar foo = function foo() {\n return 12;\n}\n```\n\nIn 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:\n\n```js\nfoo(); // Here foo is still undefined\nvar foo = function foo() {\n return 12;\n};\n```\n\nThe code above behind the scene look something like this:\n\n```js\nvar foo = undefined;\nfoo(); // Here foo is undefined\nfoo = function foo() {\n // Some code stuff\n}\n```\n\n```js\nvar foo = undefined;\nfoo = function foo() {\n // Some code stuff\n}\nfoo(); // Now foo is defined here\n```\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 2.6. What is the Temporal Dead Zone in ES6?\n\nIn 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.\n\nReferencing 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.\n\n```js\nconsole.log(aVar); // undefined\nconsole.log(aLet); // causes ReferenceError: aLet is not defined\n\nvar aVar = 1;\nlet aLet = 2;\n```\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 2.7. What is the purpose of double exclamation?\n\nThe 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`.\n\nFor example, you can test IE version using this expression as below,\n\n```js\nlet isIE11 = false;\nisIE11 = !!navigator.userAgent.match(/Trident.*rv[ :]*11\\./);\nconsole.log(isIE11); // returns true or false\n```\n\nIf you do not use this expression then it returns the original value.\n\n```js\nconsole.log(navigator.userAgent.match(/Trident.*rv[ :]*11\\./)); // returns either an Array or null\n```\n\n*Note: The expression !! is not an operator, but it is just twice of ! operator*.\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 2.8. In JavaScript, what is the difference between `var x = 1` and `x = 1`?\n\n`var x = 1`:\n\n* Allowed in 'strict mode'.\n* The var statement declares a function-scoped or globally-scoped variable, optionally initializing it to a value.\n* Variables declared using var inside a { } block can be accessed from outside the block.\n* Variables defined using var inside a function are not accessible (visible) from outside the function.\n* 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.\n\n```js\nvar x = 1;\n\nif (x === 1) {\n var x = 2;\n\n console.log(x); // expected output: 2\n}\n\nconsole.log(x); // expected output: 2\n```\n\n```js\nvar x = 5; // global\nfunction someThing(y) {\n var x = 3; // local\n var z = x + y;\n console.log(z);\n}\nsomeThing(4); // 7\nconsole.log(x); // 5\n```\n\n`x = 1`:\n\n* Not allowed in 'strict mode'.\n* Undeclared Variables like: x = 1 is accessible in: (Block scope - Function scope - Global scope)\n* 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!\n* Global variables created in this accidental way are like global variables declared with var: they define properties of the global object.\n* Unlike the properties defined by proper var declarations, these properties can be deleted with the delete operator.\n* Not recommended.\n\n```js\nvar x = 5; // global\nfunction someThing(y) {\n x = 1; // still global!\n var z = x + y;\n console.log(z);\n}\nsomeThing(4) // 5\nconsole.log(x) // 1\n```\n\n**Example:**\n\n```js\n{\n console.log(x + y); // NaN\n var x = 1;\n var y = 2;\n}\n```\n\n```js\n{\n console.log(x + y); // Uncaught ReferenceError: x is not defined\n x = 1;\n y = 2;\n}\n```\n\n\u003cbr/\u003e\n\n| | var x = 1 | x = 1 |\n|:---: | :---: | :---:|\n|Strict mode | \u0026#10004; | \u0026#10060; |\n|Block scope | \u0026#10060; | \u0026#10004; |\n|Function scope | \u0026#10004; | \u0026#10004; |\n|Global scope | \u0026#10004; | \u0026#10004; |\n|Hoisting | \u0026#10004; | \u0026#10060; |\n|Reassigning | \u0026#10004; | \u0026#10004; |\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 2.9. How do you assign default values to variables?\n\nYou can use the logical or operator `||` in an assignment expression to provide a default value.\n\n**Syntax:**\n\n```js\nvar a = b || c;\n```\n\nAs 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'.\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 2.10. What is the precedence order between local and global variables?\n\nA local variable takes precedence over a global variable with the same name.\n\n```js\nvar msg = \"Good morning\";\n\nfunction greeting() {\n msg = \"Good Evening\";\n console.log(msg);\n}\ngreeting();\n```\n\nOutput:\n\n```js\nGood Evening\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-precedence-n1ve75?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 2.11. What is variable shadowing in javascript?\n\nVariable 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.\n\nIf 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.\n\n**Example:**\n\n```js\n/**\n * Variable Shadowing\n */\nvar val = 10;\n\nfunction Hoist(val) {\n console.log(val);\n}\nHoist(20); // 20\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-variable-shadowing-dvibcw?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 2.12. Explain `var self = this` in JavaScript?\n\nThe **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 ).\n\n`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.\n\n**Example:**\n\n```js\n/**\n * this Context\n */\nconst context = {\n prop: 10,\n getCurrentContext: function () {\n return this.prop;\n }\n};\n\nconsole.log(context.getCurrentContext()); // 10\n```\n\n*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.*\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-self-this-k1w0e8?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 2.13. How do you swap variables using destructuring assignment?\n\n```js\nvar x = 10, y = 20;\n\n[x, y] = [y, x];\n\nconsole.log(x); // 20\nconsole.log(y); // 10\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-destructuring-sv99cd?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 2.14. What is scope chain in javascript?\n\nThe 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.\n\n**Example:**:\n\n```js\nlet globalVar = \"I'm a global variable\";\n\nfunction outer() {\n let outerVar = \"I'm an outer variable\";\n\n function inner() {\n let innerVar = \"I'm an inner variable\";\n console.log(innerVar); // \"I'm an inner variable\"\n console.log(outerVar); // \"I'm an outer variable\"\n console.log(globalVar); // \"I'm a global variable\"\n }\n\n inner();\n}\n\nouter();\n```\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 3. DATA TYPES\n\n\u003cbr/\u003e\n\n## Q 3.1. What are data types in javascript?\n\nThere are eight basic data types in JavaScript.\n\n|Data Types\t | Description\t |Example |\n|-------------|--------------------------------------|----------------------------|\n|String\t |Represents textual data\t |let str = 'Hi', let str2 = \"Hello\", let str3 = \\`Hello World\\`|\n|Number\t |An integer or a floating-point number |let num = 3, let num2 = 3.234, let num3 = 3e-2 |\n|BigInt\t |An integer with arbitrary precision\t |let num = 900719925124740999n, let num = 1n |\n|Boolean\t |Any of two values: true or false\t |let flag = true |\n|undefined\t |A data type whose variable is not initialized\t|let a; |\n|null\t |Denotes a null value\t |let a = null; |\n|Symbol\t |Data type whose instances are unique and immutable|let value = Symbol('hello');|\n|Object\t |key-value pairs of collection of data\t|let student = { }; |\n\n**String:**\n\n`String` is used to store text. In JavaScript, strings are surrounded by quotes:\n\n* Single quotes: 'Hello'\n* Double quotes: \"Hello\"\n* Backticks: \\`Hello\\`\n\n**Example:**:\n\n```js\n// Strings\nconst firstName = \"Mukul\";\nconst lastName = \"Mittal\";\nconst result = `Name: ${firstName} ${lastName}`;\n\nconsole.log(result); // Name: Mukul Mittal\n```\n\n**Number:**\n\nNumber represents integer and floating numbers (decimals and exponentials). A number type can also be `+Infinity`, `-Infinity`, and `NaN` (not a number).\n\n```js\nconst number1 = 3;\nconst number2 = 3.433;\nconst number3 = 3e5; // 3 * 10^5\n\nconst number4 = 3 / 0;\nconsole.log(number4); // Infinity\n\nconst number5 = -3 / 0;\nconsole.log(number5); // -Infinity\n\n// strings can't be divided by numbers\nconst number6 = \"abc\" / 3;\nconsole.log(number6); // NaN\n```\n\n**BigInt:**\n\nIn JavaScript, Number type can only represent numbers less than (2\u003csup\u003e53\u003c/sup\u003e - 1) and more than -(2\u003csup\u003e53\u003c/sup\u003e - 1). However, if you need to use a larger number than that, you can use the BigInt data type.\n\nA BigInt number is created by appending `n` to the end of an integer.\n\n```js\n// BigInt value\nconst num1 = 100000000000000000n;\nconst num2 = 1000000000000000000n;\nconst num3 = 10;\n\n// Adding two big integers\nconst result1 = num1 + num2;\nconsole.log(result1); // \"1100000000000000000n\"\n\n// Error! BitInt and number cannot be added\nconst result2 = num1 + num2 + num3;\nconsole.log(result2); // Uncaught TypeError: Cannot mix BigInt and other types\n```\n\n**Boolean:**\n\nThis data type represents logical entities. Boolean represents one of two values: `true` or `false`. \n\n```js\nconst dataChecked = true;\nconst valueCounted = false;\n```\n\n**undefined:**\n\nThe 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. \n\n```js\nlet name;\nconsole.log(name); // undefined\n\nlet name = undefined;\nconsole.log(name); // undefined\n```\n\n**null:**\n\nIn JavaScript, `null` is a special value that represents empty or unknown value.\n\n```js\nconst number = null;\n```\n\n**Symbol:**\n\nA value having the data type Symbol can be referred to as a symbol value. Symbol is an immutable primitive value that is unique.\n\n```js\n// Two symbols with the same description\n\nconst value1 = Symbol('hello');\nconst value2 = Symbol('hello');\n\nlet result = (value1 === value2) ? true : false; // false;\n\n// Note: Though value1 and value2 both contain 'hello', they are different as they are of the Symbol type.\n```\n\n**Object:**\n\nAn object is a complex data type that allows us to store collections of data. \n\n```js\nconst employee = {\n firstName: 'John',\n lastName: 'K',\n email: 'john.k@gmail.com'\n};\n```\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 3.2. What is `undefined` property?\n\nThe 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.\n\n```js\nvar user; // Value is undefined, type is undefined\nconsole.log(typeof(user)) //undefined\n```\n\nAny variable can be emptied by setting the value to undefined.\n\n```js\nuser = undefined\n```\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 3.3. What is difference between `null` vs `undefined`?\n\n**Null:**\n\n`Null` means an empty or non-existent value. Null is assigned, and explicitly means nothing.\n\n```js\nvar test = null;\nconsole.log(test); // null\n```\n\n`null` is also an object. Interestingly, this was actually an error in the original JavaScript implementation:\n\n```js\nconsole.log(typeof test); // object\n```\n\n**Undefined:**\n\nUndefined means a variable has been declared, but the value of that variable has not yet been defined. For example:\n\n```js\nvar test2;\nconsole.log(test2); // undefined\n```\n\nUnlike null, undefined is of the type undefined:\n\n```js\nconsole.log(typeof test2); // undefined\n```\n\n**Difference:**\n\n| Null | Undefined |\n|---- | -----------|\n| 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. |\n| Type of null is object | Type of undefined is undefined |\n| 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.|\n| Indicates the absence of a value for a variable | Indicates absence of variable itself |\n| Converted to zero (0) while performing primitive operations | Converted to NaN while performing primitive operations |\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 3.4. What is Coercion in JavaScript?\n\nType 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.\n\n```js\nconst value1 = '10';\nconst value2 = 20;\n\nlet sum = value1 + value2;\n\nconsole.log(sum);\n```\n\nIn 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.\n\n```js\n// Example of explicit coercion\nconst value1 = '10';\nconst value2 = 20;\n\nlet sum = Number(value1) + value2;\n\nconsole.log(sum);\n```\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 4. OPERATORS\n\n\u003cbr/\u003e\n\n## Q 4.1. What are various operators supported by javascript?\n\nAn operator is capable of manipulating(mathematical and logical computations) a certain value or operand. There are various operators supported by JavaScript as below,\n\n**Arithmetic Operators:**\n\nArithmetic operators are used to perform mathematical operations between numeric operands.\n\n|Operators|Description | Example ( say `let x = 10, y = 20;`) |\n|--------|------------------------|-------------|\n| + |Adds two numeric operands.| x + y |\n| - |Subtract right operand from left operand| y - x|\n| * |Multiply two numeric operands.| x * y|\n| / |Divide left operand by right operand.| y / x|\n| % |Modulus operator. Returns remainder of two operands.| x % 2|\n| ++ |Increment operator. Increase operand value by one.| x++|\n| -- |Decrement operator. Decrease value by one.| x--|\n\n**Comparison Operators:**\n\nJavaScript provides comparison operators that compare two operands and return a boolean value `true` or `false`.\n\n|Operators|\tDescription|\n|---------|-------------|\n|== |Compares the equality of two operands without considering type.|\n|=== |Compares equality of two operands with type.|\n|!= |Compares inequality of two operands.|\n|\u003e |Returns a boolean value true if the left-side value is greater than the right-side value; otherwise, returns false.|\n|\u003c |Returns a boolean value true if the left-side value is less than the right-side value; otherwise, returns false.|\n|\u003e= |Returns a boolean value true if the left-side value is greater than or equal to the right-side value; otherwise, returns false.|\n|\u003c= |Returns a boolean value true if the left-side value is less than or equal to the right-side value; otherwise, returns false.|\n\n**Logical Operators:**\n\nThe logical operators are used to combine two or more conditions.\n\n**1. \u0026\u0026** - 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\n\n**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.\n\n**3. !** - is known as NOT operator. It reverses the boolean result of the operand (or condition). !false returns true, and !true returns false.\n\n**Assignment Operators:**\n\nThe assignment operators to assign values to variables with less key strokes.\n\n|Operators | Description |\n|----|--------------------|\n|= |Assigns right operand value to the left operand.|\n|+= |Sums up left and right operand values and assigns the result to the left operand.|\n|-= |Subtract right operand value from the left operand value and assigns the result to the left operand.|\n|*= |Multiply left and right operand values and assigns the result to the left operand.|\n|/= |Divide left operand value by right operand value and assign the result to the left operand.|\n|%= |Get the modulus of left operand divide by right operand and assign resulted modulus to the left operand.|\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 4.2. What are the bitwise operators available in javascript?\n\nBelow are the list of bit-wise logical operators used in JavaScript\n\n|Operator\t | Usage\t | Description |\n|------------|---------|-----------------------|\n|Bitwise AND |\ta \u0026 b\t |Returns a one in each bit position for which the corresponding bits of both operands are ones.|\n|Bitwise OR\t |a | b\t |Returns a one in each bit position for which the corresponding bits of either or both operands are ones.|\n|Bitwise XOR |\ta ^ b\t |Returns a one in each bit position for which the corresponding bits of either but not both operands are ones.|\n|Bitwise NOT |\t~ a\t |Inverts the bits of its operand.|\n|Left shift\t |a \u003c\u003c b\t |Shifts a in binary representation b (\u003c 32) bits to the left, shifting in zeroes from the right.|\n|Sign-propagating right shift|\ta \u003e\u003e b |Shifts a in binary representation b (\u003c 32) bits to the right, discarding bits shifted off.|\n|Zero-fill right shift |\ta \u003e\u003e\u003e b\t | Shifts a in binary representation b (\u003c 32) bits to the right, discarding bits shifted off, and shifting in zeroes from the left.|\n\n**Examples:**\n\n|Operation|\tResult\t |Same as\t |Result |\n|---------|-----------|-------------|----------|\n|5 \u0026 1 | 1\t |0101 \u0026 0001\t|0001 |\n|`5 | 1` \t| 5 |0101 | 0001 |0101 |\n|`~ 5` |-6\t |~0101\t |1010 |\n|`5 \u003c\u003c 1`\t| 10 |0101 \u003c\u003c 1 \t|1010 |\n|`5 ^ 1`\t| 4 |0101 ^ 0001 |0100 |\n|`5 \u003e\u003e 1`\t| 2\t |0101 \u003e\u003e 1\t |0010 |\n|5 \u003e\u003e\u003e 1\t| 2\t |0101 \u003e\u003e\u003e 1\t |0010 |\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-bitwise-operators-nnz00d?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 4.3. What is the difference between == and === operators?\n\nJavaScript 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,\n\n1. Two strings are strictly equal when they have the same sequence of characters, same length, and same characters in corresponding positions.\n2. Two numbers are strictly equal when they are numerically equal. i.e, Having the same number value.\n There are two special cases in this,\n 1. NaN is not equal to anything, including NaN.\n 2. Positive and negative zeros are equal to one another.\n3. Two Boolean operands are strictly equal if both are true or both are false.\n4. Two objects are strictly equal if they refer to the same Object.\n5. Null and Undefined types are not equal with ===, but equal with ==. i.e,\n null===undefined --\u003e false but null==undefined --\u003e true\n\n**Example:**\n\n```js\n0 == false // true\n0 === false // false\n1 == \"1\" // true\n1 === \"1\" // false\nnull == undefined // true\nnull === undefined // false\n\"0\" == false // true\n\"0\" === false // false\n[] === [] // false, refer different objects in memory\n{} === {} // false, refer different objects in memory\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-comparison-0y16ii?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 4.4. What is typeof operator?\n\nIn 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.\n\n**Example:**\n\n```js\nconsole.log(typeof undeclaredVariable); // \"undefined\"\n\nlet a;\nconsole.log(typeof a); // \"undefined\"\n\nconst b = \"Hello World\";\nconsole.log(typeof b); // \"string\"\n\nconst c = 42;\nconsole.log(typeof c); // \"number\"\n\nconst d = 3.1415;\nconsole.log(typeof d); // \"number\"\n\nconst e = true;\nconsole.log(typeof e); // \"boolean\"\n\nconst f = null;\nconsole.log(typeof f); // \"object\"\n\nconst g = undefined;\nconsole.log(typeof g); // \"undefined\"\n\nconst h = { b: \"c\" };\nconsole.log(typeof h); // \"object\"\n\nconst i = function () {\n return 10;\n};\n\nconsole.log(typeof i); // \"function\"\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-typeof-jesw53?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 4.5. What is an Unary operator?\n\nThe 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.\n\n**Example:**\n\n```js\nvar x = \"100\";\nvar y = +x;\nconsole.log(typeof x, typeof y); // string, number\n\nvar a = \"Hello\";\nvar b = +a;\nconsole.log(typeof a, typeof b, b); // string, number, NaN\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-unary-operator-ld2luh?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 4.6. What is the purpose of delete operator?\n\nThe delete keyword is used to delete the property as well as its value.\n\n```js\nvar user = {name: \"Sadhika Chaudhuri\", age: 24};\ndelete user.age;\n\nconsole.log(user); // {name: \"Sadhika Chaudhuri\"}\n```\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 4.7. What is a conditional operator in javascript?\n\nThe conditional (ternary) operator is the only JavaScript operator that takes three operands which acts as a shortcut for if statement.\n\n**Syntax:**\n\n```js\n\u003ccondition\u003e ? \u003cvalue1\u003e : \u003cvalue2\u003e;\n```\n\n**Example:**\n\n```js\nconst isAuthenticated = false;\n\nconsole.log(isAuthenticated ? 'Hello, welcome' : 'Sorry, you are not authenticated');\n```\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 4.8. Can you apply chaining on conditional operator?\n\nYes, you can apply chaining on conditional operator similar to if … else if … else if … else chain.\n\n**Example:**\n\n```js\nfunction getValue(someParam) {\n return condition1 ? value1\n : condition2 ? value2\n : condition3 ? value3\n : value4;\n}\n\n// The above conditional operator is equivalent to:\nfunction getValue(someParam) {\n if (condition1) {\n return value1;\n } else if (condition2) {\n return value2;\n } else if (condition3) {\n return value3;\n } else {\n return value4;\n }\n}\n```\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 4.9. What is the difference between `typeof` and `instanceof` operator?\n\nThe `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).\n\n**Example:**\n\n```js\nconst x = \"Hello World\";\nconst y = new String(\"Hello World\");\n\ntypeof x; // returns 'string'\ntypeof y; // returns 'object'\n```\n\nThe `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.\n\n```js\nconst a = \"Hello World\";\nconst b = new String(\"Hello World\");\n\na instanceof String; // returns false\nb instanceof String; // returns true\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-typeof-operator-9uejl1?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 4.10. What is the output of below spread operator array?\n\n```js\n[...'Hello']\n```\n\n**Output**: ['H', 'e', 'l', 'l', 'o'] \n\n**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.\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 5. NUMBERS\n\n\u003cbr/\u003e\n\n## Q 5.1. How do you generate random integers?\n\nThe `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,\n\n```js\n// Example 01:\nMath.random(); // returns a random integer between 0 to 1\n\n// Example 02:\nMath.floor(Math.random() * 100) + 1; // returns a random integer from 1 to 100\n\n// Example 03:\nfunction getRandomNumber(max) {\n return Math.floor(Math.random() * max) + 1;\n}\n\nconsole.log(getRandomNumber(10)); // returns a random integer from 1 to 10\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-random-number-slllvd?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 5.2. What is isNaN?\n\nThe `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.\n\n```js\nisNaN('Hello') // true\n\nisNaN('100') // false\n\ntypeof NaN // Number\n\nNumber.isNaN('Hello'); // false\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-isnan-6w1huz?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 5.3. What is the purpose of isFinite function?\n\nThe 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.\n\n```js\nisFinite(Infinity); // false\nisFinite(NaN); // false\nisFinite(-Infinity); // false\n\nisFinite(100); // true\nisFinite(1/0); // false\n\nNumber.isFinite(0 / 0); // false\nNumber.isFinite(null); // false\nNumber.isFinite(\"123\") // false\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-isfinite-5sl988?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 5.4. Explain NEGATIVE_INFINITY in JavaScript?\n\nThe `Number.NEGATIVE_INFINITY` property represents the negative Infinity value.\n\n**Syntax:**\n\n```js\nNumber.NEGATIVE_INFINITY\n```\n\n* Negative infinity is a number in javascript, which is derived by 'dividing negative number by zero'.\n* A number object needs not to be created to access this static property.\n* The value of negative infinity is the same as the negative value of the infinity property of the global object.\n\n```js\n/**\n * NEGATIVE_INFINITY\n */\n\nconsole.log(-10/0); // -Infinity\nconsole.log(Number.NEGATIVE_INFINITY); // -Infinity\nconsole.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity\nconsole.log(-2 * Number.MAX_VALUE); // -Infinity\n\nconsole.log(\"Math.pow(10, 1000): \" + Math.pow(10, 1000)); // Infinity \nconsole.log(\"Math.log(0): \" + Math.log(0)); // -Infinity\n\nconsole.log(Number.NEGATIVE_INFINITY === -2 * Number.MAX_VALUE); // true\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-negative-infinity-1gmh0r?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 6. STRING\n\n\u003cbr/\u003e\n\n## Q 6.1. What is the difference between slice and splice?\n\n**1. slice():**\n\nThe `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).\n\n**Example:**\n\n```js\nlet languages = [ \"JavaScript\", \"Python\", \"Java\", \"PHP\" ];\n\nlanguages.slice(1,3); // [\"Python\", \"Java\"]\nlanguages.slice(2); // (from index 2 until the end of the array).\n// [\"Java\", \"PHP\"]\n\nconsole.log(languages); // the original array is not mutated.\n// [ \"JavaScript\", \"Python\", \"Java\", \"PHP\" ]\n```\n\n**2. splice():**\n\nThe `splice()` method changes the content of the array in place and can be used to add or remove items from the array.\nWhen only one argument is provided, all the items after the provided starting index are removed from the array.\n\n**Example:**\n\n```js\nlet numbers = [10, 20, 30];\n\nnumbers.splice(2, 1, 40, 50); // returns removed array:[30]\n\nconsole.log(numbers); // Original array is mutated.\n// returns: [10, 20, 40, 50]\n```\n\n**Difference:**\n\n| Slice | Splice |\n|---- | ---------|\n| Doesn't modify the original array(immutable) | Modifies the original array(mutable) |\n| Returns the subset of original array | Returns the deleted elements as array |\n| Used to pick the elements from array | Used to insert or delete elements to/from array|\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-slice-vs-splice-xm7c54?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 6.2. How do you check whether a string contains a substring?\n\nThere are 3 fastest ways to check whether a string contains a substring or not, \n\n**1. Using RegEx:**\n\nThe 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`.\n\n```js\nlet str = \"JavaScript, Node.js, Express.js, React.js, MongoDB\";\nlet exp1 = /MongoDB/g;\nlet exp2 = /Ajax/;\n\nexp1.test(str); // true\nexp2.test(str); // false\n```\n\n**2. Using indexOf:**\n\nThe `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).\n\n```js\nlet str = \"JavaScript, Node.js, Express.js, React.js, MongoDB\";\n\nstr.indexOf('MongoDB') !== -1 // true\nstr.indexOf('PHP') !== -1 // false\nstr.indexOf('Node', 5) !== -1 // true\n```\n\n**3. Using includes:**\n\nThe `includes()` is also case-sensitive and accepts an optional second parameter, an integer which indicates the position where to start searching for.\n\n```js\nlet str = \"JavaScript, Node.js, Express.js, React.js, MongoDB\";\n\nstr.includes('MongoDB') // true\nstr.includes('PHP') // false\nstr.includes('Node', 5) //true\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-substring-su64zr?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 6.3. How do you trim a string in javascript?\n\nThe `trim()` method removes whitespace from both sides of a string. JavaScript provides 3 simple functions on how to trim strings.\n\n**1. string.trim():**\n\nThe `string.trim()` removes sequences of whitespaces and line terminators from both the start and the end of the string.\n\n```js\nconst name = \" Karan Talwar \";\nconsole.log(name.trim()); // =\u003e 'Karan Talwar'\n\nconst phoneNumber = \"\\t 80-555-123\\n \";\nconsole.log(phoneNumber.trim()); // =\u003e '80-555-123'\n```\n\n**2. string.trimStart():**\n\nThe `string.trimStart()` removes sequences of whitespaces and line terminators only from the start of the string.\n\n```js\nconst name = \" Karan Talwar \";\nconsole.log(name.trimStart()); // =\u003e \"Karan Talwar \"\n\nconst phoneNumber = \"\\t 80-555-123\\n \";\nconsole.log(phoneNumber.trimStart()); // =\u003e \"80-555-123 \"\n```\n\n**3. string.trimEnd():**\n\nThe `string.trimEnd()` removes sequences of whitespaces and line terminators only from the end of the string.\n\n```js\nconst name = \" Karan Talwar \";\nconsole.log(name.trimEnd()); // =\u003e \" Karan Talwar\"\n\nconst phoneNumber = \"\\t 80-555-123\\n \";\nconsole.log(phoneNumber.trimEnd()); // =\u003e \" 80-555-123\"\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-trim-4mo5bi?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 6.4. What is eval function in javascript?\n\nThe `eval()` function evaluates JavaScript code represented as a string. The string can be a JavaScript expression, variable, statement, or sequence of statements.\n\n```js\nconsole.log(eval('10 + 20')); // 30\n\nlet x = 10;\nlet y = 20;\nlet z = '50';\neval('x + y + 1'); // returns 31\neval(z); // returns 50\n```\n\nIf 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.\n\n```js\neval(new String('10 + 20')); // returns a String object containing \"10 + 20\"\neval('10 + 20'); // returns 30\n\n\n// work around\nlet expression = new String('10 + 20');\neval(expression.toString()); // returns 30\n```\n\nWarning: *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().*\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-eval-p9fxgs?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 6.5. How do you check if a string starts with another string?\n\nYou 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,\n\n```js\nlet str = \"Hello World\";\n\nconsole.log(str.startsWith(\"Hello\")); // true\nconsole.log(str.startsWith(\"World\")); // false\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-startswith-tvq7i5?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 7. ARRAY\n\n\u003cbr/\u003e\n\n## Q 7.1. Explain arrays in JavaScript?\n\nJavaScript 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.\n\n**Syntax:**\n\n```js\nconst array_name = [item-1, item-2, item-3, ...]; \n```\n\n**Example 01:** Creating an array\n\n```js\n// array of numbers\nconst numbers = [10, 20, 30, 40, 50];\n\n// using new keyword\nconst numbers = new Array(10, 20, 30, 40, 50);\n\n// array of strings\nlet fruits = [\"Apple\", \"Orange\", \"Plum\", \"Mango\"];\n```\n\n**Example 02:** Accessing array elements\n\n```js\nlet fruits = [\"Apple\", \"Orange\", \"Plum\", \"Mango\"];\n\nfruits[0]; // Apple\nfruits[fruits.length - 1] // Mango\n\n// Iterate array elements\nfor (let i = 0; i \u003c fruits.length; i++) {\n console.log(fruits[i]);\n}\n```\n\n**Example 03:** Adding new array elements\n\n```js\nlet fruits = [\"Apple\", \"Orange\", \"Plum\", \"Mango\"];\n\nfruits.push(\"Grapes\"); // Adds a new element (Grapes) to fruits\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-array-y73m66?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 7.2. What are associative arrays in javascript?\n\nAssociative 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.\n\n**Syntax:**\n\n```js\nconst array_name = { key1: 'value1', key2: 'value2', key3: 'value3' } \n```\n\n**Example:**\n\n```js\nconst employee = {\n id: 12345,\n name: \"Sakshi Memon\",\n email: \"sakshi.memon@email.com\"\n};\n\n// Accesing employee elements\nconsole.log(employee.id); // 12345\nconsole.log(employee.name); // Sakshi Memon\n\n// Array Length \nconsole.log(Object.keys(employee).length); // 3\n\n// Retrieve the elements\nfor (let key in employee) {\n console.log(key + \" = \" + employee[key]);\n}\n\n// Output\nid = 12345 \nname = Sakshi Memon \nemail = sakshi.memon@email.com \n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-associative-arrays-vxc4qc?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 7.3. Calculate the length of the associative array?\n\n**Method 1:** Using `Object.keys().length`\n\n```js\nconst employee = {\n id: 12345,\n name: \"Sakshi Memon\",\n email: \"sakshi.memon@email.com\"\n};\n\nconsole.log(Object.keys(employee).length); // Output 3\n```\n\n**Method 2:** Using `Object.hasOwnProperty()`\n\n```js\nfunction getLength(object) {\n let count = 0;\n for (let key in object) {\n // hasOwnProperty method check own property of object\n if (object.hasOwnProperty(key)) count++;\n }\n return count;\n}\n\nconsole.log(getLength(employee)); // Output 3\n```\n\n**Method 3:** Using `Object.getOwnPropertyNames()`\n\n```js\nconst employee = {\n id: 12345,\n name: \"Sakshi Memon\",\n email: \"sakshi.memon@email.com\"\n};\n\nObject.getOwnPropertyNames(employee).length; // Output 3\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-associative-arrays-qye2t1?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 7.4. What is the difference between Array and Array of Objects in JavaScript?\n\nObjects 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.\n\n**Example:** Arrays\n\n```js\nconst numbers = [10, 20, 30];\n\n// Iterating through loop\nfor (let i = 0; i \u003c numbers.length; i++) {\n console.log(numbers[i]);\n}\n\n// Pop an element from array\nnumbers.pop();\nconsole.log(\"after pop(): \" + numbers);\n```\n\n**Example:** Array of Objects\n\n```js\nconst employees = [\n { id: 101, name: \"Sakshi Memon\", email: \"sakshi.memon@email.com\" },\n { id: 102, name: \"Subhash Shukla\", email: \"subhash.shukla@email.com\" },\n { id: 103, name: \"Mohini Karpe\", email: \"mohini.karpe@email.com\" }\n];\n\n// Using DOT notation\nconsole.log(employees[0].name);\n\n// Using delete keyword\ndelete employees[0];\n\n// Iterating using for..in loop\nfor (let key in employees) {\n console.log(employees[key]);\n}\n```\n\n**Difference:**\n\n|S.No. | Array | Array of objects |\n|-------|---------|------------------|\n|1.\t|Arrays are best to use when the elements are numbers.|\tObjects are best to use when the elements strings |\n|3.\t|The elements can be manipulated using []. | The properties can be manipulated using both . ( DOT ) notation and [].|\n|4.\t|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.|\n|5.\t|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().|\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-array-vs-object-w7wz7i?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 7.5. Explain array methods [ join(), pop(), push(), shift(), unshift(), concat(), map(), filter(), reduce(), reduceRight(), every(), some(), indexOf(), lastIndexOf(), find(), findIndex(), includes() ]\n\n**1. array.join()**:\n\nThe `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.\n\n```js\nvar elements = ['Fire', 'Air', 'Water'];\n\nconsole.log(elements.join()); // Output: \"Fire,Air,Water\"\nconsole.log(elements.join('')); // Output: \"FireAirWater\"\nconsole.log(elements.join('-')); // Output: \"Fire-Air-Water\"\n```\n\n**2. array.pop()**:\n\nThe pop() method removes the last element from an array and returns that element. This method changes the length of the array.\n\n```js\nvar plants = ['broccoli', 'cauliflower', 'kale'];\n\nconsole.log(plants.pop()); // Output: \"kale\"\nconsole.log(plants); // Output: Array [\"broccoli\", \"cauliflower\"]\nconsole.log(plants.pop()); // Output: \"cauliflower\"\nconsole.log(plants.pop()); // Output: \"broccoli\"\nconsole.log(plants.pop()); // Output: \"undefined\"\n```\n\n**3. array.push()**:\n\nThe push() method adds one or more elements to the end of an array and returns the new length of the array.\n\n```js\nconst animals = ['pigs', 'goats', 'sheep'];\n\nconst count = animals.push('cows');\nconsole.log(count); // Output: 4\nconsole.log(animals); // Output: Array [\"pigs\", \"goats\", \"sheep\", \"cows\"]\n```\n\n**4. array.shift()**:\n\nThe shift() method removes the first element from an array and returns that removed element. This method \nchanges the length of the array.\n\n```js\nvar fruits = [\"Banana\", \"Orange\", \"Apple\", \"Mango\"];\nfruits.shift();\nconsole.log(fruits) // Output: Array [\"Orange\", \"Apple\", \"Mango\"]\n```\n\n**5. array.unshift()**:\n\nThe unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.\n\n```js\nvar fruits = [\"Banana\", \"Orange\", \"Apple\"];\nfruits.unshift(\"Mango\",\"Pineapple\");\nconsole.log(fruits); // Output: Array [\"Mango\", \"Pineapple\", \"Banana\", \"Orange\", \"Apple\"]\n```\n\n**6. array.concat()**:\n\nThe concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.\n\n```js\nconst array1 = ['a', 'b', 'c'];\nconst array2 = ['d', 'e', 'f'];\n\nconsole.log(array1.concat(array2)); // Output: Array [\"a\", \"b\", \"c\", \"d\", \"e\", \"f\"]\n```\n\n**7. array.map()**:\n\nThe map() method creates a new array with the results of calling a provided function on every element in the calling array.\n\n```js\nvar array1 = [1, 4, 9, 16];\n\n// pass a function to map\nconst map1 = array1.map(x =\u003e x * 2); \n\nconsole.log(map1); // Output: Array [2, 8, 18, 32]\n```\n\n**8. array.filter()**:\n\nThe filter() method creates a new array with all elements that pass the test implemented by the provided function.\n\n```js\nvar words = ['spray', 'limit', 'elite', 'exuberant', 'destruction'];\n\nconst result = words.filter(word =\u003e word.length \u003e 6);\n\nconsole.log(result); // Output: Array [\"exuberant\", \"destruction\"]\n```\n\n**9. array.reduce()**:\n\nThe reduce() method executes a reducer function (that you provide) on each element of the array, \nresulting in a single output value.\n\n```js\nconst array1 = [1, 2, 3, 4];\nconst reducer = (accumulator, currentValue) =\u003e accumulator + currentValue;\n\nconsole.log(array1.reduce(reducer)); // Output: 10\nconsole.log(array1.reduce(reducer, 5)); // Output: 15\n```\n\n**10. array.reduceRight()**:\n\nThe 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.\n\n```js\nconst array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(\n (accumulator, currentValue) =\u003e accumulator.concat(currentValue)\n);\n\nconsole.log(array1); // Output: Array [4, 5, 2, 3, 0, 1]\n```\n\n**11. array.every()**:\n\nThe every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value. \n\n```js\nfunction isBelowThreshold(currentValue) {\n return currentValue \u003c 40;\n}\n\nvar array1 = [1, 30, 39, 29, 10, 13];\nconsole.log(array1.every(isBelowThreshold)); // Output: true\n```\n\n**12. array.some()**:\n\nThe some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.\n\n```js\nvar array = [1, 2, 3, 4, 5];\n\nvar even = function(element) {\n // checks whether an element is even\n return element % 2 === 0;\n};\n\nconsole.log(array.some(even)); // Output: true\n```\n\n**13. array.indexOf()**:\n\nThe indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.\n\n```js\nvar beasts = ['ant', 'bison', 'camel'];\n\nconsole.log(beasts.indexOf('camel')); // Output: 2\nconsole.log(beasts.indexOf('giraffe')); // Output: -1\n```\n\n**14. array.lastIndexOf()**:\n\nThe lastIndexOf() method returns the index within the calling String object of the last occurrence \nof the specified value, searching backwards from fromIndex. Returns -1 if the value is not found.\n\n```js\nvar paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';\n\nvar searchTerm = 'dog';\n\nconsole.log('The index of the first \"' + searchTerm + '\" from the end is ' + paragraph.lastIndexOf(searchTerm));\n// Output: \"The index of the first \"dog\" from the end is 52\"\n```\n\n**15. array.find()**:\n\nThe find() method returns the value of the first element in the provided array that satisfies the provided testing function.\n\n```js\nvar array1 = [5, 12, 8, 130, 44];\n\nvar found = array1.find(function(element) {\n return element \u003e 100;\n});\n\nconsole.log(found); // Output: 130\n```\n\n**16. array.findIndex()**:\n\nThe 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.\n\n```js\nvar array1 = [5, 12, 8, 130, 44];\n\nfunction isLargeNumber(element) {\n return element \u003e 20;\n}\n\nconsole.log(array1.findIndex(isLargeNumber)); // Output: 3\n```\n\n**17. array.includes()**:\n\nThe includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.\n\n```js\nvar array1 = [1, 2, 3];\nconsole.log(array1.includes(2)); // Output: true\n\nvar pets = ['cat', 'dog', 'bat'];\nconsole.log(pets.includes('at')); // Output: false\n```\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 7.6. What are the benefits of using spread syntax and how is it different from rest syntax?\n\nSpread 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.\n\n**Example:**\n\n```js\nfunction sum(x, y, z) {\n return x + y + z;\n}\n\nconst numbers = [1, 2, 3];\nconsole.log(sum(...numbers));\n\n// ES-5 way\nconsole.log(sum.apply(null, numbers));\n```\n\n**Example:** Merge arrays\n\n```js\nconst newBrands = [\"Tesla\", \"Mahindra\"];\nconst brands = [\"Ford\", \"Honda\", ...newBrands, \"BMW\"];\n\nconsole.log(brands);\n```\n\n**Example:** Copy array/object\n\n```js\nlet obj = { a: 10, b: 20, c: 30 };\n\n// spread the object into a list of parameters\nlet objCopy = { ...obj };\n\n// add new\nobj.d = 40;\n\nconsole.log(JSON.stringify(obj)); // { \"a\":10, \"b\":20, \"c\":30, \"d\":40 }\nconsole.log(JSON.stringify(objCopy)); // { \"a\":10, \"b\":20, \"c\":30 }\n```\n\n**Difference:**\n\nThe 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.\n\n|Spread Syntax | Rest Syntax |\n|------------------------|---------------------------------|\n|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.|\n|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.|\n|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.|\n|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.|\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-spread-vs-spread-qvxkkz?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 7.7. What is the difference between for..in and for..of?\n\nBoth `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. \n\n* **for in**: iterates over all enumerable properties of an object that are **keyed** by strings. \n* **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.\n\n**Example:**\n\n```js\n// for..in\nconst list = [10, 20, 30];\n\nfor (let i in list) {\n console.log(i); // \"0\", \"1\", \"2\",\n}\n\n// for..of\nfor (let i of list) {\n console.log(i); // \"10\", \"20\", \"30\"\n}\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-for-in-for-of-b0vn3v?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 7.8. Can you give an example for destructuring an array?\n\nDestructuring 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.\n\n```js\n// Variable assignment.\nconst numbers = [10, 20, 30];\nconst [one, two, three] = numbers;\n\nconsole.log(one); // 10\nconsole.log(two); // 20\nconsole.log(three); // 30\n```\n\n```js\n// Swapping variables\nlet a = 100;\nlet b = 200;\n\n[a, b] = [b, a];\n\nconsole.log(a); // 20\nconsole.log(b); // 10\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-array-destructure-bg71je?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 7.9. What are default values in destructuring assignment?\n\nA 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. \n\n**Array Destructuring:**\n\n```js\nconst [x = 2, y = 4, z = 6] = [10];\n\nconsole.log(\"x: \" + x); // 10\nconsole.log(\"y: \" + y); // 4\nconsole.log(\"z: \" + z); // 6\n```\n\n**Object Destructuring:**\n\n```js\nconst { i = 2, j = 4, k = 6 } = { n: 10 };\n\nconsole.log(\"i: \" + i); // 2\nconsole.log(\"j: \" + j); // 4\nconsole.log(\"k: \" + k); // 6\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/ecstatic-drake-iq971p?file=/src/index.js)**\n\n## Q 7.10. When to use reduce(), map(), foreach() and filter() in JavaScript?\n\n**1. forEach():** \n\nIt takes a callback function and run that callback function on each element of array one by one.\nBasically forEach works as a traditional for loop looping over the array and providing array elements to do operations on them.\n\n```js\nlet numbers = [10, 20, 30];\n\nnumbers.forEach(function (number, index) {\n console.log(number + \" comes at \" + index);\n});\n\n// Output\n10 comes at 0\n20 comes at 1\n30 comes at 2\n```\n\n**2. filter():**\n\nThe 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.\n\n*Note: filter does not update the existing array it will return a new filtered array every time*.\n\n```js\nlet numbers = [10, 20, 30];\n\nlet result = numbers.filter(function (number) {\n return number !== 20;\n});\n\nconsole.log(result);\n\n// Output\n[10, 30]\n```\n\n**3. map():**\n\nmap() like filter() \u0026 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.\n\nLike 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.\n\n```js\nlet numbers = [10, 20, 30];\n\nlet mapped = numbers.map(function (number) {\n return number * 10;\n});\n\nconsole.log(mapped);\n\n// Output\n[100, 200, 300]\n```\n\n**4. reduce():**\n\nreduce() method of the array object is used to reduce the array to one single value.\n\n```js\nlet numbers = [10, 20, 30];\n\nlet sum = numbers.reduce(function (sum, number) {\n return sum + number;\n});\n\nconsole.log(sum); // Output: 60\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-loop-m755cw?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 7.11. How do you define JSON arrays?\n\nJSON is an acronym for JavaScript Object Notation, and is \"an open standard data interchange format\".\n\nJSON array represents ordered list of values. JSON array can store multiple values. It can store string, number, boolean or object in JSON array.\n\n```js\n// Empty JSON array\nconst empty = [ ];\n\n\n// JSON Array of Numbers\nconst numbers = [12, 34, 56, 43, 95];\n\n\n// JSON Array of Objects\n{\n \"employees\": [\n { \"name\": \"Kabir Dixit\", \"email\": \"kabir.dixit@gmail.com\", \"age\": 23 },\n { \"name\": \"Mukta Bhagat\", \"email\": \"mukta.bhagat@gmail.com\", \"age\": 28 },\n { \"name\": \"Sakshi Ramakrishnan\", \"email\": \"sakshi.ramakrishnan@gmail.com\", \"age\": 33 }\n ]\n}\n\n// access array values\nconsole.log(employees[0].name) // Kabir Dixit\n```\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 7.12. How to validate JSON Object in javascript?\n\n`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** ).\n\n```js\nfunction isValidJson(json) {\n try {\n JSON.parse(json);\n return true;\n } catch (e) {\n return false;\n }\n}\n\nconsole.log(isValidJson(\"{}\")); // true\nconsole.log(isValidJson(\"abc\")); // false\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-validate-json-iwzom7?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 7.13. What is the purpose JSON stringify?\n\nWhen 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.\n\n```js\nconst user = {'name': 'Shashi Meda', 'email': 'shashi.meda@email.com', 'age': 28}\n\nconsole.log(JSON.stringify(user)); // {\"name\":\"Shashi Meda\",\"email\":\"shashi.meda@email.com\",\"age\":28}\n```\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 7.14. How do you parse JSON string?\n\nWhen 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.\n\n```js\nconst user = '{\"name\": \"Shashi Meda\", \"email\": \"shashi.meda@email.com\", \"age\": 28}'\n\nconsole.log(JSON.parse(user));// {'name': 'Shashi Meda', 'email': 'shashi.meda@email.com', 'age': 28}\n```\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 7.15. What is the purpose of compare function while sorting arrays?\n\nThe 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.\n\nIf omitted, the array elements are converted to strings, then sorted according to each character's Unicode code point value.\n\n```js\nconst numbers = [1, 2, 5, 3, 4];\n\nnumbers.sort((a, b) =\u003e b - a);\nconsole.log(numbers); // [5, 4, 3, 2, 1]\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-sort-ykfhck?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## 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?\n\nTo understand the differences between the two, Let us look at what each function does.\n\n**1. Array.forEach():**\n\n* Iterates through the elements in an array.\n* Executes a callback for each element.\n* Does not return a value.\n\n```js\nconst numbers = [10, 20, 30];\nconst doubled = numbers.forEach((num, index) =\u003e {\n return num * 2;\n});\n\nconsole.log(doubled) // undefined\n```\n\n**2. Array.map():**\n\n* Iterates through the elements in an array.\n* \"Maps\" each element to a new element by calling the function on each element, creating a new array as a result.\n\n```js\nconst numbers = [10, 20, 30];\nconst doubled = numbers.map(num =\u003e {\n return num * 2;\n});\n\nconsole.log(doubled) // [20, 40, 60]\n```\n\nThe 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.\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-foreach-vs-map-kxch52?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 7.17. What is unshift() method in JavaScript?\n\nThe `unshift()` method adds one or more elements to the beginning of an array and returns the new length of the array.\n\n**Example:**\n\n```js\nconst numbers = [10, 20, 30];\n\nconsole.log(numbers.unshift(40, 50)); // 5\nconsole.log(numbers); // [40, 50, 10, 20, 30]\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-unshift-khl0dq?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 7.18. What is a rest parameter?\n\nThe 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\".\n\nThis feature has been introduced to reduce the boilerplate code that was induced by the arguments.\n\n**Example:**\n\n```js\nfunction sum(...args) {\n return args.reduce((previous, current) =\u003e {\n return previous + current;\n });\n}\n\nconsole.log(sum(10)); // 10\nconsole.log(sum(10, 20)); // 30\nconsole.log(sum(10, 20, 30)); // 60\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-rest-parameters-w8zy28?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 7.19. What happens if you do not use rest parameter as a last argument?\n\nThe rest parameter should be the last argument, as its job is to collect all the remaining arguments into an array.\n\n**Example:** If you define a function like below it does not make any sense and will throw an `SyntaxError`.\n\n```js\nfunction display(a, ...args, b) {\n console.log(a);\n for (let i = 0; i \u003c args.length; i++) {\n console.log(args[i]);\n }\n console.log(b);\n}\n\ndisplay(10, 20, 30, 40, 50);\n\n// Output\nSyntaxError: Rest element must be last element\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-rest-parameter-v8r5yt?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 7.20. What is difference between [] and new Array()?\n\n`[]` and `new Array()` are two different ways of creating an array, but they are functionally equivalent.\n\nThe primary difference between them is in how they are created and in their behavior when used with certain methods.\n\n`[]` 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:\n\n```js\nconst myArray = []; // create a new empty array\n```\n\nOn 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:\n\n```js\nconst myArray = new Array(); // create a new empty array\nconst myOtherArray = new Array(3); // create a new array with a length of 3\nconst myThirdArray = new Array(\"a\", \"b\", \"c\"); // create a new array with three elements\n```\n\nOne 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.\n\nIn 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.\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 8. Regular Expression\n\n\u003cbr/\u003e\n\n## Q 8.1. What is a RegExp object?\n\nA regular expression is an object that describes a pattern of characters.\n\nThe 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.\n\n**Syntax:**\n\n```js\n// Using literal notation \nlet pattern = /pattern/attributes;\n\n// Using RegExp Object\nlet pattern = new RegExp(pattern, attributes);\n\n\n// * pattern − A string that specifies the pattern of the regular expression or another regular expression.\n// * attributes − An optional string containing any of the \"g\", \"i\", and \"m\" attributes that specify global, case-insensitive, and multi-line matches, respectively.\n```\n\n**Example:**\n\n```js\nlet pattern = /ab+c/i; // literal notation\n\nlet pattern = new RegExp(/ab+c/, 'i') // constructor with regular expression literal as first argument\n```\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 8.2. What are the string method available in regular expression?\n\nRegular 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.\n\n**Example 01:** `test()`\n\nTests for a match in a string. It returns `true` or `false`\n\n```js\nlet exp = /Hello/;\nlet res1 = exp.test(\"Hello World\");\nlet res2 = exp.test(\"Hi\");\n\nconsole.log(res1); // true\nconsole.log(res2); // false\n```\n\n**Example 02:** `exec()`\n\nExecutes a search for a match in a string. It returns an array of information or `null` on a mismatch.\n\n```js\nlet res1 = exp.exec(\"Hello World\");\nlet res2 = exp.exec(\"Hi\");\n\nconsole.log(res1); // ['Hello', index: 0, input: 'Hello World', groups: undefined]\nconsole.log(res2); // null\n```\n\n|Method\t |Description |\n|-------------|------------------------|\n|exec()\t |Executes a search for a match in a string. It returns an array of information or `null` on a mismatch.|\n|test()\t |Tests for a match in a string. It returns `true` or `false`.|\n|match()\t |Returns an array containing all of the matches, including capturing groups, or `null` if no match is found.|\n|matchAll()\t |Returns an iterator containing all of the matches, including capturing groups.|\n|search()\t |Tests for a match in a string. It returns the index of the match, or `-1` if the search fails.|\n|replace()\t |Executes a search for a match in a string, and replaces the matched substring with a replacement substring.|\n|replaceAll()\t|Executes a search for all matches in a string, and replaces the matched substrings with a replacement substring.|\n|split()\t |Uses a regular expression or a fixed string to break a string into an array of substrings.|\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-regular-expression-fn79dp?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 8.3. What are modifiers in regular expression?\n\nModifiers can be used to perform case-insensitive and global searches.\n\n| Modifier | Description |\n|---- | -----------------|\n| i | Perform case-insensitive matching |\n| g | Perform a global match rather than stops at first match |\n| m | Perform multiline matching|\n\n**Example 01:** Global Search\n\n```js\nlet text = \"Hello World! Hello World!\";\nlet pattern = /Hello/g;\n\nconsole.log(text.match(pattern)); // ['Hello', 'Hello']\n```\n\n**Example 02:** Case-insensitive match\n\n```js\nlet string = \"Hello World!\";\nlet pattern = /WORLD/i;\n\nconsole.log(string.match(pattern2)); // ['World', index: 6, input: 'Hello World!', groups: undefined]\n```\n\n**Example 03:** Multiline match\n\nThe \"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.\n\n```js\nlet paragraph = `Lorem Ipsum is simply dummy text of the printing and typesetting industry.`;\n\nlet pattern = /Lorem/m;\n\nconsole.log(paragraph.match(pattern3)); // [\"Lorem\"]\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-modifier-sm7ul2)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 8.4. What are regular expression patterns?\n\nRegular Expressions provided group of patterns in order to match characters. Basically they are categorized into 3 types, \n\n**Brackets:**\n\nThese are used to find a range of characters.\n\n* **[...]**: Any one character between the brackets.\n* **[^...]**: Any one character not between the brackets.\n* **[0-9]**: It matches any decimal digit from **0** through **9**.\n* **[a-z]**: It matches any character from lowercase **a** through lowercase **z**.\n* **[A-Z]**: It matches any character from uppercase **A** through uppercase **Z**.\n* **[a-Z]**: It matches any character from lowercase **a** through uppercase **Z**.\n\n**Metacharacters:**\n\nThese are characters with a special meaning\n\n* **.**: a single character\n* **\\s**: a whitespace character (space, tab, newline)\n* **\\S**: non-whitespace character\n* **\\d**: a digit (0-9)\n* **\\D**: a non-digit\n* **\\w**: a word character (a-z, A-Z, 0-9, _)\n* **\\W**: a non-word character\n* **[\\b]**: a literal backspace (special case).\n* **[aeiou]**: matches a single character in the given set\n* **[^aeiou]**: matches a single character outside the given set\n* **(foo|bar|baz)**: matches any of the alternatives specified\n\n**Quantifiers:**\n\nThese are useful to define quantities\n\n* **p+**: It matches any string containing one or more p\\'s.\n* **p: It matches any string containing zero or more p\\'s.\n* **p?**: It matches any string containing at most one p.\n* **p{N}**: It matches any string containing a sequence of **N** p\\'s\n* **p{2,3}**: It matches any string containing a sequence of two or three p\\'s.\n* **p{2, }**: It matches any string containing a sequence of at least two p\\'s.\n* **p$**: It matches any string with p at the end of it.\n* **^p**: It matches any string with p at the beginning of it.\n\n**Example:**\n\n```js\n// Brackets\n\"Hello World\".match(/[a-d]/); // -\u003e matches 'a'\n\"Hello World\".match(/[A-D]/); // -\u003e no match\n\"Hello World\".match(/[A-D]/i); // -\u003e matches 'a'\n\n// Metacharacters\n\"Hello World\".match(/[A-Za-z]\\s[A-Za-z]/); // -\u003e matches\n\"Hello World\".match(/[0-9]\\s[A-Za-z]/); // -\u003e no match\n\n// Quantifiers\n\"Hello\".match(/l+/); // -\u003e matches\n\"Hello\".match(/A*/); // -\u003e no match\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-regular-expression-patterns-b5ojtl?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 8.5. How do you search a string for a pattern?\n\n**1. Using test()** It searches a string for a pattern, and returns `true` or `false`, depending on the result.\n\n```js\nlet re1 = /Hi/;\nlet re2 = /you/;\n\nre1.test(\"How are you?\"); // false\nre2.test(\"How are you?\"); // true\n```\n\n**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.\n\n```js\nlet re1 = /Hi/;\nlet re2 = /you/;\n\nre1.exec(\"How are you?\"); // null\nre2.exec(\"How are you?\"); // [\"you\"]\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-regular-expression-m10bgo?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 8.6. What is the purpose of exec method?\n\nThe purpose of exec method is similar to test method but it returns a founded text as an object instead of returning true/false.\n\n```js\n// Using test() method\nvar pattern = /you/;\nconsole.log(pattern.test(\"How are you?\")); // true\n\n\n// Using exec() method\nvar pattern = /you/;\nconsole.log(pattern.exec(\"How are you?\")); // [\"you\", index: 8, input: \"How are you?\", groups: undefined]\n```\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 8.7. How do you validate an email in javascript?\n\nThe `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\n\n```js\n// Program to validate the email address\n\nfunction validateEmail(email) {\n // regex pattern for email\n const re = /\\S+@\\S+\\.\\S+/g;\n\n // check if the email is valid\n let result = re.test(email);\n if (result) {\n console.log(\"Valid\");\n } else {\n console.log(\"Not valid.\");\n }\n}\n\nlet email = \"pradeep.kumar@gmail.com\";\nlet email2 = \"pradeep.kumar.com\";\n\nvalidateEmail(email); // Valid\nvalidateEmail(email2); // Not Valid\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-regular-expression-rkxjb1?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 8.8. How do you detect a mobile browser using regexp?\n\nYou 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,\n\n```js\nfunction detectMobile() {\n if (\n navigator.userAgent.match(/Android/i) ||\n navigator.userAgent.match(/webOS/i) ||\n navigator.userAgent.match(/iPhone/i) ||\n navigator.userAgent.match(/iPad/i) ||\n navigator.userAgent.match(/iPod/i) ||\n navigator.userAgent.match(/BlackBerry/i) ||\n navigator.userAgent.match(/Windows Phone/i)\n ) {\n return true;\n } else {\n return false;\n }\n}\n```\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## # 9. FUNCTIONS\n\n\u003cbr/\u003e\n\n## Q 9.1. What are the benefits of using arrow function over es5 function?\n\nArrows is a new syntax for functions, which brings several benefits:\n\n* Arrow syntax automatically binds `this` to the surrounding code\\'s context\n* The syntax allows an implicit return when there is no body block, resulting in shorter and simpler code in some cases\n* Last but not least, `=\u003e` is shorter and simpler than `function`, although stylistic issues are often subjective\n\n**Example 01:** Arrow Function with No Argument\n\nIf a function doesn\\'t take any argument, then you should use empty parentheses.\n\n```js\nlet greet = () =\u003e console.log('Hello');\ngreet(); // Hello\n```\n\n**Example 02:** Arrow Function with One Argument\n\nIf a function has only one argument, you can omit the parentheses.\n\n```js\nlet greet = x =\u003e console.log(x);\ngreet('Hello'); // Hello \n```\n\n**Example 03:** Arrow Function as an Expression\n\nYou can also dynamically create a function and use it as an expression.\n\n```js\nlet age = 25;\n\nlet welcome = (age \u003c 18) ?\n () =\u003e console.log('Baby') :\n () =\u003e console.log('Adult');\n\nwelcome(); // Adult\n```\n\n**Example 04:** Multiline Arrow Functions\n\nIf a function body has multiple statements, you need to put them inside curly brackets `{}`.\n\n```js\nlet area = (r) =\u003e {\n const pi = 3.14;\n return pi * r * r;\n}\n\nlet result = area(10);\nconsole.log(result); // 314\n```\n\n*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.*\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/es6-arrow-function-yl7oqo?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 9.2. What is the benefit of using the arrow syntax for a method in a constructor?\n\nThe 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.\n\n```js\nconst Person = function(firstName) {\n this.firstName = firstName;\n this.sayName1 = function() { console.log(this.firstName); };\n this.sayName2 = () =\u003e { console.log(this.firstName); };\n};\n\nconst john = new Person('John');\nconst dave = new Person('Dave');\n\njohn.sayName1(); // John\njohn.sayName2(); // John\n\n// The regular function can have its 'this' value changed, but the arrow function cannot\njohn.sayName1.call(dave); // Dave (because \"this\" is now the dave object)\njohn.sayName2.call(dave); // John\n\njohn.sayName1.apply(dave); // Dave (because 'this' is now the dave object)\njohn.sayName2.apply(dave); // John\n\njohn.sayName1.bind(dave)(); // Dave (because 'this' is now the dave object)\njohn.sayName2.bind(dave)(); // John\n\nvar sayNameFromWindow1 = john.sayName1;\nsayNameFromWindow1(); // undefined (because 'this' is now the window object)\n\nvar sayNameFromWindow2 = john.sayName2;\nsayNameFromWindow2(); // John\n```\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 9.3. Difference between `Function`, `Method` and `Constructor` calls in JavaScript?\n\n**1. Functions:** The simplest usages of function call:\n\n```js\nfunction display(name) {\n return \"Hello \" + name;\n}\n\ndisplay(\"World\"); // \"Hello World\"\n```\n\n**2. Methods:** in JavaScript are nothing more than object properties that are functions.\n\n```js\nvar obj = {\n display : function() {\n return \"Hello \" + this.name;\n },\n name: 'Minali Peri'\n}\nobj.display(); // \"Hello Minali Peri\"\n```\n\n**3. Constructors:** Like function and method, `constructors` are defined with function.\n\n```js\nfunction Employee(name, age) {\n this.name = name;\n this.age = age;\n}\n\nvar emp1 = new Employee('Drishya Sama', 28);\nemp1.name; // \"Drishya Sama\"\nemp1.age; // 28\n```\n\nUnlike 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.\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 9.4. When you should not use arrow functions in ES6?\n\nAn 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.\n\n**Arrow functions in ES6 has two limitations:**\n\n* Do not work with new\n* Fixed this bound to scope at initialisation\n\n**When should not use Arrow Functions:**\n\n**1. Object methods:** \n\nThe 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.\n\n```js\n// Usin arrow function\nconst counter = {\n count: 0,\n next: () =\u003e ++this.count,\n current: () =\u003e this.count\n};\n\nconsole.log(counter.next()); // NaN\n```\n\n**2. Event handlers:** \n\nIf 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.\n\n```js\nlet button = document.getElementById('press');\n\nbutton.addEventListener('click', () =\u003e {\n this.classList.toggle('on');\n});\n```\n\n**3. Prototype methods:**\n\nThe `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\n\n```js\nfunction Counter() {\n this.count = 0;\n}\n\nCounter.prototype.next = () =\u003e {\n return this.count;\n};\n\nCounter.prototype.current = () =\u003e {\n return ++this.next;\n}\n```\n\n**4. Functions that use the arguments object:**\n\nArrow functions don\\'t have the arguments object. Therefore, if a function that uses arguments object, you cannot use the arrow function.\n\n```js\nconst concat = (separator) =\u003e {\n let args = Array.prototype.slice.call(arguments, 1);\n return args.join(separator);\n}\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-arrow-function-52ny7c?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 9.5. What are the properties of function objects in javascript?\n\n**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.\n\n**Javascript Function Objects Property:**\n\n|Name |Description |\n|-----------------|----------------------------------|\n|arguments |An array corresponding to the arguments passed to a function.|\n|arguments.callee |Refers the currently executing function.|\n|arguments.length |Refers the number of arguments defined for a function.|\n|constructor |Specifies the function that creates an object.|\n|length |The number of arguments defined by the function.|\n|prototype |Allows adding properties to a Function object.|\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 9.6. What is a first class function?\n\nIn 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.\n\n**Example 01:** Assign a function to a variable\n\n```js\nconst message = function() {\n console.log(\"Hello World!\");\n}\n\nmessage(); // Invoke it using the variable\n```\n\n**Example 02:** Pass a function as an Argument\n\n```js\nfunction sayHello() {\n return \"Hello, \";\n}\nfunction greeting(helloMessage, name) {\n console.log(helloMessage() + name);\n}\n// Pass `sayHello` as an argument to `greeting` function\ngreeting(sayHello, \"JavaScript!\");\n```\n\n**Example 03:** Return a function\n\n```js\nfunction sayHello() {\n return function() {\n console.log(\"Hello!\");\n }\n}\n```\n\n**Example 04:** Using a variable\n\n```js\nconst sayHello = function() {\n return function() {\n console.log(\"Hello!\");\n }\n}\nconst myFunc = sayHello();\nmyFunc();\n```\n\n**Example 05:** Using double parentheses\n\n```js\nfunction sayHello() {\n return function() {\n console.log(\"Hello!\");\n }\n}\nsayHello()();\n```\n\nWe are using double parentheses `()()` to invoke the returned function as well.\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-first-class-function-ckck8k?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 9.7. What is a higher order function?\n\nA Higher-Order function is a function that receives a function as an argument or returns the function as output.\n\nFor example, `Array.prototype.map()`, `Array.prototype.filter()` , `Array.prototype.forEach()` and `Array.prototype.reduce()` are some of the Higher-Order functions in javascript.\n\n**Example 01:** .map()\n\n```js\nconst array = [10, 20, 30];\n\nconst result = array.map(function (item) {\n return item * 2;\n});\nconsole.log(result); // [20, 40, 60]\n```\n\n**Example 02:** .filter()\n\n```js\nconst randomNumbers = [4, 11, 42, 14, 39];\n\nconst filteredArray = randomNumbers.filter((number) =\u003e {\n return number \u003e 15;\n});\nconsole.log(filteredArray); // [42, 39]\n```\n\n**Example 03:** .forEach()\n\n```js\nconst numbers = [28, 77, 45];\n\nnumbers.forEach((number) =\u003e {\n console.log(number);\n});\n```\n\n**Example 04:** .reduce()\n\n```js\nconst arrayOfNumbers = [10, 20, 30];\n\nconst sum = arrayOfNumbers.reduce((accumulator, currentValue) =\u003e {\n return accumulator + currentValue;\n});\nconsole.log(\"Sum: \" + sum); // 60\n```\n\n**\u0026#9885; [Try this example on CodeSandbox](https://codesandbox.io/s/js-higher-order-function-yhbo9v?file=/src/index.js)**\n\n\u003cdiv align=\"right\"\u003e\n \u003cb\u003e\u003ca href=\"#table-of-contents\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q 9.8. What is a unary function?\n\nUnary function (i.e. monadic) is a function that accepts exactly one argument. It stands for single argument accepted by a function","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearning-zone%2Fjavascript-basics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flearning-zone%2Fjavascript-basics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearning-zone%2Fjavascript-basics/lists"}