{"id":18850578,"url":"https://github.com/manthanank/learn-javascript","last_synced_at":"2025-09-03T12:32:14.725Z","repository":{"id":65533168,"uuid":"587770857","full_name":"manthanank/learn-javascript","owner":"manthanank","description":"Complete Guide to Learn JavaScript.","archived":false,"fork":false,"pushed_at":"2024-10-15T15:20:26.000Z","size":175,"stargazers_count":15,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-25T19:44:12.628Z","etag":null,"topics":["advanced","beginner","es6","intermediate","interview","interview-questions","javascript","learn","learn-javascript","learning-javascript","nodejs","package","snippets"],"latest_commit_sha":null,"homepage":"https://manthanank.github.io/learn-javascript/","language":"Dockerfile","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manthanank.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-11T14:49:17.000Z","updated_at":"2024-11-16T09:44:15.000Z","dependencies_parsed_at":"2024-02-04T14:30:02.742Z","dependency_job_id":"233bee6e-7824-418a-a7ca-f1d421438bbc","html_url":"https://github.com/manthanank/learn-javascript","commit_stats":{"total_commits":53,"total_committers":2,"mean_commits":26.5,"dds":"0.15094339622641506","last_synced_commit":"27515469c2fb4e487f9802f0bf576e9f23dd54d6"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Flearn-javascript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Flearn-javascript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Flearn-javascript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Flearn-javascript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manthanank","download_url":"https://codeload.github.com/manthanank/learn-javascript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231882053,"owners_count":18440323,"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":["advanced","beginner","es6","intermediate","interview","interview-questions","javascript","learn","learn-javascript","learning-javascript","nodejs","package","snippets"],"created_at":"2024-11-08T03:29:57.718Z","updated_at":"2025-09-03T12:32:14.647Z","avatar_url":"https://github.com/manthanank.png","language":"Dockerfile","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Learn JavaScript\n\nThis repository contains a list of JavaScript concepts, functions, methods, and other important topics that are essential for every JavaScript developer to learn. It is a comprehensive guide that covers all the basic and advanced concepts of JavaScript.\n\n![npm](https://img.shields.io/npm/dw/learn-javascript)\n![npm](https://img.shields.io/npm/dm/learn-javascript)\n![npm](https://img.shields.io/npm/dy/learn-javascript)\n![npm](https://img.shields.io/npm/dt/learn-javascript)\n![GitHub repo size](https://img.shields.io/github/repo-size/manthanank/learn-javascript)\n\n![GitHub](https://img.shields.io/github/license/manthanank/learn-javascript)\n\n## Table of Contents\n\n- [Introduction](#introduction)\n- [Add JavaScript](#add-javascript)\n- [Output JavaScript](#outputing-javascript)\n- [Single Line Comments](#single-line-comments)\n- [Multi Line Comments](#multi-line-comments)\n- [Variables](#variables)\n - [Declare Variables](#declare-variables)\n- [Data Types](#data-types)\n - [Primitive Data Types](#1-primitive-data-types)\n - [Non Primitive Data Types](#2-non-primitive-data-types)\n- [Operators](#operators)\n - [Arithmetic Operators](#arithmetic-operators)\n - [Logical Operators](#logical-operators)\n - [Comparison Operators](#comparison-operators)\n - [Bitwise Operators](#bitwise-operators)\n - [Type operators](#type-operators)\n - [Assignment Operators](#assignment-operators)\n - [Conditional (Ternary) Operators](#conditional-ternary-operator)\n - [Nullish Coalescing Operator(??)](#nullish-coalescing-operator)\n - [Optional Chaining Operator(?.)](#optional-chaining-operator)\n - [delete Operator](#delete-operator)\n - [Spread (...) Operator](#spread--operator)\n- [Arrays](#arrays)\n - [Array Methods](#array-methods)\n- [Strings](#strings)\n - [String Methods](#strings-methods)\n- [Loops](#loops)\n - [for Loop](#for-loop)\n - [while Loop](#while-loop)\n - [do while Loop](#do-while-loop)\n - [for in Loop](#for-in-loop)\n - [for of Loop](#for-of-loop)\n- [Conditional Statements](#conditional-statements)\n - [if statement](#if-statement)\n - [if else statement](#if-else-statement)\n - [if else else if statement](#if-else-else-if-statement)\n - [switch statement](#switch-statement)\n- [Functions](#functions)\n - [Named Function](#named-function)\n - [Anonymous Function](#anonymous-function)\n - [Arrow Functions](#arrow-function)\n - [Immediately Invoked Function Expression (IIFE)](#iife)\n - [Higher Order Function](#higher-order-functions)\n - [Function Declaration](#function-declaration)\n - [Function Expression](#function-expression)\n - [Function Constructor](#function-constructor)\n- [Scope](#scope)\n - [Block Scope](#block-scope)\n - [Function Scope](#function-scope)\n - [Global Scope](#global-scope)\n- [Hoisting](#hoisting)\n- [Currying](#currying)\n- [Dates](#dates)\n - [Date Methods](#date-methods)\n- [Date Get Methods](#date-get-methods)\n- [Date Set Methods](#date-set-methods)\n- [Type Conversion](#type-conversion)\n - [Convert string to numbers](#convert-string-to-numbers)\n - [Convert number to a string](#convert-number-to-a-string)\n - [Convert dates to numbers](#convert-dates-to-numbers)\n - [Convert boolean to number](#convert-boolean-to-number)\n - [Convert boolean to string](#convert-boolean-to-string)\n- [Typeof](#typeof)\n- [Math](#math)\n - [Math Property](#math-property)\n - [Math Methods](#math-methods)\n- [Sets](#sets)\n - [Set Methods](#set-methods)\n- [Map](#map)\n - [Map Methods](#map-methods)\n- [Recursion](#recursion)\n- [Async](#async)\n- [DOM](#dom)\n- [Browser BOM](#browser-bom)\n- [JSON](#json)\n- [Web API](#web-api)\n- [Ajax](#ajax)\n- [jQuery](#jquery)\n- [Graphics](#graphics)\n- [Best Practices](#best-practices)\n- [Common Mistakes](#common-mistakes)\n- [Performace](#performance)\n- [ES6 Featues](#es6-features)\n- [ES5 Features](#es5-features)\n- [Snippets](#snippets)\n- [Short Hands](#short-hands)\n- [Interview Questions](#interview-questions)\n- [List of GitHub Repositories to learn JavaScript](#list-of-github-repositories-to-learn-javascript)\n- [List of Websites to learn JavaScript](#list-of-websites-to-learn-javascript)\n- [List of Books to learn JavaScript](#list-of-books-to-learn-javascript)\n- [List of YouTube Channels to learn JavaScript](#list-of-youtube-channels-to-learn-javascript)\n- [List of Udemy Courses to learn JavaScript](#list-of-udemy-courses-to-learn-javascript)\n- [List of Games to learn JavaScript by playing](#list-of-games-to-learn-javascript-by-playing)\n- [List of Blogs Sites to learn JavaScript](#list-of-blogs-sites-to-learn-javascript)\n- [List of JavaScript Online Editors/Compilers](#list-of-javascript-online-editorscompilers)\n- [List of Twitter Users](#list-of-twitter-users)\n- [List of LinkedIn Users](#list-of-linkedin-users)\n\n## Introduction\n\n**JavaScript** is a scripting language. It is object-based, lightweight, cross-platform translated language. It is widely used for client-side validation.\n\n## Add JavaScript\n\nThere are three ways to add JavaScript to a web page:\n\n1. **Inline JavaScript** - It is used to add JavaScript directly to the HTML document. It is added inside the `\u003cscript\u003e` tag in the HTML document.\n\n2. **Internal JavaScript** - It is used to add JavaScript to the HTML document. It is added inside the `\u003cscript\u003e` tag in the `\u003chead\u003e` or `\u003cbody\u003e` section of the HTML document.\n\n3. **External JavaScript** - It is used to add JavaScript to the HTML document. It is added in a separate file with a `.js` extension and linked to the HTML document using the `\u003cscript\u003e` tag.\n\n**JavaScript in `\u003chead\u003e`** -\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cscript\u003e\n //code\n\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003ch2\u003eHeading\u003c/h2\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**JavaScript in `\u003cbody\u003e`**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003cbody\u003e\n\n\u003ch2\u003eHeading\u003c/h2\u003e\n\n\u003cscript\u003e\n //code\n\u003c/script\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**External JavaScript** -\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003cbody\u003e\n\n\u003ch2\u003eHeading\u003c/h2\u003e\n\n\u003cscript src=\"myScript.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Outputing JavaScript\n\n### JavaScript can \"display\" data in different ways\n\n**1. Writing into an HTML element, using `innerHTML`**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003cbody\u003e\n\n\u003ch1\u003eMy First Web Page\u003c/h1\u003e\n\u003cp\u003eMy First Paragraph\u003c/p\u003e\n\n\u003cp id=\"demo\"\u003e\u003c/p\u003e\n\n\u003cscript\u003e\ndocument.getElementById(\"demo\").innerHTML = 5 + 6;\n\u003c/script\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**2. Writing into an HTML element, using `document.write()`**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003cbody\u003e\n\n\u003ch1\u003eMy First Web Page\u003c/h1\u003e\n\u003cp\u003eMy first paragraph.\u003c/p\u003e\n\n\u003cscript\u003e\ndocument.write(5 + 6);\n\u003c/script\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**3. Writing into an alert box, using `window.alert()`**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003cbody\u003e\n\n\u003ch1\u003eMy First Web Page\u003c/h1\u003e\n\u003cp\u003eMy first paragraph.\u003c/p\u003e\n\n\u003cscript\u003e\nwindow.alert(5 + 6);\n\u003c/script\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**4. Writing into the browser console, using `console.log()`**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003cbody\u003e\n\n\u003cscript\u003e\nconsole.log(5 + 6);\n\u003c/script\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Single Line Comments\n\nSingle line comments start with `//`\n\n```jsx\n// comments\n```\n\n## Multi-line Comments\n\nMulti-line comments start with `/*` and end with `*/`.\n\n```jsx\n/* Hey!\nHello, How are you?\n*/ \n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Variables\n\nVariables are containers for storing data values. In JavaScript, variables are declared using the `var`, `let`, or `const` keyword.\n\n### Declare Variables\n\nThere are three ways to declare variables in JavaScript:\n\n**1. var** - It is used to declare a variable. It is function-scoped.\n\n```jsx\nvar a = 1; // Declare a variable x with the value 1 (function-level scope).\n```\n\n**2. let** - It is used to declare a variable. It is block-scoped.\n\n```jsx\nlet b = 1; // Declare a variable y with the value 10 (block-level scope).\n```\n\n**3. const** - It is used to declare a read-only variable. It is block-scoped.\n\n```jsx\nconst c = 1; // Declare a read-only variable z with the value 15 (block-level scope).\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Data Types\n\nData types are used to define the type of data that a variable can store. JavaScript is a loosely typed language, which means that you do not have to declare the data type of a variable when you declare it.\n\nThere are two types of data types in JavaScript:\n\n- **Primitive Data Types**\n- **Non-Primitive Data Types**\n\n### 1. Primitive Data Types\n\n**Primitive data types** are the most basic data types in JavaScript. They are immutable (cannot be changed) and are copied by value.\n\n**Primitive data types** include:\n\n- **numbers**\n- **strings**\n- **booleans**\n- **null**\n- **undefined**\n- **symbol**\n\n**numbers** - numbers can be written with or without decimals.\n\n```javascript\nlet number = 10;\n```\n\n**strings** - strings are text. They are written inside double or single quotes.\n\n```javascript\nlet name = \"Manthan\";\n```\n\n**booleans** - booleans can only have two values: true or false.\n\n```javascript\nlet value1 = true;\nlet value2 = false;\n```\n\n**null** - null is an empty value.\n\n```javascript\nlet value = null;\n```\n\n**undefined** - undefined means a variable has been declared but has not yet been assigned a value.\n\n```javascript\nlet name;\n```\n\n**symbol** - symbols are unique and immutable values.\n\n```javascript\nlet a = Symbol();\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### 2. Non Primitive Data Types\n\n**Non-primitive data types** are complex data types that are mutable (can be changed) and are copied by reference.\n\n**Non-primitive data types** include:\n\n- **objects**\n- **arrays**\n- **functions**\n- **regexp**\n\n**functions** - functions are objects that can be invoked.\n\n```javascript\nfunction greet() {\n return \"Hello!\";\n}\n```\n\n**object** - objects are used to store collections of data and more complex entities.\n\n```javascript\nlet name = {firstName:\"Manthan\", lastName:\"Ank\"};\n```\n\n**arrays** - arrays are used to store multiple values in a single variable.\n\n```javascript\nlet array = [\"value1\", \"value2\"];\n```\n\n**regexp** - regular expressions are used to perform pattern-matching in strings.\n\n```javascript\nlet pattern = /w3schools/i;\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Operators\n\nOperators are used to perform operations on variables and values.\n\nThere are different types of operators in JavaScript:\n\n- **Arithmetic Operators**\n- **Logical Operators**\n- **Comparison Operators**\n- **Bitwise Operators**\n- **Type Operators**\n- **Assignment Operators**\n- **Conditional (Ternary) Operator**\n- **Nullish Coalescing Operator(??)**\n- **Optional Chaining Operator(?.)**\n- **delete Operator**\n- **Spread (...) Operator**\n\n### Arithmetic Operators\n\n| Operator | Description |\n| :-----------: | :-----------: |\n| + | Addition |\n| - | Subtraction |\n| * | Multiplication |\n| ** | Exponentiation (ES2016) |\n| / | Division |\n| % | Modulus (Division Remainder) |\n| ++ | Increment |\n| -- | Decrement |\n\nExamples\n\n```javascript\nlet x = 5;\nlet y = 2;\n\nconsole.log(x + y); // Output: 7\nconsole.log(x - y); // Output: 3\nconsole.log(x * y); // Output: 10\nconsole.log(x / y); // Output: 2.5\nconsole.log(x % y); // Output: 1\n\nx++;\nconsole.log(x); // Output: 6\n\ny--;\nconsole.log(y); // Output: 1\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### Logical Operators\n\n| Operator | Description |\n| :-----------: | :-----------: |\n| \u0026\u0026 | logical and |\n| ll | logical or |\n| ! | logical not |\n\nExamples\n\n```javascript\nlet x = true;\nlet y = false;\n\nconsole.log(x \u0026\u0026 y); // Output: false\nconsole.log(x || y); // Output: true\nconsole.log(!x); // Output: false\nconsole.log(!y); // Output: true\n```\n\n### Comparison Operators\n\n| Operator | Description |\n| :-----------: | :-----------: |\n| == | equal to |\n| === | equal value and equal type |\n| != | not equal |\n| !== | not equal value or not equal type |\n| \u003e | greater than |\n| \u003c | less than |\n| \u003e= | greater than or equal to |\n| \u003c= | less than or equal to |\n| ?| ternary operator |\n\nExamples\n\n```javascript |\nlet x = 5;\nlet y = 10;\n\nconsole.log(x == y); // Output: false\nconsole.log(x === y); // Output: false\nconsole.log(x != y); // Output: true\nconsole.log(x !== y); // Output: true\nconsole.log(x \u003e y); // Output: false\nconsole.log(x \u003c y); // Output: true\nconsole.log(x \u003e= y); // Output: false\nconsole.log(x \u003c= y); // Output: true\nconsole.log(x ? y : x); // Output: 10\nconsole.log(x ? x : y); // Output: 5\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### Bitwise Operators\n\n| Operator | Description |\n| :-----------: | :-----------: |\n| \u0026 | AND |\n| l | OR |\n| ~ | NOT |\n| ^| XOR |\n| \u003c\u003c | Left shift |\n| \u003e\u003e | Right shift |\n| \u003e\u003e\u003e | Unsigned right |\n\nExamples\n\n```javascript\nlet x = 5; // Binary representation: 101\nlet y = 3; // Binary representation: 011\n\nconsole.log(x \u0026 y); // Output: 1 (binary: 001)\nconsole.log(x | y); // Output: 7 (binary: 111)\nconsole.log(x ^ y); // Output: 6 (binary: 110)\nconsole.log(~x); // Output: -6 (binary: 11111111111111111111111111111010)\nconsole.log(x \u003c\u003c 1); // Output: 10 (binary: 1010)\nconsole.log(x \u003e\u003e 1); // Output: 2 (binary: 10)\nconsole.log(x \u003e\u003e\u003e 1); // Output: 2 (binary: 10)\n```\n\n### Type Operators\n\n| Operator | Description |\n| :-----------: | :-----------: |\n| typeof | Returns the type of a variable |\n| instanceof | Returns true if an object is an instance of an object type |\n\nExamples\n\n```javascript\nconsole.log(typeof 5); // Output: \"number\"\nconsole.log(typeof 'hello'); // Output: \"string\"\nconsole.log(typeof true); // Output: \"boolean\"\nconsole.log(typeof undefined); // Output: \"undefined\"\nconsole.log(typeof null); // Output: \"object\" (this is a bug in JavaScript)\nconsole.log(typeof {}); // Output: \"object\"\nconsole.log(typeof []); // Output: \"object\"\nconsole.log(typeof function() {}); // Output: \"function\"\n\nlet cars = ['BMW', 'Volvo', 'Mini'];\n\nconsole.log(cars instanceof Array); // Output: true\nconsole.log(cars instanceof Object); // Output: true\nconsole.log(cars instanceof String); // Output: false\nconsole.log(cars instanceof Number); // Output: false\nconsole.log(cars instanceof Function); // Output: false\nconsole.log(cars instanceof RegExp); // Output: false\nconsole.log(cars instanceof Date); // Output: false\nconsole.log(cars instanceof Symbol); // Output: false\nconsole.log(cars instanceof Boolean); // Output: false\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### Assignment Operators\n\n| Operator | Description |\n| :-----------: | :-----------: |\n| = | x = y |\n| += | x += y |\n| -= | x -= y |\n| *= | x *= y |\n| /= | x /= y |\n| %= | x %= y |\n| **= | x **= y |\n| : | x : 45 |\n\n```javascript\nlet x = 5;\nlet y = 10;\n\nx += y; // x = x + y\nconsole.log(x); // Output: 15\n\nx -= y; // x = x - y\nconsole.log(x); // Output: 5\n\nx *= y; // x = x * y\nconsole.log(x); // Output: 50\n\nx /= y; // x = x / y\nconsole.log(x); // Output: 5\n\nx %= y; // x = x % y\nconsole.log(x); // Output: 5\n\nx **= y; // x = x ** y\nconsole.log(x); // Output: 9765625\n\nx = y; // x = y\nconsole.log(x); // Output: 10\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### Conditional (Ternary) Operator\n\nThe conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy.\n\nSyntax\n\n```javascript\n(condition) ? x : y\n```\n\n```javascript\nlet x = 10;\nlet y = 5;\n\nlet result = (x \u003e y) ? \"x is greater than y\" : \"x is less than y\";\n\nconsole.log(result); // Output: \"x is greater than y\"\n```\n\n### Nullish Coalescing Operator(??)\n\nThe nullish coalescing operator (??) is a new operator in JavaScript that returns the right-hand operand when the left-hand operand is null or undefined.\n\nExample\n\n```javascript\nlet x = null;\nlet y = undefined;\nlet z = 'Hello';\n\nconsole.log(x ?? 'Default Value'); // Output: \"Default Value\"\nconsole.log(y ?? 'Default Value'); // Output: \"Default Value\"\nconsole.log(z ?? 'Default Value'); // Output: \"Hello\"\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### Optional Chaining Operator(?.)\n\nThe optional chaining operator (?.) is a new operator in JavaScript that allows you to access properties of an object without having to check if the object or its properties are null or undefined.\n\nExample\n\n```javascript\nlet person = {\n name: 'John',\n age: 30,\n address: {\n street: '123 Main St',\n city: 'New York',\n state: 'NY'\n }\n};\n\nconsole.log(person.address?.city); // Output: \"New York\"\nconsole.log(person.address?.zipCode); // Output: undefined\n```\n\n### delete Operator\n\nThe delete operator is used to delete a property from an object.\n\nExample\n\n```javascript\nconst person = {\n firstName:\"Manthan\",\n lastName:\"Ank\",\n age:25,\n eyeColor:\"black\"\n};\n\ndelete person.age;\n\nconsole.log(person); // Output: {firstName: \"Manthan\", lastName: \"Ank\", eyeColor: \"black\"}\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### Spread (...) Operator\n\nThe spread operator is a new addition to the JavaScript language in ES6. It is denoted by three dots (...). It is used to expand an array or object into individual elements.\n\nExample\n\n```javascript\n// Array literal\nlet numbers = [1, 2, 3];\nlet newNumbers = [...numbers, 4, 5, 6];\nconsole.log(newNumbers); // Output: [1, 2, 3, 4, 5, 6]\n\n// Object literal\nlet person = {name: 'John', age: 30};\nlet newPerson = {...person, city: 'New York', country: 'USA'};\nconsole.log(newPerson); // Output: {name: \"John\", age: 30, city: \"New York\", country: \"USA\"}\n\n// Function call\nfunction sum(a, b, c) {\n return a + b + c;\n}\nlet numbers = [1, 2, 3];\nconsole.log(sum(...numbers)); // Output: 6\n\n// Copy an array\nlet numbers = [1, 2, 3];\nlet newNumbers = [...numbers];\nconsole.log(newNumbers); // Output: [1, 2, 3]\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Boolean\n\nJavaScript booleans can have one of two values: true or false.\n\n```javascript\nlet value = true;\n```\n\n### Boolean Methods and Properties\n\nThe following are some of the most commonly used boolean methods and properties in JavaScript:\n\n**constructor** - Returns the function that created JavaScript's Boolean prototype\n\n```javascript\nlet value = true;\n\nconsole.log(value.constructor); // Output: ƒ Boolean() { [native code] }\n```\n\n**prototype** - Allows you to add properties and methods to the Boolean prototype\n\n```javascript\nBoolean.prototype.age = 25;\n\nlet value = true;\n\nconsole.log(value.age); // Output: 25\n```\n\n**toString()** - Converts a boolean value to a string, and returns the result\n\n```javascript\nlet value = true;\n\nconsole.log(value.toString()); // Output: \"true\"\n```\n\n**valueOf()** - Returns the primitive value of a boolean\n\n```javascript\nlet value = true;\n\nconsole.log(value.valueOf()); // Output: true\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Object\n\nObjects are used to store key/value (name/value) collections.\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n```\n\n### Object Methods \u0026 Properties\n\nThe following are some of the most commonly used object methods and properties in JavaScript:\n\n**constructor** - Returns the function that created an object's prototype\n\n```javascript\nlet person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nconsole.log(person.constructor); // Output: ƒ Object() { [native code] }\n```\n\n**keys()** - Returns an Array Iterator object with the keys of an object\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nlet keys = Object.keys(person);\nconsole.log(keys); // Output: [\"firstName\", \"lastName\"]\n```\n\n**prototype** - Let you to add properties and methods to JavaScript objects\n\n```javascript\nlet person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nObject.prototype.age = 25;\n\nconsole.log(person.age); // Output: 25\n```\n\n**toString()** - Converts an object to a string and returns the result\n\n```javascript\nlet person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nconsole.log(person.toString()); // Output: \"[object Object]\"\n```\n\n**valueOf()** - Returns the primitive value of an object\n\n```javascript\nlet person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nconsole.log(person.valueOf()); // Output: {firstName: \"Manthan\", lastName: \"Ank\"}\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Arrays\n\nArrays are used to store multiple values in a single variable.\n\n```javascript\nconst letters = ['a', 'b', 'c'];\n```\n\n### Array Methods\n\nThe following are some of the most commonly used array methods in JavaScript:\n\n- **at()**\n- **concat()**\n- **constructor**\n- **copyWithin()**\n- **entries()**\n- **every()**\n- **fill()**\n- **filter()**\n- **find()**\n- **findIndex()**\n- **findLast()**\n- **findLastIndex()**\n- **flat()**\n- **flatMap()**\n- **forEach()**\n- **from()**\n- **includes()**\n- **indexOf()**\n- **isArray()**\n- **join()**\n- **keys()**\n- **lastIndexOf()**\n- **length**\n- **map()**\n- **pop()**\n- **prototype**\n- **push()**\n- **reduce()**\n- **reduceRight()**\n- **reverse()**\n- **shift()**\n- **slice()**\n- **some()**\n- **sort()**\n- **splice()**\n- **toLocaleString()**\n- **toReversed()**\n- **toSorted()**\n- **toSpliced()**\n- **toString()**\n- **unshift()**\n- **valueOf()**\n- **values()**\n- **with()**\n\n[Back to Top⤴️](#table-of-contents)\n\n**at()** - Returns the element at a specified index in an array\n\n```javascript\nlet array = ['a', 'b', 'c'];\n\nconsole.log(array.at(1)); // Output: \"b\"\n```\n\n**concat()** - Joins arrays and returns an array with the joined arrays.\n\n```javascript\nlet array1 = ['a', 'b', 'c'];\nlet array2 = ['d', 'e', 'f'];\n\nlet mergedArray = array1.concat(array2);\nconsole.log(mergedArray); // mergedArray is ['a', 'b', 'c', 'd', 'e', 'f']\n```\n\n**constructor** - Returns the function that created the Array object's prototype\n\n```javascript\nlet array = ['a', 'b', 'c'];\n\nconsole.log(array.constructor); // Output: ƒ Array() { [native code] }\n```\n\n**copyWithin()** - Copies array elements within the array, to and from specified positions\n\n```javascript\nlet array = ['a', 'b', 'c', 'd', 'e', 'f'];\n\narray.copyWithin(2, 0);\nconsole.log(array); // Output: [\"a\", \"b\", \"a\", \"b\", \"c\", \"d\"]\n\narray.copyWithin(4, 0, 2);\nconsole.log(array); // Output: [\"a\", \"b\", \"a\", \"b\", \"a\", \"b\"]\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**entries()** - Returns a key/value pair Array Iteration Object\n\n```javascript\nlet array = ['a', 'b', 'c'];\n\nlet iterator = array.entries();\n\nconsole.log(iterator.next().value); // Output: [0, \"a\"]\nconsole.log(iterator.next().value); // Output: [1, \"b\"]\nconsole.log(iterator.next().value); // Output: [2, \"c\"]\n```\n\n**every()** - Checks if every element in an array pass a test\n\n```javascript\nlet array = [1, 2, 3, 4, 5];\n\nlet result = array.every(value =\u003e value \u003e 0);\n\nconsole.log(result); // Output: true\n```\n\n**fill()** - Fill the elements in an array with a static value\n\n```javascript\nlet array = ['a', 'b', 'c', 'd', 'e', 'f'];\n\narray.fill('x', 2, 4);\n\nconsole.log(array); // Output: [\"a\", \"b\", \"x\", \"x\", \"e\", \"f\"]\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**filter()** - Creates a new array with every element in an array that pass a test\n\n```javascript\nlet array = [1, 2, 3, 4, 5];\n\nlet newArray = array.filter(value =\u003e value \u003e 3);\n\nconsole.log(array); // Output: [1, 2, 3, 4, 5]\nconsole.log(newArray); // Output: [4, 5]\n```\n\n**find()** - Returns the value of the first element in an array that pass a test\n\n```javascript\nlet array = [1, 2, 3, 4, 5];\n\nlet value = array.find(value =\u003e value \u003e 3);\n\nconsole.log(array); // Output: [1, 2, 3, 4, 5]\nconsole.log(value); // Output: 4\n```\n\n**findIndex()** - Returns the index of the first element in an array that pass a test\n\n```javascript\nlet array = [1, 2, 3, 4, 5];\n\nlet index = array.findIndex(value =\u003e value \u003e 3);\n\nconsole.log(array); // Output: [1, 2, 3, 4, 5]\nconsole.log(index); // Output: 3\n```\n\n**findLast()** - Returns the value of the last element in an array that pass a test\n\n```javascript\nlet array = [1, 2, 3, 4, 5];\n\nlet value = array.findLast(value =\u003e value \u003e 3);\n\nconsole.log(array); // Output: [1, 2, 3, 4, 5]\nconsole.log(value); // Output: 5\n```\n\n**findLastIndex()** - Returns the index of the last element in an array that pass a test\n\n```javascript\nlet array = [1, 2, 3, 4, 5];\n\nlet index = array.findLastIndex(value =\u003e value \u003e 3);\n\nconsole.log(array); // Output: [1, 2, 3, 4, 5]\nconsole.log(index); // Output: 4\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**flat()** - Flattens an array up to a specified depth\n\n```javascript\nlet array = [1, 2, [3, 4, [5, 6]]];\n\nlet newArray = array.flat(2);\n\nconsole.log(array); // Output: [1, 2, [3, 4, [5, 6]]]\nconsole.log(newArray); // Output: [1, 2, 3, 4, 5, 6]\n```\n\n**flatMap()** - Maps each element using a mapping function, then flattens the result into a new array\n\n```javascript\nlet array = [1, 2, 3, 4, 5];\n\nlet newArray = array.flatMap(value =\u003e [value * 2]);\n\nconsole.log(array); // Output: [1, 2, 3, 4, 5]\nconsole.log(newArray); // Output: [2, 4, 6, 8, 10]\n```\n\n**forEach()** - Calls a function for each array element\n\n```javascript\nlet array = [1, 2, 3, 4, 5];\n\narray.forEach(value =\u003e {\n console.log(value);\n});\n\n// Output: 1\n// Output: 2\n// Output: 3\n// Output: 4\n// Output: 5\n```\n\n**from()** - Creates an array from an object\n\n```javascript\nlet array = 'hello';\n\nlet newArray = Array.from(array);\n\nconsole.log(array); // Output: \"hello\"\nconsole.log(newArray); // Output: [\"h\", \"e\", \"l\", \"l\", \"o\"]\n```\n\n**includes()** - Check if an array contains the specified element\n\n```javascript\nlet array = [1, 2, 3, 4, 5];\n\nlet result = array.includes(3);\n\nconsole.log(array); // Output: [1, 2, 3, 4, 5]\n\nconsole.log(result); // Output: true\nconsole.log(array.includes(6)); // Output: false\n```\n\n**indexOf()** - Search the array for an element and returns its position\n\n```javascript\nlet array = [1, 2, 3, 4, 5];\n\nlet index = array.indexOf(3);\n\nconsole.log(array); // Output: [1, 2, 3, 4, 5]\n\nconsole.log(index); // Output: 2\nconsole.log(array.indexOf(6)); // Output: -1\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**isArray()** - Checks whether an object is an array\n\n```javascript\nlet array = [1, 2, 3, 4, 5];\n\nlet result = Array.isArray(array);\n\nconsole.log(array); // Output: [1, 2, 3, 4, 5]\n\nconsole.log(result); // Output: true\nconsole.log(Array.isArray('hello')); // Output: false\n```\n\n**join()** - Joins all elements of an array into a string\n\n```javascript\nlet array = ['a', 'b', 'c'];\n\nlet result = array.join();\n\nconsole.log(array); // Output: [\"a\", \"b\", \"c\"]\nconsole.log(result); // Output: \"a,b,c\"\n```\n\n**keys()** - Returns a Array Iteration Object, containing the keys of the original array\n\n```javascript\nlet array = ['a', 'b', 'c'];\n\nlet iterator = array.keys();\n\nconsole.log(array); // Output: [\"a\", \"b\", \"c\"]\nconsole.log(iterator.next().value); // Output: 0\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**lastIndexOf()** - Search the array for an element, starting at the end, and returns its position\n\n```javascript\nlet array = [1, 2, 3, 4, 5, 3];\n\nlet index = array.lastIndexOf(3);\n\nconsole.log(array); // Output: [1, 2, 3, 4, 5, 3]\nconsole.log(index); // Output: 5\n```\n\n**length** - Sets or returns the number of elements in an array\n\n```javascript\nlet array = ['a', 'b', 'c'];\n\nconsole.log(array); // Output: [\"a\", \"b\", \"c\"]\nconsole.log(array.length); // Output: 3\n```\n\n**map()** - Creates a new array with the result of calling a function for each array element\n\n```javascript\nlet array = [1, 2, 3, 4, 5];\n\nlet newArray = array.map(value =\u003e value * 2);\n\nconsole.log(array); // Output: [1, 2, 3, 4, 5]\nconsole.log(newArray); // Output: [2, 4, 6, 8, 10]\n```\n\n**pop()** - Removes the last element of an array, and returns that element\n\n```javascript\nlet array = ['a', 'b', 'c'];\n\nlet element = array.pop();\n\nconsole.log(array); // Output: [\"a\", \"b\"]\nconsole.log(element); // Output: \"c\"\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**prototype** - Allows you to add properties and methods to an Array object\n\n```javascript\nlet array = ['a', 'b', 'c'];\n\nArray.prototype.age = 25;\n\nconsole.log(array); // Output: [\"a\", \"b\", \"c\"]\nconsole.log(array.age); // Output: 25\n```\n\n**push()** - Adds new elements to the end of an array, and returns the new length\n\n```javascript\nlet array = ['a', 'b', 'c'];\n\nlet length = array.push('d', 'e');\n\nconsole.log(array); // Output: [\"a\", \"b\", \"c\", \"d\", \"e\"]\nconsole.log(length); // Output: 4\n```\n\n**reduce()** - Reduce the values of an array to a single value (going left-to-right)\n\n```javascript\nlet array = [1, 2, 3, 4, 5];\n\nlet total = array.reduce((accumulator, value) =\u003e accumulator + value, 0);\n\nconsole.log(array); // Output: [1, 2, 3, 4, 5]\nconsole.log(total); // Output: 15\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**reduceRight()** - Reduce the values of an array to a single value (going right-to-left)\n\n```javascript\nlet array = [1, 2, 3, 4, 5];\n\nlet total = array.reduceRight((accumulator, value) =\u003e accumulator + value, 0);\n\nconsole.log(array); // Output: [1, 2, 3, 4, 5]\nconsole.log(total); // Output: 15\n```\n\n**reverse()** - Reverses the order of the elements in an array\n\n```javascript\nlet array = ['a', 'b', 'c'];\n\narray.reverse();\n\nconsole.log(array); // Output: [\"c\", \"b\", \"a\"]\n```\n\n**shift()** - Removes the first element of an array, and returns that element\n\n```javascript\nlet array = ['a', 'b', 'c'];\n\nlet element = array.shift();\n\nconsole.log(array); // Output: [\"b\", \"c\"]\nconsole.log(element); // Output: \"a\"\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**slice()** - Selects a part of an array, and returns the new array\n\n```javascript\nlet array = ['a', 'b', 'c', 'd', 'e', 'f'];\n\nlet newArray = array.slice(2, 4);\n\nconsole.log(array); // Output: [\"a\", \"b\", \"c\", \"d\", \"e\", \"f\"]\nconsole.log(newArray); // Output: [\"c\", \"d\"]\n```\n\n**some()** - Checks if any of the elements in an array pass a test\n\n```javascript\nlet array = [1, 2, 3, 4, 5];\n\nlet result = array.some(value =\u003e value \u003e 3);\n\nconsole.log(array); // Output: [1, 2, 3, 4, 5]\nconsole.log(result); // Output: true\n```\n\n**sort()** - Sorts the elements of an array\n\n```javascript\nlet array = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];\n\narray.sort();\n\nconsole.log(array); // Output: [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**splice()** - Adds/Removes elements from an array\n\n```javascript\nlet array = ['a', 'b', 'c', 'd', 'e', 'f'];\n\narray.splice(2, 0, 'x', 'y');\n\nconsole.log(array); // Output: [\"a\", \"b\", \"x\", \"y\", \"c\", \"d\", \"e\", \"f\"]\n```\n\n**toLocaleString()** - Converts an array to a string, using locale-specific settings\n\n```javascript\nlet array = ['a', 'b', 'c'];\n\nconsole.log(array.toLocaleString()); // Output: \"a,b,c\"\n```\n\n**toReversed()** - Reverses the elements of an array\n\n```javascript\nlet array = ['a', 'b', 'c'];\n\nlet reversedArray = array.toReversed();\n\nconsole.log(array); // Output: [\"a\", \"b\", \"c\"]\nconsole.log(reversedArray); // Output: [\"c\", \"b\", \"a\"]\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**toSorted()** - Sorts the elements of an array\n\n```javascript\nlet array = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];\n\nlet sortedArray = array.toSorted();\n\nconsole.log(array); // Output: [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]\nconsole.log(sortedArray); // Output: [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]\n```\n\n**toSpliced()** - Adds/Removes elements from an array\n\n```javascript\nlet array = ['a', 'b', 'c', 'd', 'e', 'f'];\n\nlet splicedArray = array.toSpliced(2, 0, 'x', 'y');\n\nconsole.log(array); // Output: [\"a\", \"b\", \"c\", \"d\", \"e\", \"f\"]\nconsole.log(splicedArray); // Output: [\"a\", \"b\", \"x\", \"y\", \"c\", \"d\", \"e\", \"f\"]\n```\n\n**toString()** - Converts an array to a string, and returns the result\n\n```javascript\nlet array = ['a', 'b', 'c'];\n\nconsole.log(array.toString()); // Output: \"a,b,c\"\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**unshift()** - Adds new elements to the beginning of an array, and returns the new length\n\n```javascript\nlet array = ['a', 'b', 'c'];\n\nlet length = array.unshift('x', 'y');\n\nconsole.log(array); // Output: [\"x\", \"y\", \"a\", \"b\", \"c\"]\n```\n\n**valueOf()** - Returns the primitive value of an array\n\n```javascript\nlet array = ['a', 'b', 'c'];\n\nconsole.log(array.valueOf()); // Output: [\"a\", \"b\", \"c\"]\n```\n\n**values()** - Returns an Array Iteration Object, containing the values of the original array\n\n```javascript\nlet array = ['a', 'b', 'c'];\n\nlet iterator = array.values();\n\nconsole.log(array); // Output: [\"a\", \"b\", \"c\"]\nconsole.log(iterator.next().value); // Output: \"a\"\n```\n\n**with()** - Allows you to add properties and methods to an Array object\n\n```javascript\nlet array = ['a', 'b', 'c'];\n\nArray.with = 25;\n\nconsole.log(array); // Output: [\"a\", \"b\", \"c\"]\nconsole.log(Array.with); // Output: 25\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Strings\n\nStrings are used to store text. Strings must be enclosed in single or double quotes.\n\n```javascript\nconst name = 'Manthan';\n```\n\n### Strings methods\n\nThe following are some of the most commonly used string methods in JavaScript:\n\n- **at()**\n- **charAt()**\n- **charCodeAt()**\n- **concat()**\n- **constructor**\n- **endsWith()**\n- **fromCharCode()**\n- **includes()**\n- **indexOf()**\n- **lastIndexOf()**\n- **length**\n- **localeCompare()**\n- **match()**\n- **matchAll()**\n- **padEnd()**\n- **padStart()**\n- **prototype**\n- **repeat()**\n- **replace()**\n- **replaceAll()**\n- **search()**\n- **slice()**\n- **split()**\n- **startsWith()**\n- **substr()**\n- **substring()**\n- **toLocaleLowerCase()**\n- **toLocaleUpperCase()**\n- **toLowerCase()**\n- **toString()**\n- **toUpperCase()**\n- **trim()**\n- **trimEnd()**\n- **trimStart()**\n- **valueOf()**\n\n[Back to Top⤴️](#table-of-contents)\n\n**at()** - Returns the character at a specified index (position)\n\n```javascript\nlet myString = \"Hello World!\";\n\nconsole.log(myString.at(0)); // Output: \"H\"\n```\n\n**charAt()** - Returns the character at a specified index (position)\n\n```javascript\nlet myString = \"Hello World!\";\n\nconsole.log(myString.charAt(0)); // Output: \"H\"\n```\n\n**charCodeAt()** - Returns the Unicode of the character at a specified index\n\n```javascript\nlet myString = \"Hello World!\";\n\nconsole.log(myString.charCodeAt(0)); // Output: 72\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**concat()** - Returns two or more joined strings\n\n```javascript\nlet myString1 = \"Hello\";\nlet myString2 = \"World!\";\n\nlet newString = myString1.concat(\" \", myString2);\n\nconsole.log(newString); // Output: \"Hello World!\"\n```\n\n**constructor** - Returns the string's constructor function\n\n```javascript\nlet myString = \"Hello World!\";\n\nconsole.log(myString.constructor); // Output: ƒ String() { [native code] }\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**endsWith()** - Returns if a string ends with a specified value\n\n```javascript\nlet myString = \"Hello World!\";\n\nconsole.log(myString.endsWith(\"!\")); // Output: true\n```\n\n**fromCharCode()** - Returns Unicode values as characters\n\n```javascript\nlet myString = String.fromCharCode(72, 101, 108, 108, 111);\n\nconsole.log(myString); // Output: \"Hello\"\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**includes()** - Returns if a string contains a specified value\n\n```javascript\nlet myString = \"Hello World!\";\n\nconsole.log(myString.includes(\"World\")); // Output: true\n```\n\n**indexOf()** - Returns the index (position) of the first occurrence of a value in a string\n\n```javascript\nlet myString = \"Hello World!\";\n\nconsole.log(myString.indexOf(\"World\")); // Output: 6\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**lastIndexOf()** - Returns the index (position) of the last occurrence of a value in a string\n\n```javascript\nlet myString = \"Hello World! World!\";\n\nconsole.log(myString.lastIndexOf(\"World\")); // Output: 13\n```\n\n**length** - Returns the length of a string\n\n```javascript\nlet myString = \"Hello World!\";\n\nconsole.log(myString.length); // Output: 12\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**localeCompare()** - Compares two strings in the current locale\n\n```javascript\nlet myString = \"Hello World!\";\n\nconsole.log(myString.localeCompare(\"Hello World!\")); // Output: 0\n```\n\n**match()** - Searches a string for a value, or a regular expression, and returns the matches\n\n```javascript\nlet myString = \"The quick brown fox jumps over the lazy dog.\";\n\nlet result = myString.match(/the/i);\n\nconsole.log(myString); // Output: \"The quick brown fox jumps over the lazy dog.\"\nconsole.log(result); // Output: [\"the\", index: 30, input: \"The quick brown fox jumps over the lazy dog.\", groups: undefined]\n```\n\n**matchAll()** - Returns an iterator of all results matching a string against a regular expression\n\n```javascript\nlet myString = \"The quick brown fox jumps over the lazy dog.\";\n\nlet result = myString.matchAll(/the/gi);\n\nconsole.log(myString); // Output: \"The quick brown fox jumps over the lazy dog.\"\nconsole.log(result); // Output: [RegExpStringIterator]\n```\n\n**padEnd()** - Pads a string with a specified value at the end\n\n```javascript\nlet myString = \"Hello\";\n\nlet newString = myString.padEnd(10, \" World!\");\n\nconsole.log(myString); // Output: \"Hello\"\nconsole.log(newString); // Output: \"Hello World!\"\n```\n\n**padStart()** - Pads a string with a specified value at the start\n\n```javascript\nlet myString = \"Hello\";\n\nlet newString = myString.padStart(10, \" World!\");\n\nconsole.log(myString); // Output: \"Hello\"\nconsole.log(newString); // Output: \" World!Hello\"\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**prototype** - Allows you to add properties and methods to an object\n\n```javascript\nlet myString = \"Hello World!\";\nString.prototype.age = 25;\n\nconsole.log(myString.age); // Output: 25\n```\n\n**repeat()** - Returns a new string with a number of copies of a string\n\n```javascript\nlet myString = \"Hello World!\";\n\nconsole.log(myString.repeat(2)); // Output: \"Hello World!Hello World!\"\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**replace()** - Searches a string for a value, or a regular expression, and returns a string where the values are replaced\n\n```javascript\nlet myString = \"Hello World!\";\n\nlet newString = myString.replace(\"World\", \"Universe\");\n\nconsole.log(myString); // Output: \"Hello World!\"\nconsole.log(newString); // Output: \"Hello Universe!\"\n```\n\n**search()** - Searches a string for a value, or regular expression, and returns the index (position) of the match\n\n```javascript\nlet myString = \"The quick brown fox jumps over the lazy dog.\";\n\nlet result = myString.search(/fox/);\n\nconsole.log(myString); // Output: \"The quick brown fox jumps over the lazy dog.\"\nconsole.log(result); // Output: 16\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**slice()** - Extracts a part of a string and returns a new string\n\n```javascript\nlet myString = \"Hello World!\";\n\nlet newString = myString.slice(6, 11);\n\nconsole.log(myString); // Output: \"Hello World!\"\nconsole.log(newString); // Output: \"World\"\n```\n\n**split()** - Splits a string into an array of substrings\n\n```javascript\nlet myString = \"Hello World!\";\n\nlet array = myString.split(\" \");\n\nconsole.log(myString); // Output: \"Hello World!\"\nconsole.log(array); // Output: [\"Hello\", \"World!\"]\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**startsWith()** - Checks whether a string begins with specified characters\n\n```javascript\nlet myString = \"Hello World!\";\n\nconsole.log(myString.startsWith(\"Hello\")); // Output: true\n```\n\n**substr()** - Extracts a number of characters from a string, from a start index (position)\n\n```javascript\nlet myString = \"Hello World!\";\n\nlet newString = myString.substr(6, 5);\n\nconsole.log(myString); // Output: \"Hello World!\"\nconsole.log(newString); // Output: \"World\"\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**substring()** - Extracts characters from a string, between two specified indices (positions)\n\n```javascript\nlet myString = \"Hello World!\";\n\nlet newString = myString.substring(6, 11);\n\nconsole.log(myString); // Output: \"Hello World!\"\nconsole.log(newString); // Output: \"World\"\n```\n\n**toLocaleLowerCase()** - Returns a string converted to lowercase letters, using the host's locale\n\n```javascript\nlet myString = \"Hello World!\";\n\nconsole.log(myString.toLocaleLowerCase()); // Output: \"hello world!\"\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**toLocaleUpperCase()** - Returns a string converted to uppercase letters, using the host's locale\n\n```javascript\nlet myString = \"Hello World!\";\n\nconsole.log(myString.toLocaleUpperCase()); // Output: \"HELLO WORLD!\"\n```\n\n**toLowerCase()** - Returns a string converted to lowercase letters\n\n```javascript\nlet myString = \"Hello World!\";\n\nconsole.log(myString); // Output: \"Hello World!\"\nconsole.log(myString.toLowerCase()); // Output: \"hello world!\"\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**toString()** - Returns a string or a string object as a string\n\n```javascript\nlet myString = \"Hello World!\";\nlet number = 25; \n\nconsole.log(myString.toString()); // Output: \"Hello World!\"\nconsole.log(number.toString()); // Output: \"25\"\n```\n\n**toUpperCase()** - Returns a string converted to uppercase letters\n\n```javascript\nlet myString = \"Hello World!\";\n\nconsole.log(myString); // Output: \"Hello World!\"\nconsole.log(myString.toUpperCase()); // Output: \"HELLO WORLD\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**trim()** - Returns a string with removed whitespaces\n\n```javascript\nlet myString = \" Hello World! \";\n\nconsole.log(myString); // Output: \" Hello World! \"\nconsole.log(myString.trim()); // Output: \"Hello World!\"\n```\n\n**trimEnd()** - Returns a string with removed whitespaces from the end\n\n```javascript\nlet myString = \" Hello World! \";\n\nconsole.log(myString); // Output: \" Hello World! \"\nconsole.log(myString.trimEnd()); // Output: \" Hello World!\"\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**trimStart()** - Returns a string with removed whitespaces from the start\n\n```javascript\nlet myString = \" Hello World! \";\n\nconsole.log(myString); // Output: \" Hello World! \"\nconsole.log(myString.trimStart()); // Output: \"Hello World! \"\n```\n\n**valueOf()** - Returns the primitive value of a string or a string object.\n\n```javascript\nlet myString = \"Hello World!\";\n\nconsole.log(myString.valueOf()); // Output: \"Hello World!\"\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Objects\n\nObjects are used to store collections of data and more complex entities.\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n age: 25,\n hobbies: [\"reading\", \"coding\", \"traveling\"],\n address: {\n street: \"123 Main St\",\n city: \"Mumbai\",\n state: \"MH\",\n },\n};\n```\n\n### Object Methods\n\nThe following are some of the most commonly used object methods in JavaScript:\n\n- **assign()**\n- **create()**\n- **defineProperties()**\n- **defineProperty()**\n- **entries()**\n- **freeze()**\n- **fromEntries()**\n- **getOwnPropertyDescriptor()**\n- **getOwnPropertyDescriptors()**\n- **getOwnPropertyNames()**\n- **getOwnPropertySymbols()**\n- **getPrototypeOf()**\n- **groupBy()**\n- **hasOwn()**\n- **is()**\n- **isExtensible()**\n- **isFrozen()**\n- **isSealed()**\n- **keys()**\n- **preventExtensions()**\n- **prototype**\n- **seal()**\n- **setPrototypeOf()**\n- **values()**\n\n[Back to Top⤴️](#table-of-contents)\n\n**assign()** - Copies the values of all enumerable own properties from one or more source objects to a target object\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nconst details = {\n age: 25,\n hobbies: [\"reading\", \"coding\", \"traveling\"],\n};\n\nconst newPerson = Object.assign(person, details);\n\nconsole.log(newPerson); // Output: {firstName: \"Manthan\", lastName: \"Ank\", age: 25, hobbies: Array(3)}\n```\n\n**create()** - Creates a new object with the specified prototype object and properties\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nconst newPerson = Object.create(person);\n\nconsole.log(newPerson); // Output: {}\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**defineProperties()** - Defines new or modifies existing properties directly on an object, returning the object\n\n```javascript\nconst person = {};\n\nObject.defineProperties(person, {\n firstName: {\n value: \"Manthan\",\n writable: true,\n },\n lastName: {\n value: \"Ank\",\n writable: true,\n },\n});\n\nconsole.log(person); // Output: {firstName: \"Manthan\", lastName: \"Ank\"}\n```\n\n**defineProperty()** - Defines a new property directly on an object, or modifies an existing property on an object, and returns the object\n\n```javascript\nconst person = {};\n\nObject.defineProperty(person, \"firstName\", {\n value: \"Manthan\",\n writable: true,\n});\n\nconsole.log(person); // Output: {firstName: \"Manthan\"}\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**entries()** - Returns an array of a given object's own enumerable string-keyed property [key, value] pairs\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nconst entries = Object.entries(person);\n\nconsole.log(entries); // Output: [[\"firstName\", \"Manthan\"], [\"lastName\", \"Ank\"]]\n```\n\n**freeze()** - Freezes an object: other code can't delete or change any properties\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nObject.freeze(person);\n\nperson.age = 25;\n\nconsole.log(person); // Output: {firstName: \"Manthan\", lastName: \"Ank\"}\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**fromEntries()** - Returns a new object from an iterable of [key, value] pairs\n\n```javascript\nconst entries = [\n [\"firstName\", \"Manthan\"],\n [\"lastName\", \"Ank\"],\n];\n\nconst person = Object.fromEntries(entries);\n\nconsole.log(person); // Output: {firstName: \"Manthan\", lastName: \"Ank\"}\n```\n\n**getOwnPropertyDescriptor()** - Returns a property descriptor for a named property on an object\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nconst descriptor = Object.getOwnPropertyDescriptor(person, \"firstName\");\n\nconsole.log(descriptor); // Output: {value: \"Manthan\", writable: true, enumerable: true, configurable: true}\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**getOwnPropertyDescriptors()** - Returns all own property descriptors of a given object\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nconst descriptors = Object.getOwnPropertyDescriptors(person);\n\nconsole.log(descriptors); // Output: {firstName: {…}, lastName: {…}}\n```\n\n**getOwnPropertyNames()** - Returns an array of all properties (enumerable or not) found directly upon a given object\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nconst properties = Object.getOwnPropertyNames(person);\n\nconsole.log(properties); // Output: [\"firstName\", \"lastName\"]\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**getOwnPropertySymbols()** - Returns an array of all symbol properties found directly upon a given object\n\n```javascript\nconst person = {\n [Symbol(\"firstName\")]: \"Manthan\",\n [Symbol(\"lastName\")]: \"Ank\",\n};\n\nconst symbols = Object.getOwnPropertySymbols(person);\n\nconsole.log(symbols); // Output: [Symbol(firstName), Symbol(lastName)]\n```\n\n**getPrototypeOf()** - Returns the prototype of the specified object\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nconst prototype = Object.getPrototypeOf(person);\n\nconsole.log(prototype); // Output: {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**groupBy()** - Groups the elements of an array based on the given function\n\n```javascript\nconst people = [\n { name: \"Manthan\", age: 25 },\n { name: \"Ank\", age: 30 },\n { name: \"John\", age: 25 },\n];\n\nconst groupedPeople = people.groupBy(person =\u003e person.age);\n\nconsole.log(groupedPeople); // Output: {25: Array(2), 30: Array(1)}\n```\n\n**hasOwn()** - Returns a boolean indicating whether the object has the specified property as its own property\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nconsole.log(person.hasOwn(\"firstName\")); // Output: true\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**is()** - Compares if two values are the same value\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nconst newPerson = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nconsole.log(Object.is(person, newPerson)); // Output: false\n```\n\n**isExtensible()** - Returns a boolean indicating if the object is extensible\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nconsole.log(Object.isExtensible(person)); // Output: true\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**isFrozen()** - Returns a boolean indicating if the object is frozen\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nObject.freeze(person);\n\nconsole.log(Object.isFrozen(person)); // Output: true\n```\n\n**isSealed()** - Returns a boolean indicating if the object is sealed\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nObject.seal(person);\n\nconsole.log(Object.isSealed(person)); // Output: true\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**keys()** - Returns an array of a given object's own enumerable property names\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nconst keys = Object.keys(person);\n\nconsole.log(keys); // Output: [\"firstName\", \"lastName\"]\n```\n\n**preventExtensions()** - Prevents any extensions of an object\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nObject.preventExtensions(person);\n\nperson.age = 25;\n\nconsole.log(person); // Output: {firstName: \"Manthan\", lastName: \"Ank\"}\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**prototype** - Allows you to add properties and methods to an object\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nObject.prototype.age = 25;\n\nconsole.log(person.age); // Output: 25\n```\n\n**seal()** - Prevents other code from deleting properties of an object\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nObject.seal(person);\n\ndelete person.firstName;\n\nconsole.log(person); // Output: {firstName: \"Manthan\", lastName: \"Ank\"}\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**setPrototypeOf()** - Sets the prototype (i.e., the internal [[Prototype]] property) of a specified object to another object or null\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nconst newPerson = {\n age: 25,\n};\n\nObject.setPrototypeOf(newPerson, person);\n\nconsole.log(newPerson); // Output: {age: 25}\n```\n\n**values()** - Returns an array of a given object's own enumerable property values\n\n```javascript\nconst person = {\n firstName: \"Manthan\",\n lastName: \"Ank\",\n};\n\nconst values = Object.values(person);\n\nconsole.log(values); // Output: [\"Manthan\", \"Ank\"]\n```\n\n## Loops\n\nLoops are used to execute a block of code multiple times.\n\nThere are several types of loops in JavaScript:\n\n- for loop\n- while loop\n- do while loop\n- for in loop\n- for of loop\n\n[Back to Top⤴️](#table-of-contents)\n\n### for loop\n\nThis type of loop is used to execute a block of code a specified number of times.\n\n```javascript\nfor (let i = 0; i \u003c 5; i++) {\n console.log(i);\n}\n```\n\n### while loop\n\nThis type of loop is used to execute a block of code as long as a specified condition is true.\n\n```javascript\nlet i = 0;\nwhile (i \u003c 5) {\n console.log(i);\n i++;\n}\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### do while loop\n\nThis type of loop is similar to the while loop, but it guarantees that the code block will be executed at least once.\n\n```javascript\nlet i = 0;\ndo {\n console.log(i);\n i++;\n} while (i \u003c 5);\n```\n\n### for in loop\n\nThis type of loop is used to iterate over the enumerable properties of an object.\n\n```javascript\nlet obj = {a: 1, b: 2, c: 3};\nfor (let prop in obj) {\n console.log(prop + \": \" + obj[prop]);\n}\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### for of loop\n\nThis type of loop is used to iterate over the iterable objects such as arrays, strings, and maps.\n\n```javascript\nlet arr = [1, 2, 3];\nfor (let value of arr) {\n console.log(value);\n}\n```\n\n## Conditional Statements\n\nConditional statements are used to perform different actions based on different conditions.\n\nThere are several types of conditional statements in JavaScript:\n\n- if statement\n- if else statement\n- if else else if statement\n- switch statement\n\n[Back to Top⤴️](#table-of-contents)\n\n## if statement\n\nThe if statement is used to execute a block of code if a specified condition is true.\n\n```javascript\nif (x \u003e 0) {\n console.log(\"x is greater than 0\");\n}\n```\n\n### if else statement\n\nThe if...else statement is used to execute a block of code if a specified condition is true and another block of code if the condition is false.\n\n```javascript\nif (x \u003e 0) {\n console.log(\"x is greater than 0\");\n} else {\n console.log(\"x is not greater than 0\");\n}\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### if else else if statement\n\nThe if...else if...else statement is used to specify multiple conditions and execute a different block of code for each one.\n\n```javascript\nif (x \u003e 0) {\n console.log(\"x is positive\");\n} else if (x \u003c 0) {\n console.log(\"x is negative\");\n} else {\n console.log(\"x is zero\");\n}\n```\n\n### switch statement\n\nThe switch statement is used to select one of many blocks of code to be executed.\n\n```javascript\nlet day = new Date().getDay();\nswitch (day) {\n case 0:\n console.log(\"Sunday\");\n break;\n case 1:\n console.log(\"Monday\");\n break;\n case 2:\n console.log(\"Tuesday\");\n break;\n // and so on\n default:\n console.log(\"Invalid day\");\n}\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Functions\n\nFunctions are blocks of code that can be reused to perform a specific task. Defined with the function keyword, followed by a name, followed by parentheses ().\n\n```jsx\nfunction name(parameter1, parameter2, parameter3) {\n // code to be executed\n}\n```\n\n### Types of Functions\n\n- Named Function\n- Anonymous Function\n- Arrow Function\n- IIFE\n- Higher-Order Function\n- Function Expression\n- Function Declaration\n- Function Constructor\n\n[Back to Top⤴️](#table-of-contents)\n\n### Named Function\n\nA named function is a function that has a name. It can be defined using the function keyword followed by the function name.\n\n```javascript\nfunction name(parameter1, parameter2, parameter3) {\n // code to be executed\n}\n```\n\n### Anonymous Function\n\nAn anonymous function is a function that does not have a name. It can be defined using the function keyword followed by parentheses ().\n\n```javascript\nconst name = function(parameter1, parameter2, parameter3) {\n // code to be executed\n}\n```\n\n### Arrow Function\n\nArrow functions are a more concise way to write functions in JavaScript. They are defined using the =\u003e syntax.\n\n```javascript\nconst name = (parameter1, parameter2, parameter3) =\u003e {\n // code to be executed\n}\n\nconst name = (parameter1, parameter2, parameter3) =\u003e expression\n\nconst name = parameter =\u003e expression\n\nconst name = () =\u003e expression\n\nconst name = (parameter1, parameter2, parameter3) =\u003e {\n return expression\n}\n\nconst name = parameter =\u003e {\n return expression\n}\n\nconst name = () =\u003e {\n return expression\n}\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## IIFE\n\nAn IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.\n\n```javascript\n(function() {\n console.log(\"Hello World!\");\n})();\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Higher-Order Functions\n\nA higher-order function is a function that takes another function as an argument or returns a function as a result.\n\n```javascript\nfunction greet() {\n return \"Hello World!\";\n}\n\nfunction greetUser(greet) {\n return greet();\n}\n\nconsole.log(greetUser(greet)); // Output: \"Hello World!\"\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Function Expression\n\nA function expression is a function that is assigned to a variable.\n\n```javascript\nconst greet = function() {\n return \"Hello World!\";\n}\n\nconsole.log(greet()); // Output: \"Hello World!\"\n```\n\n## Function Declaration\n\nA function declaration is a function that is defined using the function keyword followed by the function name.\n\n```javascript\nfunction greet() {\n return \"Hello World!\";\n}\n\nconsole.log(greet()); // Output: \"Hello World!\"\n```\n\n### Function Constructor\n\nA function constructor is a function that is used to create new objects.\n\n```javascript\nconst greet = new Function(\"return 'Hello World!'\");\nconsole.log(greet()); // Output: \"Hello World!\"\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Scope\n\nScope refers to the visibility of variables in JavaScript. There are three types of scope in JavaScript:\n\n- Global Scope\n- Function Scope\n- Block Scope\n\n### Global Scope\n\n```javascript\nlet a = 10;\nfunction myFunction() {\n console.log(a);\n}\nmyFunction();\n```\n\n### Block Scope\n\n```javascript\n//var\nfunction myFunction () {\n if(true) {\n var a = 10; // it exists in function scope\n }\n console.log(a);\n}\nmyFunction();\n\n//let\nfunction myFunction () {\n if(true) {\n let a = 10; // it exists in block scope\n }\n console.log(a);\n}\nmyFunction();\n\n//const\nfunction myFunction () {\n if(true) {\n const a = 10; // it exists in block scope\n }\n console.log(a);\n}\nmyFunction();\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### Function Scope\n\n```javascript\n//var\nfunction myFunction() {\n var a = 10;\n}\nmyFunction()\nconsole.log(a);\n\n//let\nfunction myFunction() {\n let a = 10;\n}\nmyFunction()\nconsole.log(a);\n\n//const\nfunction myFunction() {\n const a = 10;\n}\nmyFunction()\nconsole.log(a);\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Hoisting\n\nHoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compilation phase.\n\n```javascript\nconsole.log(x); // Output: undefined\n\nvar x = 5;\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Currying\n\nCurrying is a technique in which a function with multiple arguments is converted into a sequence of nested functions, each taking a single argument.\n\n```javascript\nfunction multiply(a) {\n return function(b) {\n return function(c) {\n return a * b * c;\n };\n };\n}\n\nconsole.log(multiply(2)(3)(4)); // Output: 24\n```\n\n## Dates\n\nJavaScript provides a built-in Date object that can be used to work with dates and times.\n\n### Date Object\n\nThe Date object is used to work with dates and times in JavaScript. It can be created using the new keyword followed by the Date() constructor.\n\n```javascript\nnew Date()\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### Date Formats\n\nThere are several ways to create a new Date object in JavaScript:\n\n```javascript\nnew Date() // current date and time\nnew Date(milliseconds) // milliseconds since January 1, 1970, 00:00:00 UTC\nnew Date(dateString) // date string (e.g. \"October 13, 2014 11:13:00\")\nnew Date(year, month, day, hours, minutes, seconds, milliseconds) // year, month, day, hours, minutes, seconds, milliseconds\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### Date Properties\n\n**constructor** - Returns the function that created the Date object's prototype\n\n```javascript\nconst d = new Date();\nd.constructor; // ƒ Date() { [native code] }\n```\n\n**prototype** - Allows you to add properties and methods to the Date object\n\n```javascript\nDate.prototype.age = 25;\n\nconst d = new Date();\nd.age; // 25\n```\n\n**UTC** - Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC\n\n```javascript\nconst d = new Date();\nd.UTC(); // 1642149980524\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**parse** - Parses a date string and returns the number of milliseconds since January 1, 1970, 00:00:00 UTC\n\n```javascript\nDate.parse(\"Jan 1, 2023\"); // 1672531200000\n```\n\n**now** - Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC\n\n```javascript\nDate.now(); // 1642149980524\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### Date Methods\n\n**toString** - It is a built-in function that can be used to convert a date object to a string.\n\n```javascript\nconst d = new Date();\nd.toString(); // 'Sat Jan 14 2023 10:36:20 GMT+0530 (India Standard Time)'\n```\n\n**toDateString** - It is a built-in function that can be used to convert a date object to a string in the format of \"Weekday Month Date Year\".\n\n```javascript\nconst d = new Date();\nd.toDateString(); // 'Sat Jan 14 2023'\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**toUTCString** - It is a built-in function that can be used to convert a date object to a string in the format of \"Weekday, DD Mon YYYY HH:MM:SS GMT\".\n\n```javascript\nconst d = new Date();\nd.toUTCString(); // 'Sat, 14 Jan 2023 05:06:20 GMT'\n```\n\n**toISOString** - It is a built-in function that can be used to convert a date object to a string in the format of \"YYYY-MM-DDTHH:mm:ss.sssZ\".\n\n```javascript\nconst d = new Date();\nd.toISOString(); // '2023-01-14T05:06:20.524Z'\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Date Get Methods\n\nThe Date object has several built-in methods that can be used to get the date and time components of a date object. Some of the most commonly used get methods are:\n\n**getFullYear** - returns the four-digit year of the date.\n\n```javascript\nconst d = new Date();\nd.getFullYear();\n```\n\n**getMonth** - returns the month of the date (0-11, where 0 represents January and 11 represents December).\n\n```javascript\nconst d = new Date();\nd.getMonth();\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**getDate** - returns the day of the month of the date (1-31).\n\n```javascript\nconst d = new Date();\nd.getDate();\n```\n\n**getDay** - returns the day of the week of the date (0-6, where 0 represents Sunday and 6 represents Saturday).\n\n```javascript\nconst d = new Date();\nd.getDay();\n```\n\n**getHours** - returns the hour of the date (0-23).\n\n```javascript\nconst d = new Date();\nd.getHours();\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**getMinutes** - returns the minutes of the date (0-59).\n\n```javascript\nconst d = new Date();\nd.getMinutes();\n```\n\n**getSeconds** - returns the seconds of the date (0-59).\n\n```javascript\nconst d = new Date();\nd.getSeconds();\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**getMilliseconds** - returns the milliseconds of the date (0-999).\n\n```javascript\nconst d = new Date();\nd.getMilliseconds();\n```\n\n**getTime** - returns the number of milliseconds since January 1, 1970, 00:00:00 UTC.\n\n```javascript\nconst d = new Date();\nd.getTime();\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Date Set Methods\n\n**setDate** - sets the day of the month of the date object.\n\n```javascript\nconst d = new Date();\nd.setDate(15);\n```\n\n**setFullYear** - sets the year, and optionally the month and date, of the date object.\n\n```javascript\nconst d = new Date();\nd.setFullYear(2020);\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**setHours** - sets the hours, minutes, seconds and milliseconds of the date object.\n\n```javascript\nconst d = new Date();\nd.setHours(22);\n```\n\n**setMilliseconds** - sets the milliseconds of the date object.\n\n```javascript\nconst d = new Date();\nd.setMilliSeconds(3000);\n```\n\n**setMinutes** - sets the minutes, seconds and milliseconds of the date object.\n\n```javascript\nconst d = new Date();\nd.setMinutes(30);\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**setSeconds** - sets the seconds and milliseconds of the date object.\n\n```javascript\nconst d = new Date();\nd.setSeconds(30);\n```\n\n**setMonth** - sets the month, and optionally the date, of the date object.\n\n```javascript\nconst d = new Date();\nd.setMonth(11);\n```\n\n**setTime** - sets the date object to the time represented by a number of milliseconds since January 1, 1970, 00:00:00 UTC.\n\n```javascript\nconst d = new Date();\nd.setTime(30);\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Type Conversion\n\nJavaScript is a loosely typed language, which means that variables can hold values of any data type. JavaScript automatically converts the data type of a variable to the appropriate type when needed.\n\n### Convert string to numbers\n\n**Number** - Converts a string to a number using the Number() function.\n\n```javascript\nNumber(\"3.14\") // 3.14\nNumber(Math.PI) // 3.141592653589793\nNumber(\" \") // 0\nNumber(\"\") // 0\nNumber(\"99 88\") // NaN\nNumber(\"John\") // NaN\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**parseFloat** - Converts a string to a floating-point number using the parseFloat() method.\n\n```javascript\nlet num = parseFloat(\"123.456\");\nconsole.log(num); // Output: 123.456\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**parseInt** - Converts a string to an integer using the parseInt() method.\n\n```javascript\nlet num = parseInt(\"123\");\nconsole.log(num); // Output: 123\n```\n\n### Convert number to a string\n\n**String** - Converts a number to a string using the String() method.\n\n```javascript\nlet str = String(123);\nconsole.log(str); // Output: \"123\"\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**toString** - Converts a number to a string using the toString() method.\n\n```javascript\nlet str = (123).toString();\nconsole.log(str); // Output: \"123\"\n```\n\n**toExponential** - Converts a number to a string, using toExponential() method.\n\n```javascript\nlet str = (123).toExponential();\nconsole.log(str); // Output: 1.23e+2\n```\n\n**toFixed** - Converts a number to a string, using toFixed() method.\n\n```javascript\nlet str = (123).toFixed();\nconsole.log(str); // Output: 123\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**toPrecision** - Converts a number to a string, using toPrecision() method.\n\n```javascript\nlet str = (123).toPrecision();\nconsole.log(str); // Output: 123\n```\n\n### Convert dates to numbers\n\n**Number** - Converts a date to a number using the Number() function.\n\n```javascript\nd = new Date();\nNumber(d) // 1673677425068\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**getTime** Converts a date to a number using the getTime() method.\n\n```javascript\nd = new Date();\nd.getTime() // 1673677461233\n```\n\n**string** - Converts a date to a string using the String() function.\n\n```javascript\nString(Date()) // 'Sat Jan 14 2023 11:54:38 GMT+0530 (India Standard Time)'\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**toString** - Converts a date to a string using the toString() method.\n\n```javascript\nDate().toString() //'Sat Jan 14 2023 11:54:57 GMT+0530 (India Standard Time)'\n```\n\n### Convert boolean to number\n\n**Number** - Converts a boolean to a number using the Number() function.\n\n```javascript\nNumber(false) // returns 0\nNumber(true) // returns 1\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### Convert boolean to string\n\n**string** - Converts a boolean to a string using the String() function.\n\n```javascript\nString(false) // returns \"false\"\nString(true) // returns \"true\"\n```\n\n| Original Value | Converted to Number | Converted to String | Converted to Boolean |\n|---|---|---|---|\n| false | 0 | \"false\" | false |\n| true | 1 | \"true\" | true |\n| 0 | 0 | \"0\" | false |\n| 1 | 1 | \"1\" | true |\n| \"0\" | 0 | \"0\" | true |\n| \"000\" | 0 | \"000\" | true |\n| \"1\" | 1 | \"1\" | true |\n| NaN | NaN | \"NaN\" | false |\n| Infinity | Infinity | \"Infinity\" | true |\n| -Infinity | -Infinity | \"-Infinity\" | true |\n| \"\" | 0 | \"\" | false |\n| \"20\" | 20 | \"20\" | true |\n| \"twenty\" | NaN | \"twenty\" | true |\n| [ ] | 0 | \"\" | true |\n| [20] | 20 | \"20\" | true |\n| [10,20] | NaN | \"10,20\" | true |\n| [\"twenty\"] | NaN | \"twenty\" | true |\n| [\"ten\",\"twenty\"] | NaN | \"ten,twenty\" | true |\n| function(){} | NaN | \"function(){}\" | true |\n| { } | NaN | \"[object Object]\" | true |\n| null | 0 | \"null\" | false |\n| undefined | NaN | \"undefined\" | false |\n\n[Back to Top⤴️](#table-of-contents)\n\n## Typeof\n\nThe typeof operator is used to get the data type of a variable or an expression.\n\n```javascript\ntypeof \"John\" // Returns \"string\"\ntypeof 3.14 // Returns \"number\"\ntypeof NaN // Returns \"number\"\ntypeof false // Returns \"boolean\"\ntypeof [1,2,3,4] // Returns \"object\"\ntypeof {name:'John', age:34} // Returns \"object\"\ntypeof new Date() // Returns \"object\"\ntypeof function () {} // Returns \"function\"\ntypeof myCar // Returns \"undefined\" *\ntypeof null // Returns \"object\"\n```\n\n[Back to Top⤴️](#table-of-contents)\n\nKeep in mind that\n\n- The data type of NaN is number\n- The data type of an array is object\n- The data type of a date is object\n- The data type of null is object\n- The data type of an undefined variable is undefined *\n- The data type of a variable that has not been assigned a value is also undefined *\n\n## Math\n\nThe Math object allows you to perform mathematical tasks on numbers.\n\n```javascript\nMath.PI // returns 3.141592653589793\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### Math Property\n\n```javascript\nMath.property\n```\n\nExample\n\n```javascript\nMath.E // returns Euler's number\nMath.PI // returns PI\nMath.SQRT2 // returns the square root of 2\nMath.SQRT1_2 // returns the square root of 1/2\nMath.LN2 // returns the natural logarithm of 2\nMath.LN10 // returns the natural logarithm of 10\nMath.LOG2E // returns base 2 logarithm of E\nMath.LOG10E // returns base 10 logarithm of E\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### Math Methods\n\nThe Math object has several built-in methods that can be used to perform mathematical tasks. Some of the most commonly used methods are:\n\n**Math.round** - Returns x rounded to its nearest integer\n\n```javascript\nMath.round(4.6); // 5\n```\n\n**Math.ceil** - Returns x rounded up to its nearest integer\n\n```javascript\nMath.ceil(4.4); // 5\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**Math.floor** - Returns x rounded down to its nearest integer\n\n```javascript\nMath.floor(4.7); // 4\n```\n\n**Math.trunc** - Returns the integer part of x (new in ES6)\n\n```javascript\nMath.trunc(4.7); // 4\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**Math.sign** - Returns if x is negative, null or positive.\n\n```javascript\nMath.sign(4); // 1\n```\n\n**Math.pow** - returns the value of x to the power of y.\n\n```javascript\nMath.pow(8, 2); // 64\n```\n\n**Math.sqrt** - returns the square root of x.\n\n```javascript\nMath.sqrt(64); // 8\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**Math.abs** - returns the absolute (positive) value of x.\n\n```javascript\nMath.abs(-4.7); // 4.7\n```\n\n**Math.sin** - returns the sine (a value between -1 and 1) of the angle x (given in radians).\n\n```javascript\nMath.sin(90 * Math.PI / 180); // returns 1 (the sine of 90 degrees)\n```\n\n**Math.cos** - returns the cosine (a value between -1 and 1) of the angle x (given in radians).\n\n```javascript\nMath.cos(0 * Math.PI / 180); // returns 1 (the cos of 0 degrees)\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**Math.min** - It can be used to find the lowest value in a list of arguments.\n\n```javascript\nMath.min(0, 150, 30, 20, -8, -200); // -200\n```\n\n**Math.max** - It can be used to find the highest value in a list of arguments.\n\n```javascript\nMath.max(0, 150, 30, 20, -8, -200); // 150\n```\n\n**Math.random** - returns a random number between 0 (inclusive), and 1 (exclusive).\n\n```javascript\nMath.random(); // 0.07840484495533051\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**Math.log** - returns the natural logarithm of x.\n\n```javascript\nMath.log(1); // 0\n```\n\n**Math.log2** - returns the base 2 logarithm of x.\n\n```javascript\nMath.log2(8); // 3\n```\n\n**Math.log10** - returns the base 10 logarithm of x.\n\n```javascript\nMath.log10(1000); // 3\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n| Method | Description |\n|---|---|\n| abs(x) | Returns the absolute value of x |\n| acos(x) | Returns the arccosine of x, in radians |\n| acosh(x) | Returns the hyperbolic arccosine of x |\n| asin(x) | Returns the arcsine of x, in radians |\n| asinh(x) | Returns the hyperbolic arcsine of x |\n| atan(x) | Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians |\n| atan2(y, x) | Returns the arctangent of the quotient of its arguments |\n| atanh(x) | Returns the hyperbolic arctangent of x |\n| cbrt(x) | Returns the cubic root of x |\n| ceil(x) | Returns x, rounded upwards to the nearest integer |\n| cos(x) | Returns the cosine of x (x is in radians) |\n| cosh(x) | Returns the hyperbolic cosine of x |\n| exp(x) | Returns the value of Ex |\n| floor(x) | Returns x, rounded downwards to the nearest integer |\n| log(x) | Returns the natural logarithm (base E) of x |\n| max(x, y, z, ..., n) | Returns the number with the highest value |\n| min(x, y, z, ..., n) | Returns the number with the lowest value |\n| pow(x, y) | Returns the value of x to the power of y |\n| random() | Returns a random number between 0 and 1 |\n| round(x) | Rounds x to the nearest integer |\n| sign(x) | Returns if x is negative, null or positive (-1, 0, 1) |\n| sin(x) | Returns the sine of x (x is in radians) |\n| sinh(x) | Returns the hyperbolic sine of x |\n| sqrt(x) | Returns the square root of x |\n| tan(x) | Returns the tangent of an angle |\n| tanh(x) | Returns the hyperbolic tangent of a number |\n| trunc(x) | Returns the integer part of a number (x) |\n\n## Sets\n\nA Set is a collection of unique values. A Set can hold any datatype, including primitive types and objects.\n\n```javascript\nconst letters = new Set([\"a\",\"b\",\"c\"]);\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### Set Properties\n\n**constructor** - Returns the function that created the Set object's prototype\n\n```javascript\nletters.constructor; // ƒ Set() { [native code] }\n```\n\n**prototype** - Allows you to add properties and methods to a Set object\n\n```javascript\nSet.prototype.size = 0;\n\nconst letters = new Set([\"a\",\"b\",\"c\"]);\nletters.size; // 3\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### Set Methods\n\nThe Set object has several built-in methods that can be used to work with Sets. Some of the most commonly used methods are:\n\n- new Set()\n- add()\n- delete()\n- has()\n- forEach()\n- values()\n- size\n\n**new Set** - Creates a new Set\n\n```javascript\nconst letters = new Set([\"a\",\"b\",\"c\"]);\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**add** - Adds a new element to the Set\n\n```javascript\nletters.add(\"d\");\n```\n\n**delete** - Removes an element from a Set\n\n```javascript\nletters.delete(\"d\");\n```\n\n**has** - Returns true if a value exists in the Set\n\n```javascript\nletters.has(\"a\");\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**forEach** - Invokes a callback for each element in the Set\n\n```javascript\n// Create a Set\nconst letters = new Set([\"a\", \"b\", \"c\"]);\n\n// List all Elements\nlet text = \"\";\nletters.forEach(function(value) {\n text += value + \" \";\n});\n\nconsole.log(text.trim()); // Output: \"a b c\"\n```\n\n**values** - Returns an iterator with all the values in a Set\n\n```javascript\nletters.values() // Returns [object Set Iterator]\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**size Property** - Returns the number of elements in a Set\n\n```javascript\nletters.size;\n```\n\n## Map\n\nA Map holds key-value pairs where the keys can be any datatype. A Map remembers the original insertion order of the keys.\n\n```javascript\nconst fruits = new Map([\n [\"apples\", 500],\n [\"bananas\", 300],\n [\"oranges\", 200]\n]);\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### Map Properties\n\n**constructor** - Returns the function that created the Map object's prototype\n\n```javascript\nfruits.constructor; // ƒ Map() { [native code] }\n```\n\n**prototype** - Allows you to add properties and methods to a Map object\n\n```javascript\nMap.prototype.size = 0;\n\nconst fruits = new Map([\n [\"apples\", 500],\n [\"bananas\", 300],\n [\"oranges\", 200]\n]);\nfruits.size; // 3\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### Map Methods\n\nThe Map object has several built-in methods that can be used to work with Maps. Some of the most commonly used methods are:\n\n- new Map()\n- set()\n- get()\n- delete()\n- has()\n- forEach()\n- entries()\n- size\n\n**new Map** - Creates a new Map\n\n```javascript\n// Create a Map\nconst fruits = new Map([\n [\"apples\", 500],\n [\"bananas\", 300],\n [\"oranges\", 200]\n]);\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**set** - Sets the value for a key in a Map\n\n```javascript\n// Create a Map\nconst fruits = new Map();\n\n// Set Map Values\nfruits.set(\"apples\", 500);\nfruits.set(\"bananas\", 300);\nfruits.set(\"oranges\", 200);\n```\n\n**get** - Gets the value for a key in a Map\n\n```javascript\nfruits.get(\"apples\"); // Returns 500\n```\n\n**delete** - Removes a Map element specified by the key\n\n```javascript\nfruits.delete(\"apples\");\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**has** - Returns true if a key exists in a Map\n\n```javascript\nfruits.has(\"apples\");\n```\n\n**forEach** - Calls a function for each key/value pair in a Map\n\n```javascript\n// List all entries\nlet text = \"\";\nfruits.forEach (function(value, key) {\n text += key + ' = ' + value;\n})\n```\n\n**entries** - Returns an iterator with the [key, value] pairs in a Map.\n\n```javascript\n// List all entries\nlet text = \"\";\nfor (const x of fruits.entries()) {\n text += x;\n}\n```\n\n**size Property** - Returns the number of elements in a Map\n\n```javascript\nfruits.size;\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Recursion\n\nRecursion is a programming technique where a function calls itself in order to solve a problem. Recursion is used to solve problems that can be broken down into smaller, more manageable subproblems.\n\n```javascript\nfunction factorial(n) {\n if (n === 0) {\n return 1;\n } else {\n return n * factorial(n - 1);\n }\n}\n\nfactorial(5); // 120\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Async\n\nAsynchronous programming allows you to run multiple tasks concurrently without blocking the main thread. JavaScript provides several ways to work with asynchronous code, including callbacks, promises, and async/await.\n\n### Callbacks\n\nA callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.\n\n```javascript\nfunction myDisplayer(some) {\n document.getElementById(\"demo\").innerHTML = some;\n}\n\nfunction myCalculator(num1, num2, myCallback) {\n let sum = num1 + num2;\n myCallback(sum);\n}\n\nmyCalculator(5, 5, myDisplayer);\n\n// Output: 10\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### Asynchronous JavaScript\n\nJavaScript is a single-threaded language, which means it can only execute one task at a time. Asynchronous JavaScript allows you to run multiple tasks concurrently without blocking the main thread.\n\n```javascript\nlet myPromise = new Promise((resolve, reject) =\u003e {\n setTimeout(() =\u003e {\n resolve(\"The async operation was successful\");\n }, 1000);\n});\n\nmyPromise.then((value) =\u003e {\n console.log(value);\n});\n\n// Output: The async operation was successful\n```\n\n### Promise\n\nA promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value.\n\nSyntax -\n\n```javascript\nconst myPromise = new Promise((resolve, reject) =\u003e {\n // code\n});\n\nmyPromise.then(\n (value) =\u003e {\n // success\n },\n (error) =\u003e {\n // error\n }\n);\n\nmyPromise.catch(\n (error) =\u003e {\n // error\n }\n);\n\nmyPromise.finally(\n () =\u003e {\n // code\n }\n);\n\nmyPromise.all([promise1, promise2, promise3, ...])\n```\n\nExample\n\n```javascript\nconst myPromise = new Promise((resolve, reject) =\u003e {\n setTimeout(() =\u003e {\n resolve(\"The async operation was successful\");\n }, 1000);\n});\n\nmyPromise.then((value) =\u003e {\n console.log(value);\n});\n\n// Output: The async operation was successful\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### async/await\n\nThe async/await syntax allows you to write asynchronous code that looks synchronous. The async keyword is used to define an asynchronous function, and the await keyword is used to wait for a promise to be resolved.\n\nAsync Syntax\n\n```javascript\nasync function myFunction() {\n // code\n}\n```\n\nAwait Syntax\n\n```javascript\nlet result = await promise;\n\n// or\n\nawait promise;\n```\n\nExample\n\n```javascript\nasync function myFunction() {\n let promise = new Promise((resolve, reject) =\u003e {\n setTimeout(() =\u003e resolve(\"The async operation was successful\"), 1000);\n });\n\n let result = await promise;\n console.log(result);\n}\n\nmyFunction();\n\n// Output: The async operation was successful\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## DOM\n\nThe Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document as a tree of nodes, where each node is an object representing a part of the document.\n\n### DOM Properties\n\n**document.body** - Returns the body element\n\n```javascript\ndocument.body;\n```\n\n**document.cookie** - Returns the document's cookie\n\n```javascript\ndocument.cookie;\n```\n\n**document.doctype** - Returns the document's doctype\n\n```javascript\ndocument.doctype;\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**document.documentElement** - Returns the document's root element\n\n```javascript\ndocument.documentElement;\n```\n\n**document.documentURI** - Returns the URI of the document\n\n```javascript\ndocument.documentURI;\n```\n\n**document.domain** - Returns the domain name of the server that loaded the document\n\n```javascript\ndocument.domain;\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**document.head** - Returns the head element\n\n```javascript\ndocument.head;\n```\n\n**document.images** - Returns a collection of all images in the document\n\n```javascript\ndocument.images;\n```\n\n**document.lastModified** - Returns the date and time the document was last modified\n\n```javascript\ndocument.lastModified;\n```\n\n**document.links** - Returns a collection of all links in the document\n\n```javascript\ndocument.links;\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**document.readyState** - Returns the loading status of the document\n\n```javascript\ndocument.readyState;\n```\n\n**document.referrer** - Returns the URI of the referrer (the linking document)\n\n```javascript\ndocument.referrer;\n```\n\n**document.title** - Returns the title of the document\n\n```javascript\ndocument.title;\n```\n\n**document.URL** - Returns the complete URL of the document\n\n```javascript\ndocument.URL;\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### DOM Methods\n\nThe Document object has several built-in methods that can be used to manipulate the document. Some of the most commonly used methods are:\n\naddEventListener() - It is used to add an event listener to the document.\n\n```javascript\ndocument.addEventListener(\"click\", () =\u003e {\n console.log(\"The document was clicked\");\n});\n```\n\nadoptNode() - It is used to adopt the node from the other documents.\n\n```javascript\ndocument.adoptNode(node);\n```\n\n[Back to Top⤴️](#table-of-contents)\n\nappend() - It appends the new node or HTML after the last child node of the document.\n\n```javascript\ndocument.append(node);\n```\n\ncaretPositionFromPoint() - It returns the caretPosition object, containing the DOM node based on the coordinates passed as an argument.\n\n```javascript\ndocument.caretPositionFromPoint(x, y);\n```\n\nclose() - It closes the output stream opened using the document.open() method.\n\n```javascript\ndocument.close();\n```\n\n[Back to Top⤴️](#table-of-contents)\n\ncreateAttribute() - It creates a new attribute node.\n\n```javascript\ndocument.createAttribute(\"class\");\n```\n\ncreateAttributeNS() - It creates a new attribute node with the particular namespace URI.\n\n```javascript\ndocument.createAttributeNS(\"http://www.w3.org/2000/svg\", \"class\");\n```\n\ncreateComment() - It creates a new comment node with a specific text message.\n\n```javascript\ndocument.createComment(\"This is a comment\");\n```\n\n[Back to Top⤴️](#table-of-contents)\n\ncreateDocumentFragment() - It creates a DocumentFragment node.\n\n```javascript\ndocument.createDocumentFragment();\n```\n\ncreateElement() - It creates a new element node to insert into the web page.\n\n```javascript\ndocument.createElement(\"div\");\n```\n\ncreateElementNS() - It is used to create a new element node with a particular namespace URI.\n\n```javascript\ndocument.createElementNS(\"http://www.w3.org/2000/svg\", \"div\");\n```\n\ncreateEvent() - It creates a new event node.\n\n```javascript\ndocument.createEvent(\"Event\");\n```\n\n[Back to Top⤴️](#table-of-contents)\n\ncreateTextNode() - It creates a new text node.\n\n```javascript\ndocument.createTextNode(\"This is a text node\");\n```\n\nelementFromPoint() - It accesses the element from the specified coordinates.\n\n```javascript\ndocument.elementFromPoint(x, y);\n```\n\nelementsFromPoint() - It returns the array of elements that are at the specified coordinates.\n\n```javascript\ndocument.elementsFromPoint(x, y);\n```\n\n[Back to Top⤴️](#table-of-contents)\n\ngetAnimations() - It returns the array of all animations applied on the document.\n\n```javascript\ndocument.getAnimations();\n```\n\ngetElementById() - It accesses the HTML element using the id.\n\n```javascript\ndocument.getElementById(\"id\");\n```\n\ngetElementsByClassName() - It accesses the HTML element using the class name.\n\n```javascript\ndocument.getElementsByClassName(\"class\");\n```\n\n[Back to Top⤴️](#table-of-contents)\n\ngetElementsByName() - It accesses the HTML element using the name.\n\n```javascript\ndocument.getElementsByName(\"name\");\n```\n\ngetElementsByTagName() - It accesses the HTML element using the tag name.\n\n```javascript\ndocument.getElementsByTagName(\"tag\");\n```\n\nhasFocus() - It returns the boolean value based on whether any element or document itself is in the focus.\n\n```javascript\ndocument.hasFocus();\n```\n\n[Back to Top⤴️](#table-of-contents)\n\nimportNode() - It is used to import the node from another document.\n\n```javascript\ndocument.importNode(node);\n```\n\nnormalize() - It removes the text nodes, which are empty, and joins other nodes.\n\n```javascript\ndocument.normalize();\n```\n\nopen() - It is used to open a new output stream.\n\n```javascript\ndocument.open();\n```\n\n[Back to Top⤴️](#table-of-contents)\n\nprepand() - It is used to insert the particular node before all nodes.\n\n```javascript\ndocument.prepand(node);\n```\n\nquerySelector() - It is used to select the first element that matches the css selector passed as an argument.\n\n```javascript\ndocument.querySelector(\"p\");\n```\n\nquerySelectorAll() - It returns the nodelist of the HTML elements, which matches the multiple CSS selectors.\n\n```javascript\ndocument.querySelectorAll(\"p.intro\");\n```\n\n[Back to Top⤴️](#table-of-contents)\n\nremoveEventListener() - It is used to remove the event listener from the document.\n\n```javascript\ndocument.removeEventListener(\"click\", () =\u003e {\n console.log(\"The document was clicked\");\n});\n```\n\nreplaceChildren() - It replaces the children nodes of the document.\n\n```javascript\ndocument.replaceChildren(node);\n```\n\n[Back to Top⤴️](#table-of-contents)\n\nwrite() - It is used to write text, HTML, etc., into the document.\n\n```javascript\ndocument.write(\"Hello World!\");\n```\n\nwriteln() - It is similar to the write() method but writes each statement in the new line.\n\n```javascript\ndocument.writeln(\"Hello World!\");\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n### Documents\n\nThe Document object represents the entire HTML document. It is the root node of the HTML document tree.\n\n**Finding HTML Elements** -\n\n| Method | Description |\n|---|---|\n| document.getElementById(id) | Find an element by element id |\n| document.getElementsByTagName(name) | Find elements by tag name |\n| document.getElementsByClassName(name) | Find elements by class name |\n\n**Changing HTML Elements** -\n\n| Property | Description |\n|--|--|\n| element.innerHTML = new html content | Change the inner HTML of an element |\n| element.attribute = new value | Change the attribute value of an HTML element |\n| element.style.property = new style | Change the style of an HTML element |\n\n| Method | Description |\n|--|--|\n| element.setAttribute(attribute, value) | Change the attribute value of an HTML element |\n\n[Back to Top⤴️](#table-of-contents)\n\n**Adding and Deleting Elements** -\n\n| Method | Description |\n|--|--|\n| document.createElement(element) | Create an HTML element |\n| document.removeChild(element) | Remove an HTML element |\n| document.appendChild(element) | Add an HTML element |\n| document.replaceChild(new, old) | Replace an HTML element |\n| document.write(text) | Write into the HTML output stream |\n\n**Adding Events Handlers** -\n\n| Method | Description |\n|--|--|\n| document.getElementById(id).onclick = function(){code} | Adding event handler code to an onclick event |\n\n**Finding HTML Objects** -\n\n| Property | Description | DOM |\n|--|--|--|\n| document.anchors | Returns all elements that have a name attribute | 1 |\n| document.applets | Deprecated | 1 |\n| document.baseURI | Returns the absolute base URI of the document | 3 |\n| document.body | Returns the element | 1 |\n| document.cookie | Returns the document's cookie | 1 |\n| document.doctype | Returns the document's doctype | 3 |\n| document.documentElement | Returns the element | 3 |\n| document.documentMode | Returns the mode used by the browser | 3 |\n| document.documentURI | Returns the URI of the document | 3 |\n| document.domain | Returns the domain name of the document server | 1 |\n| document.domConfig | Obsolete. | 3 |\n| document.embeds | Returns all elements | 3 |\n| document.forms | Returns all elements | 1 |\n| document.head | Returns the element | 3 |\n| document.images | Returns all elements | 1 |\n| document.implementation | Returns the DOM implementation | 3 |\n| document.inputEncoding | Returns the document's encoding (character set) | 3 |\n| document.lastModified | Returns the date and time the document was updated | 3 |\n| document.links | Returns all and elements that have a href attribute | 1 |\n| document.readyState | Returns the (loading) status of the document | 3 |\n| document.referrer | Returns the URI of the referrer (the linking document) | 1 |\n| document.scripts | Returns all elements | 3 |\n| document.strictErrorChecking | Returns if error checking is enforced | 3 |\n| document.title | Returns the element | 1 |\n| document.URL | Returns the complete URL of the document | 1 |\n\n[Back to Top⤴️](#table-of-contents)\n\n**Elements** -\n\nFinding HTML elements by id\n\n```javascript\nconst element = document.getElementById(\"intro\");\n```\n\nFinding HTML elements by tag name\n\n```javascript\nconst element = document.getElementsByTagName(\"p\");\n```\n\nFinding HTML elements by class name\n\n```javascript\nconst x = document.getElementsByClassName(\"intro\");\n```\n\nFinding HTML elements by CSS selectors\n\n```javascript\nconst x = document.querySelectorAll(\"p.intro\");\n```\n\n[Back to Top⤴️](#table-of-contents)\n\nFinding HTML elements by HTML object collections\n\n```javascript\nconst x = document.forms[\"frm1\"];\nlet text = \"\";\nfor (let i = 0; i \u003c x.length; i++) {\n text += x.elements[i].value + \"\u003cbr\u003e\";\n}\ndocument.getElementById(\"demo\").innerHTML = text;\n```\n\nChanging HTML\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML = \"Hello World!\";\n```\n\nForms\n\n```javascript\ndocument.getElementById(\"myForm\").submit();\n```\n\nChanging CSS\n\n```javascript\ndocument.getElementById(\"demo\").style.fontSize = \"35px\";\n```\n\n[Back to Top⤴️](#table-of-contents)\n\nAnimations\n\n```javascript\ndocument.getElementById(\"animate\").style.animation = \"mymove 4s infinite\";\n```\n\nEvents\n\n```javascript\ndocument.getElementById(\"myBtn\").addEventListener(\"click\", displayDate);\n```\n\nEvent Listener\n\n```javascript\ndocument.getElementById(\"myBtn\").addEventListener(\"click\", function() {\n alert(\"Hello World!\");\n});\n```\n\n[Back to Top⤴️](#table-of-contents)\n\nNavigation\n\n```javascript\ndocument.getElementById(\"myAnchor\").href = \"https://www.w3schools.com\";\n```\n\nNodes\n\n```javascript\ndocument.getElementById(\"demo\").childNodes[0].nodeValue = \"new text\";\n```\n\nCollections\n\n```javascript\ndocument.getElementsByTagName(\"p\");\n```\n\nNode\n\n```javascript\ndocument.getElementById(\"main\").firstChild.nodeValue;\n```\n\nLists\n\n```javascript\ndocument.getElementById(\"myList\").innerHTML = \"Mango\";\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n## Browser BOM\n\nBrowser Object Model (BOM) is used to interact with the browser. The Browser Object Model (BOM) allows JavaScript to interact with the browser. The BOM is not standardized, and its properties and methods may differ between browsers.\n\n**Window** -\n\nWindow Object\n\n```javascript\nwindow.document.getElementById(\"header\");\n//or\ndocument.getElementById(\"header\");\n```\n\nWindow Size\n\nwindow.innerHeight - the inner height of the browser window (in pixels)\n\nwindow.innerWidth - the inner width of the browser window (in pixels)\n\nwindow.open() - open a new window\n\nwindow.close() - close the current window\n\nwindow.moveTo() - move the current window\n\nwindow.resizeTo() - resize the current window\n\n```javascript\nwindow.innerWidth;\n\nwindow.innerHeight;\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**Window Screen** -\n\n`window.screen` - object contains information about the user's screen.\n\nscreen.width\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML =\n\"Screen Width: \" + screen.width;\n```\n\nscreen.height\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML =\n\"Screen Height: \" + screen.height;\n```\n\nscreen.availWidth\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML =\n\"Available Screen Width: \" + screen.availWidth;\n```\n\nscreen.availHeight\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML =\n\"Available Screen Height: \" + screen.availHeight;\n```\n\nscreen.colorDepth\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML =\n\"Screen Color Depth: \" + screen.colorDepth;\n```\n\nscreen.pixelDepth\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML =\n\"Screen Pixel Depth: \" + screen.pixelDepth;\n```\n\n[Back to Top⤴️](#table-of-contents)\n\nExample\n\n```javascript\ndocument.getElementById('demo1').innerHTML = 'Screen Width: ' + screen.width;\ndocument.getElementById('demo2').innerHTML = 'Screen Height: ' + screen.height;\ndocument.getElementById('demo3').innerHTML =\n 'Available Screen Width: ' + screen.availWidth;\ndocument.getElementById('demo4').innerHTML =\n 'Available Screen Height: ' + screen.availHeight;\ndocument.getElementById('demo5').innerHTML =\n 'Screen Color Depth: ' + screen.colorDepth;\ndocument.getElementById('demo6').innerHTML =\n 'Screen Pixel Depth: ' + screen.pixelDepth;\n```\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n \u003chead\u003e\n \u003ctitle\u003eWindow Screen\u003c/title\u003e\n \u003cmeta charset=\"UTF-8\" /\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width\" /\u003e\n \u003clink rel=\"stylesheet\" href=\"styles.css\" /\u003e\n \u003cscript type=\"module\" src=\"script.js\"\u003e\u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cmain\u003e\n \u003cp id=\"demo1\"\u003e\u003c/p\u003e\n \u003cp id=\"demo2\"\u003e\u003c/p\u003e\n \u003cp id=\"demo3\"\u003e\u003c/p\u003e\n \u003cp id=\"demo4\"\u003e\u003c/p\u003e\n \u003cp id=\"demo5\"\u003e\u003c/p\u003e\n \u003cp id=\"demo6\"\u003e\u003c/p\u003e\n \u003c/main\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\n[Stackblitz Link](https://stackblitz.com/edit/web-platform-paqevc?file=index.html)\n\n[Back to Top⤴️](#table-of-contents)\n\nWindow Location\n\n`window.location` - object can be used to get the current page address (URL) and to redirect the browser to a new page.\n\nwindow.location.href returns the href (URL) of the current page\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML =\n\"Page location is \" + window.location.href;\n```\n\nwindow.location.hostname returns the domain name of the web host\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML =\n\"Page hostname is \" + window.location.hostname;\n```\n\nwindow.location.pathname returns the path and filename of the current page\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML =\n\"Page path is \" + window.location.pathname;\n```\n\nwindow.location.protocol returns the web protocol used (http: or https:)\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML =\n\"Page protocol is \" + window.location.protocol;\n```\n\nwindow.location.assign() loads a new document\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML =\n\"Port number is \" + window.location.port;\n```\n\n[Back to Top⤴️](#table-of-contents)\n\nWindow Location Assign\n\n```javascript\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003cbody\u003e\n\n\u003ch2\u003eJavaScript\u003c/h2\u003e\n\n\u003ch3\u003eThe window.location object\u003c/h3\u003e\n\n\u003cinput type=\"button\" value=\"Load new document\" onclick=\"newDoc()\"\u003e\n\n\u003cscript\u003e\nfunction newDoc() {\n window.location.assign(\"https://www.w3schools.com\")\n}\n\u003c/script\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nExample\n\n```javascript\ndocument.getElementById('demo1').innerHTML =\n 'Page location is ' + window.location.href;\ndocument.getElementById('demo2').innerHTML =\n 'Page hostname is ' + window.location.hostname;\ndocument.getElementById('demo3').innerHTML =\n 'Page path is ' + window.location.pathname;\ndocument.getElementById('demo4').innerHTML =\n 'Page protocol is ' + window.location.protocol;\ndocument.getElementById('demo5').innerHTML =\n 'Port number is ' + window.location.port;\n```\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n \u003chead\u003e\n \u003ctitle\u003eWindow Location\u003c/title\u003e\n \u003cmeta charset=\"UTF-8\" /\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width\" /\u003e\n \u003clink rel=\"stylesheet\" href=\"styles.css\" /\u003e\n \u003cscript type=\"module\" src=\"script.js\"\u003e\u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cnav\u003e\n \u003ch1\u003eWindow Location Example\u003c/h1\u003e\n \u003c/nav\u003e\n \u003cmain\u003e\n \u003cp id=\"demo1\"\u003e\u003c/p\u003e\n \u003cp id=\"demo2\"\u003e\u003c/p\u003e\n \u003cp id=\"demo3\"\u003e\u003c/p\u003e\n \u003cp id=\"demo4\"\u003e\u003c/p\u003e\n \u003cp id=\"demo5\"\u003e\u003c/p\u003e\n \u003c/main\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\n[Stackblitz Link](https://stackblitz.com/edit/web-platform-sixdd6?file=script.js)\n\n[Back to Top⤴️](#table-of-contents)\n\n**Window History** - The window.history object contains the browser's history.\n\n`window.history` - object can be written without the window prefix.\n\nhistory.back() - same as clicking back in the browser\n\nhistory.forward() - same as clicking forward in the browser\n\n```javascript\nwindow.history.back()\nwindow.history.forward()\n```\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n \u003chead\u003e\n \u003ctitle\u003eWindow History\u003c/title\u003e\n \u003cmeta charset=\"UTF-8\" /\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width\" /\u003e\n \u003clink rel=\"stylesheet\" href=\"styles.css\" /\u003e\n \u003cscript type=\"module\" src=\"script.js\"\u003e\u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cnav\u003e\n \u003ch1\u003eWindow History\u003c/h1\u003e\n \u003c/nav\u003e\n \u003cmain\u003e\n \u003cinput type=\"button\" value=\"Forward\" onclick=\"goForward()\" /\u003e\n \u003cinput type=\"button\" value=\"Back\" onclick=\"goBack()\" /\u003e\n \u003c/main\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\n[Back to Top⤴️](#table-of-contents)\n\n**Window Navigator** - Window Navigator object contains information about the visitor's browser.\n\nnavigator.cookieEnabled\n\nnavigator.appCodeName\n\nnavigator.platform\n\nBrowser Cookies\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML =\n\"cookiesEnabled is \" + navigator.cookieEnabled;\n```\n\nBrowser Application Name\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML =\n\"navigator.appName is \" + navigator.appName;\n```\n\nBrowser Application Code Name\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML =\n\"navigator.appCodeName is \" + navigator.appCodeName;\n```\n\n[Back to Top⤴️](#table-of-contents)\n\nBrowser Engine\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML =\n\"navigator.product is \" + navigator.product;\n```\n\nBrowser Version\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML = navigator.appVersion;\n```\n\nBrowser Agent\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML = navigator.userAgent;\n```\n\nBrowser Platform\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML = navigator.platform;\n```\n\nBrowser Language\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML = navigator.language;\n```\n\nIs The Browser Online?\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML = navigator.onLine;\n```\n\n[Back to Top⤴️](#table-of-contents)\n\nIs Java Enabled?\n\n```javascript\ndocument.getElementById(\"demo\").innerHTML = navigator.javaEnabled();\n```\n\n```javascript\ndocument.getElementById('demo1').innerHTML =\n 'navigator.cookieEnabled is ' + navigator.cookieEnabled;\ndocument.getElementById('demo2').innerHTML =\n 'navigator.appName is ' + navigator.appName;\ndocument.getElementById('demo3').innerHTML =\n 'navigator.appCodeName is ' + navigator.appCodeName;\ndocument.getElementById('demo4').innerHTML =\n 'navigator.product is ' + navigator.product;\ndocument.getElementById('demo5').innerHTML =\n 'navigator.appVersion is ' + navigator.appVersion;\ndocument.getElementById('demo6').innerHTML =\n 'navigator.userAgent is ' + navigator.userAgent;\ndocument.getElementById('demo7').innerHTML =\n 'navigator.platform is ' + navigator.platform;\ndocument.getElementById('demo8').innerHTML =\n 'navigator.language is ' + navigator.language;\ndocument.getElementById('demo9').innerHTML =\n 'navigator.onLine is ' + navigator.onLine;\ndocument.getElementById('demo10').innerHTML =\n 'navigator.javaEnabled is ' + navigator.javaEnabled();\n```\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n \u003chead\u003e\n \u003ctitle\u003eWindow Navigator\u003c/title\u003e\n \u003cmeta charset=\"UTF-8\" /\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width\" /\u003e\n \u003clink rel=\"stylesheet\" href=\"styles.css\" /\u003e\n \u003cscript type=\"module\" src=\"script.js\"\u003e\u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cnav\u003e\n \u003ch1\u003eWindow Navigator\u003c/h1\u003e\n \u003c/nav\u003e\n \u003cmain\u003e\n ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanthanank%2Flearn-javascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanthanank%2Flearn-javascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanthanank%2Flearn-javascript/lists"}