Learn Javascript

This 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.

Table of Contents

Introduction
Add JavaScript
Output JavaScript
Single Line Comments
Multi Line Comments
Variables
- Declare Variables
Data Types
- Primitive Data Types
- Non Primitive Data Types
Operators
- Arithmetic Operators
- Logical Operators
- Comparison Operators
- Bitwise Operators
- Type operators
- Assignment Operators
- Conditional (Ternary) Operators
- Nullish Coalescing Operator(??)
- Optional Chaining Operator(?.)
- delete Operator
- Spread (...) Operator
Arrays
- Array Methods
Strings
- String Methods
Loops
- for Loop
- while Loop
- do while Loop
- for in Loop
- for of Loop
Conditional Statements
- if statement
- if else statement
- if else else if statement
- switch statement
Functions
- Named Function
- Anonymous Function
- Arrow Functions
- Immediately Invoked Function Expression (IIFE)
- Higher Order Function
- Function Declaration
- Function Expression
- Function Constructor
Scope
- Block Scope
- Function Scope
- Global Scope
Hoisting
Currying
Dates
- Date Methods
Date Get Methods
Date Set Methods
Type Conversion
- Convert string to numbers
- Convert number to a string
- Convert dates to numbers
- Convert boolean to number
- Convert boolean to string
Typeof
Math
- Math Property
- Math Methods
Sets
- Set Methods
Map
- Map Methods
Recursion
Async
DOM
Browser BOM
JSON
Web API
Ajax
jQuery
Graphics
Best Practices
Common Mistakes
Performace
ES6 Featues
ES5 Features
Snippets
Short Hands
Interview Questions
List of GitHub Repositories to learn JavaScript
List of Websites to learn JavaScript
List of Books to learn JavaScript
List of YouTube Channels to learn JavaScript
List of Udemy Courses to learn JavaScript
List of Games to learn JavaScript by playing
List of Blogs Sites to learn JavaScript
List of JavaScript Online Editors/Compilers
List of Twitter Users
List of LinkedIn Users

Introduction

JavaScript is a scripting language. It is object-based, lightweight, cross-platform translated language. It is widely used for client-side validation.

Add JavaScript

There are three ways to add JavaScript to a web page:

Inline JavaScript - It is used to add JavaScript directly to the HTML document. It is added inside the <script> tag in the HTML document.
Internal JavaScript - It is used to add JavaScript to the HTML document. It is added inside the <script> tag in the <head> or <body> section of the HTML document.
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 <script> tag.

JavaScript in <head> -

<!DOCTYPE html>
<html>
<head>
<script>
    //code
</script>
</head>
<body>
<h2>Heading</h2>
</body>
</html>

JavaScript in <body>

<!DOCTYPE html>
<html>
<body>

<h2>Heading</h2>

<script>
    //code
</script>

</body>
</html>

External JavaScript -

<!DOCTYPE html>
<html>
<body>

<h2>Heading</h2>

<script src="myScript.js"></script>
</body>
</html>

Back to Top⤴️

Outputing JavaScript

JavaScript can "display" data in different ways

1. Writing into an HTML element, using innerHTML

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

2. Writing into an HTML element, using document.write()

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

3. Writing into an alert box, using window.alert()

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

4. Writing into the browser console, using console.log()

<!DOCTYPE html>
<html>
<body>

<script>
console.log(5 + 6);
</script>

</body>
</html>

Back to Top⤴️

Single Line Comments

Single line comments start with //

// comments

Multi-line Comments

Multi-line comments start with /* and end with */.

/* Hey!
Hello, How are you?
*/

Back to Top⤴️

Variables

Variables are containers for storing data values. In JavaScript, variables are declared using the var, let, or const keyword.

Declare Variables

There are three ways to declare variables in JavaScript:

1. var - It is used to declare a variable. It is function-scoped.

var a = 1; // Declare a variable x with the value 1 (function-level scope).

2. let - It is used to declare a variable. It is block-scoped.

let b = 1; // Declare a variable y with the value 10 (block-level scope).

3. const - It is used to declare a read-only variable. It is block-scoped.

const c = 1; // Declare a read-only variable z with the value 15 (block-level scope).

Back to Top⤴️

Data Types

Data 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.

There are two types of data types in JavaScript:

Primitive Data Types
Non-Primitive Data Types

1. Primitive Data Types

Primitive data types are the most basic data types in JavaScript. They are immutable (cannot be changed) and are copied by value.

Primitive data types include:

numbers
strings
booleans
null
undefined
symbol

numbers - numbers can be written with or without decimals.

let number = 10;

strings - strings are text. They are written inside double or single quotes.

let name = "Manthan";

booleans - booleans can only have two values: true or false.

let value1 = true;
let value2 = false;

null - null is an empty value.

let value = null;

undefined - undefined means a variable has been declared but has not yet been assigned a value.

let name;

symbol - symbols are unique and immutable values.

let a = Symbol();

Back to Top⤴️

2. Non Primitive Data Types

Non-primitive data types are complex data types that are mutable (can be changed) and are copied by reference.

Non-primitive data types include:

objects
arrays
functions
regexp

functions - functions are objects that can be invoked.

function greet() {
  return "Hello!";
}

object - objects are used to store collections of data and more complex entities.

let name = {firstName:"Manthan", lastName:"Ank"};

arrays - arrays are used to store multiple values in a single variable.

let array = ["value1", "value2"];

regexp - regular expressions are used to perform pattern-matching in strings.

let pattern = /w3schools/i;

Back to Top⤴️

Operators

Operators are used to perform operations on variables and values.

There are different types of operators in JavaScript:

Arithmetic Operators
Logical Operators
Comparison Operators
Bitwise Operators
Type Operators
Assignment Operators
Conditional (Ternary) Operator
Nullish Coalescing Operator(??)
Optional Chaining Operator(?.)
delete Operator
Spread (...) Operator

Arithmetic Operators

Operator	Description
+	Addition
-	Subtraction
*	Multiplication
**	Exponentiation (ES2016)
/	Division
%	Modulus (Division Remainder)
++	Increment
--	Decrement

Examples

let x = 5;
let y = 2;

console.log(x + y); // Output: 7
console.log(x - y); // Output: 3
console.log(x * y); // Output: 10
console.log(x / y); // Output: 2.5
console.log(x % y); // Output: 1

x++;
console.log(x); // Output: 6

y--;
console.log(y); // Output: 1

Back to Top⤴️

Logical Operators

Operator	Description
&&	logical and
ll	logical or
!	logical not

Examples

let x = true;
let y = false;

console.log(x && y); // Output: false
console.log(x || y); // Output: true
console.log(!x); // Output: false
console.log(!y); // Output: true

Comparison Operators

Operator	Description
==	equal to
===	equal value and equal type
!=	not equal
!==	not equal value or not equal type
>	greater than
<	less than
>=	greater than or equal to
<=	less than or equal to
?	ternary operator

Examples

let x = 5;
let y = 10;

console.log(x == y); // Output: false
console.log(x === y); // Output: false
console.log(x != y); // Output: true
console.log(x !== y); // Output: true
console.log(x > y); // Output: false
console.log(x < y); // Output: true
console.log(x >= y); // Output: false
console.log(x <= y); // Output: true
console.log(x ? y : x); // Output: 10
console.log(x ? x : y); // Output: 5

Back to Top⤴️

Bitwise Operators

Operator	Description
&	AND
l	OR
~	NOT
^	XOR
<<	Left shift
>>	Right shift
>>>	Unsigned right

Examples

let x = 5; // Binary representation: 101
let y = 3; // Binary representation: 011

console.log(x & y); // Output: 1 (binary: 001)
console.log(x | y); // Output: 7 (binary: 111)
console.log(x ^ y); // Output: 6 (binary: 110)
console.log(~x); // Output: -6 (binary: 11111111111111111111111111111010)
console.log(x << 1); // Output: 10 (binary: 1010)
console.log(x >> 1); // Output: 2 (binary: 10)
console.log(x >>> 1); // Output: 2 (binary: 10)

Type Operators

Operator	Description
typeof	Returns the type of a variable
instanceof	Returns true if an object is an instance of an object type

Examples

console.log(typeof 5); // Output: "number"
console.log(typeof 'hello'); // Output: "string"
console.log(typeof true); // Output: "boolean"
console.log(typeof undefined); // Output: "undefined"
console.log(typeof null); // Output: "object" (this is a bug in JavaScript)
console.log(typeof {}); // Output: "object"
console.log(typeof []); // Output: "object"
console.log(typeof function() {}); // Output: "function"

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

console.log(cars instanceof Array); // Output: true
console.log(cars instanceof Object); // Output: true
console.log(cars instanceof String); // Output: false
console.log(cars instanceof Number); // Output: false
console.log(cars instanceof Function); // Output: false
console.log(cars instanceof RegExp); // Output: false
console.log(cars instanceof Date); // Output: false
console.log(cars instanceof Symbol); // Output: false
console.log(cars instanceof Boolean); // Output: false

Back to Top⤴️

Assignment Operators

Operator	Description
=	x = y
+=	x += y
-=	x -= y
*=	x *= y
/=	x /= y
%=	x %= y
**=	x **= y
:	x : 45

let x = 5;
let y = 10;

x = y; // x = y (x is now 10)
console.log(x); // Output: 5

x += y; // x = x + y (x is now 15)
console.log(x); // Output: 15

x -= y; // x = x - y (x is now 5)
console.log(x); // Output: 5

x *= y; // x = x * y (x is now 50)
console.log(x); // Output: 50

x /= y; // x = x / y (x is now 5)
console.log(x); // Output: 5

x %= y; // x = x % y (x is now 5)
console.log(x); // Output: 5

x **= y; // x = x ** y (x is now 9765625)
console.log(x); // Output: 9765625

x : y; // x = y (x is now 10)
console.log(x); // Output: 10

Back to Top⤴️

Conditional (Ternary) Operator

The 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.

Syntax

(condition) ? x : y

let x = 10;
let y = 5;

let result = (x > y) ? "x is greater than y" : "x is less than y";

console.log(result); // Output: "x is greater than y"

Nullish Coalescing Operator(??)

The nullish coalescing operator (??) is a new operator in JavaScript that returns the right-hand operand when the left-hand operand is null or undefined.

Example

let x = null;
let y = undefined;
let z = 'Hello';

console.log(x ?? 'Default Value'); // Output: "Default Value"
console.log(y ?? 'Default Value'); // Output: "Default Value"
console.log(z ?? 'Default Value'); // Output: "Hello"

Back to Top⤴️

Optional Chaining Operator(?.)

The 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.

Example

let person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'New York',
    state: 'NY'
  }
};

console.log(person.address?.city); // Output: "New York"
console.log(person.address?.zipCode); // Output: undefined

delete Operator

The delete operator is used to delete a property from an object.

Example

const person = {
  firstName:"Manthan",
  lastName:"Ank",
  age:25,
  eyeColor:"black"
};

delete person.age;

console.log(person); // Output: {firstName: "Manthan", lastName: "Ank", eyeColor: "black"}

Back to Top⤴️

Spread (...) Operator

The 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.

Example

// Array literal
let numbers = [1, 2, 3];
let newNumbers = [...numbers, 4, 5, 6];
console.log(newNumbers); // Output: [1, 2, 3, 4, 5, 6]

// Object literal
let person = {name: 'John', age: 30};
let newPerson = {...person, city: 'New York', country: 'USA'};
console.log(newPerson); // Output: {name: "John", age: 30, city: "New York", country: "USA"}

// Function call
function sum(a, b, c) {
  return a + b + c;
}
let numbers = [1, 2, 3];
console.log(sum(...numbers)); // Output: 6

// Copy an array
let numbers = [1, 2, 3];
let newNumbers = [...numbers];
console.log(newNumbers); // Output: [1, 2, 3]

Back to Top⤴️

Boolean

JavaScript booleans can have one of two values: true or false.

let value = true;

Boolean Methods and Properties

The following are some of the most commonly used boolean methods and properties in JavaScript:

constructor - Returns the function that created JavaScript's Boolean prototype

let value = true;

console.log(value.constructor); // Output: ƒ Boolean() { [native code] }

prototype - Allows you to add properties and methods to the Boolean prototype

Boolean.prototype.age = 25;

let value = true;

console.log(value.age); // Output: 25

toString() - Converts a boolean value to a string, and returns the result

let value = true;

console.log(value.toString()); // Output: "true"

valueOf() - Returns the primitive value of a boolean

let value = true;

console.log(value.valueOf()); // Output: true

Back to Top⤴️

Object

Objects are used to store key/value (name/value) collections.

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

Object Methods & Properties

The following are some of the most commonly used object methods and properties in JavaScript:

constructor - Returns the function that created an object's prototype

let person = {
  firstName: "Manthan",
  lastName: "Ank",
};

console.log(person.constructor); // Output: ƒ Object() { [native code] }

keys() - Returns an Array Iterator object with the keys of an object

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

let keys = Object.keys(person);
console.log(keys); // Output: ["firstName", "lastName"]

prototype - Let you to add properties and methods to JavaScript objects

let person = {
  firstName: "Manthan",
  lastName: "Ank",
};

Object.prototype.age = 25;

console.log(person.age); // Output: 25

toString() - Converts an object to a string and returns the result

let person = {
  firstName: "Manthan",
  lastName: "Ank",
};

console.log(person.toString()); // Output: "[object Object]"

valueOf() - Returns the primitive value of an object

let person = {
  firstName: "Manthan",
  lastName: "Ank",
};

console.log(person.valueOf()); // Output: {firstName: "Manthan", lastName: "Ank"}

Back to Top⤴️

Arrays

Arrays are used to store multiple values in a single variable.

const letters = ['a', 'b', 'c'];

Array Methods

The following are some of the most commonly used array methods in JavaScript:

at()
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
findLast()
findLastIndex()
flat()
flatMap()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
lastIndexOf()
length
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toLocaleString()
toReversed()
toSorted()
toSpliced()
toString()
unshift()
valueOf()
values()
with()

Back to Top⤴️

at() - Returns the element at a specified index in an array

let array = ['a', 'b', 'c'];

console.log(array.at(1)); // Output: "b"

concat() - Joins arrays and returns an array with the joined arrays.

let array1 = ['a', 'b', 'c'];
let array2 = ['d', 'e', 'f'];

let mergedArray = array1.concat(array2);
console.log(mergedArray); // mergedArray is ['a', 'b', 'c', 'd', 'e', 'f']

constructor - Returns the function that created the Array object's prototype

let array = ['a', 'b', 'c'];

console.log(array.constructor); // Output: ƒ Array() { [native code] }

copyWithin() - Copies array elements within the array, to and from specified positions

let array = ['a', 'b', 'c', 'd', 'e', 'f'];

array.copyWithin(2, 0);
console.log(array); // Output: ["a", "b", "a", "b", "c", "d"]

array.copyWithin(4, 0, 2);
console.log(array); // Output: ["a", "b", "a", "b", "a", "b"]

Back to Top⤴️

entries() - Returns a key/value pair Array Iteration Object

let array = ['a', 'b', 'c'];

let iterator = array.entries();

console.log(iterator.next().value); // Output: [0, "a"]
console.log(iterator.next().value); // Output: [1, "b"]
console.log(iterator.next().value); // Output: [2, "c"]

every() - Checks if every element in an array pass a test

let array = [1, 2, 3, 4, 5];

let result = array.every(value => value > 0);

console.log(result); // Output: true

fill() - Fill the elements in an array with a static value

let array = ['a', 'b', 'c', 'd', 'e', 'f'];

array.fill('x', 2, 4);

console.log(array); // Output: ["a", "b", "x", "x", "e", "f"]

Back to Top⤴️

filter() - Creates a new array with every element in an array that pass a test

let array = [1, 2, 3, 4, 5];

let newArray = array.filter(value => value > 3);

console.log(array); // Output: [1, 2, 3, 4, 5]
console.log(newArray); // Output: [4, 5]

find() - Returns the value of the first element in an array that pass a test

let array = [1, 2, 3, 4, 5];

let value = array.find(value => value > 3);

console.log(array); // Output: [1, 2, 3, 4, 5]
console.log(value); // Output: 4

findIndex() - Returns the index of the first element in an array that pass a test

let array = [1, 2, 3, 4, 5];

let index = array.findIndex(value => value > 3);

console.log(array); // Output: [1, 2, 3, 4, 5]
console.log(index); // Output: 3

findLast() - Returns the value of the last element in an array that pass a test

let array = [1, 2, 3, 4, 5];

let value = array.findLast(value => value > 3);

console.log(array); // Output: [1, 2, 3, 4, 5]
console.log(value); // Output: 5

findLastIndex() - Returns the index of the last element in an array that pass a test

let array = [1, 2, 3, 4, 5];

let index = array.findLastIndex(value => value > 3);

console.log(array); // Output: [1, 2, 3, 4, 5]
console.log(index); // Output: 4

Back to Top⤴️

flat() - Flattens an array up to a specified depth

let array = [1, 2, [3, 4, [5, 6]]];

let newArray = array.flat(2);

console.log(array); // Output: [1, 2, [3, 4, [5, 6]]]
console.log(newArray); // Output: [1, 2, 3, 4, 5, 6]

flatMap() - Maps each element using a mapping function, then flattens the result into a new array

let array = [1, 2, 3, 4, 5];

let newArray = array.flatMap(value => [value * 2]);

console.log(array); // Output: [1, 2, 3, 4, 5]
console.log(newArray); // Output: [2, 4, 6, 8, 10]

forEach() - Calls a function for each array element

let array = [1, 2, 3, 4, 5];

array.forEach(value => {
  console.log(value);
});

// Output: 1
// Output: 2
// Output: 3
// Output: 4
// Output: 5

from() - Creates an array from an object

let array = 'hello';

let newArray = Array.from(array);

console.log(array); // Output: "hello"
console.log(newArray); // Output: ["h", "e", "l", "l", "o"]

includes() - Check if an array contains the specified element

let array = [1, 2, 3, 4, 5];

let result = array.includes(3);

console.log(array); // Output: [1, 2, 3, 4, 5]

console.log(result); // Output: true
console.log(array.includes(6)); // Output: false

indexOf() - Search the array for an element and returns its position

let array = [1, 2, 3, 4, 5];

let index = array.indexOf(3);

console.log(array); // Output: [1, 2, 3, 4, 5]

console.log(index); // Output: 2
console.log(array.indexOf(6)); // Output: -1

Back to Top⤴️

isArray() - Checks whether an object is an array

let array = [1, 2, 3, 4, 5];

let result = Array.isArray(array);

console.log(array); // Output: [1, 2, 3, 4, 5]

console.log(result); // Output: true
console.log(Array.isArray('hello')); // Output: false

join() - Joins all elements of an array into a string

let array = ['a', 'b', 'c'];

let result = array.join();

console.log(array); // Output: ["a", "b", "c"]
console.log(result); // Output: "a,b,c"

keys() - Returns a Array Iteration Object, containing the keys of the original array

let array = ['a', 'b', 'c'];

let iterator = array.keys();

console.log(array); // Output: ["a", "b", "c"]
console.log(iterator.next().value); // Output: 0

Back to Top⤴️

lastIndexOf() - Search the array for an element, starting at the end, and returns its position

let array = [1, 2, 3, 4, 5, 3];

let index = array.lastIndexOf(3);

console.log(array); // Output: [1, 2, 3, 4, 5, 3]
console.log(index); // Output: 5

length - Sets or returns the number of elements in an array

let array = ['a', 'b', 'c'];

console.log(array); // Output: ["a", "b", "c"]
console.log(array.length); // Output: 3

map() - Creates a new array with the result of calling a function for each array element

let array = [1, 2, 3, 4, 5];

let newArray = array.map(value => value * 2);

console.log(array); // Output: [1, 2, 3, 4, 5]
console.log(newArray); // Output: [2, 4, 6, 8, 10]

pop() - Removes the last element of an array, and returns that element

let array = ['a', 'b', 'c'];

let element = array.pop();

console.log(array); // Output: ["a", "b"]
console.log(element); // Output: "c"

Back to Top⤴️

prototype - Allows you to add properties and methods to an Array object

let array = ['a', 'b', 'c'];

Array.prototype.age = 25;

console.log(array); // Output: ["a", "b", "c"]
console.log(array.age); // Output: 25

push() - Adds new elements to the end of an array, and returns the new length

let array = ['a', 'b', 'c'];

let length = array.push('d', 'e');

console.log(array); // Output: ["a", "b", "c", "d", "e"]
console.log(length); // Output: 4

reduce() - Reduce the values of an array to a single value (going left-to-right)

let array = [1, 2, 3, 4, 5];

let total = array.reduce((accumulator, value) => accumulator + value, 0);

console.log(array); // Output: [1, 2, 3, 4, 5]
console.log(total); // Output: 15

Back to Top⤴️

reduceRight() - Reduce the values of an array to a single value (going right-to-left)

let array = [1, 2, 3, 4, 5];

let total = array.reduceRight((accumulator, value) => accumulator + value, 0);

console.log(array); // Output: [1, 2, 3, 4, 5]
console.log(total); // Output: 15

reverse() - Reverses the order of the elements in an array

let array = ['a', 'b', 'c'];

array.reverse();

console.log(array); // Output: ["c", "b", "a"]

shift() - Removes the first element of an array, and returns that element

let array = ['a', 'b', 'c'];

let element = array.shift();

console.log(array); // Output: ["b", "c"]
console.log(element); // Output: "a"

Back to Top⤴️

slice() - Selects a part of an array, and returns the new array

let array = ['a', 'b', 'c', 'd', 'e', 'f'];

let newArray = array.slice(2, 4);

console.log(array); // Output: ["a", "b", "c", "d", "e", "f"]
console.log(newArray); // Output: ["c", "d"]

some() - Checks if any of the elements in an array pass a test

let array = [1, 2, 3, 4, 5];

let result = array.some(value => value > 3);

console.log(array); // Output: [1, 2, 3, 4, 5]
console.log(result); // Output: true

sort() - Sorts the elements of an array

let array = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];

array.sort();

console.log(array); // Output: [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

Back to Top⤴️

splice() - Adds/Removes elements from an array

let array = ['a', 'b', 'c', 'd', 'e', 'f'];

array.splice(2, 0, 'x', 'y');

console.log(array); // Output: ["a", "b", "x", "y", "c", "d", "e", "f"]

toLocaleString() - Converts an array to a string, using locale-specific settings

let array = ['a', 'b', 'c'];

console.log(array.toLocaleString()); // Output: "a,b,c"

toReversed() - Reverses the elements of an array

let array = ['a', 'b', 'c'];

let reversedArray = array.toReversed();

console.log(array); // Output: ["a", "b", "c"]
console.log(reversedArray); // Output: ["c", "b", "a"]

Back to Top⤴️

toSorted() - Sorts the elements of an array

let array = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];

let sortedArray = array.toSorted();

console.log(array); // Output: [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]
console.log(sortedArray); // Output: [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

toSpliced() - Adds/Removes elements from an array

let array = ['a', 'b', 'c', 'd', 'e', 'f'];

let splicedArray = array.toSpliced(2, 0, 'x', 'y');

console.log(array); // Output: ["a", "b", "c", "d", "e", "f"]
console.log(splicedArray); // Output: ["a", "b", "x", "y", "c", "d", "e", "f"]

toString() - Converts an array to a string, and returns the result

let array = ['a', 'b', 'c'];

console.log(array.toString()); // Output: "a,b,c"

Back to Top⤴️

unshift() - Adds new elements to the beginning of an array, and returns the new length

let array = ['a', 'b', 'c'];

let length = array.unshift('x', 'y');

console.log(array); // Output: ["x", "y", "a", "b", "c"]

valueOf() - Returns the primitive value of an array

let array = ['a', 'b', 'c'];

console.log(array.valueOf()); // Output: ["a", "b", "c"]

values() - Returns an Array Iteration Object, containing the values of the original array

let array = ['a', 'b', 'c'];

let iterator = array.values();

console.log(array); // Output: ["a", "b", "c"]
console.log(iterator.next().value); // Output: "a"

with() - Allows you to add properties and methods to an Array object

let array = ['a', 'b', 'c'];

Array.with = 25;

console.log(array); // Output: ["a", "b", "c"]
console.log(Array.with); // Output: 25

Back to Top⤴️

Strings

Strings are used to store text. Strings must be enclosed in single or double quotes.

const name = 'Manthan';

Strings methods

The following are some of the most commonly used string methods in JavaScript:

at()
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
matchAll()
padEnd()
padStart()
prototype
repeat()
replace()
replaceAll()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
trimEnd()
trimStart()
valueOf()

Back to Top⤴️

at() - Returns the character at a specified index (position)

let myString = "Hello World!";

console.log(myString.at(0)); // Output: "H"

charAt() - Returns the character at a specified index (position)

let myString = "Hello World!";

console.log(myString.charAt(0)); // Output: "H"

charCodeAt() - Returns the Unicode of the character at a specified index

let myString = "Hello World!";

console.log(myString.charCodeAt(0)); // Output: 72

Back to Top⤴️

concat() - Returns two or more joined strings

let myString1 = "Hello";
let myString2 = "World!";

let newString = myString1.concat(" ", myString2);

console.log(newString); // Output: "Hello World!"

constructor - Returns the string's constructor function

let myString = "Hello World!";

console.log(myString.constructor); // Output: ƒ String() { [native code] }

Back to Top⤴️

endsWith() - Returns if a string ends with a specified value

let myString = "Hello World!";

console.log(myString.endsWith("!")); // Output: true

fromCharCode() - Returns Unicode values as characters

let myString = String.fromCharCode(72, 101, 108, 108, 111);

console.log(myString); // Output: "Hello"

Back to Top⤴️

includes() - Returns if a string contains a specified value

let myString = "Hello World!";

console.log(myString.includes("World")); // Output: true

indexOf() - Returns the index (position) of the first occurrence of a value in a string

let myString = "Hello World!";

console.log(myString.indexOf("World")); // Output: 6

Back to Top⤴️

lastIndexOf() - Returns the index (position) of the last occurrence of a value in a string

let myString = "Hello World! World!";

console.log(myString.lastIndexOf("World")); // Output: 13

length - Returns the length of a string

let myString = "Hello World!";

console.log(myString.length); // Output: 12

Back to Top⤴️

localeCompare() - Compares two strings in the current locale

let myString = "Hello World!";

console.log(myString.localeCompare("Hello World!")); // Output: 0

match() - Searches a string for a value, or a regular expression, and returns the matches

let myString = "The quick brown fox jumps over the lazy dog.";

let result = myString.match(/the/i);

console.log(myString); // Output: "The quick brown fox jumps over the lazy dog."
console.log(result); // Output: ["the", index: 30, input: "The quick brown fox jumps over the lazy dog.", groups: undefined]

matchAll() - Returns an iterator of all results matching a string against a regular expression

let myString = "The quick brown fox jumps over the lazy dog.";

let result = myString.matchAll(/the/gi);

console.log(myString); // Output: "The quick brown fox jumps over the lazy dog."
console.log(result); // Output: [RegExpStringIterator]

padEnd() - Pads a string with a specified value at the end

let myString = "Hello";

let newString = myString.padEnd(10, " World!");

console.log(myString); // Output: "Hello"
console.log(newString); // Output: "Hello World!"

padStart() - Pads a string with a specified value at the start

let myString = "Hello";

let newString = myString.padStart(10, " World!");

console.log(myString); // Output: "Hello"
console.log(newString); // Output: " World!Hello"

Back to Top⤴️

prototype - Allows you to add properties and methods to an object

let myString = "Hello World!";
String.prototype.age = 25;

console.log(myString.age); // Output: 25

repeat() - Returns a new string with a number of copies of a string

let myString = "Hello World!";

console.log(myString.repeat(2)); // Output: "Hello World!Hello World!"

Back to Top⤴️

replace() - Searches a string for a value, or a regular expression, and returns a string where the values are replaced

let myString = "Hello World!";

let newString = myString.replace("World", "Universe");

console.log(myString); // Output: "Hello World!"
console.log(newString); // Output: "Hello Universe!"

search() - Searches a string for a value, or regular expression, and returns the index (position) of the match

let myString = "The quick brown fox jumps over the lazy dog.";

let result = myString.search(/fox/);

console.log(myString); // Output: "The quick brown fox jumps over the lazy dog."
console.log(result); // Output: 16

Back to Top⤴️

slice() - Extracts a part of a string and returns a new string

let myString = "Hello World!";

let newString = myString.slice(6, 11);

console.log(myString); // Output: "Hello World!"
console.log(newString); // Output: "World"

split() - Splits a string into an array of substrings

let myString = "Hello World!";

let array = myString.split(" ");

console.log(myString); // Output: "Hello World!"
console.log(array); // Output: ["Hello", "World!"]

Back to Top⤴️

startsWith() - Checks whether a string begins with specified characters

let myString = "Hello World!";

console.log(myString.startsWith("Hello")); // Output: true

substr() - Extracts a number of characters from a string, from a start index (position)

let myString = "Hello World!";

let newString = myString.substr(6, 5);

console.log(myString); // Output: "Hello World!"
console.log(newString); // Output: "World"

Back to Top⤴️

substring() - Extracts characters from a string, between two specified indices (positions)

let myString = "Hello World!";

let newString = myString.substring(6, 11);

console.log(myString); // Output: "Hello World!"
console.log(newString); // Output: "World"

toLocaleLowerCase() - Returns a string converted to lowercase letters, using the host's locale

let myString = "Hello World!";

console.log(myString.toLocaleLowerCase()); // Output: "hello world!"

Back to Top⤴️

toLocaleUpperCase() - Returns a string converted to uppercase letters, using the host's locale

let myString = "Hello World!";

console.log(myString.toLocaleUpperCase()); // Output: "HELLO WORLD!"

toLowerCase() - Returns a string converted to lowercase letters

let myString = "Hello World!";

console.log(myString); // Output: "Hello World!"
console.log(myString.toLowerCase()); // Output: "hello world!"

Back to Top⤴️

toString() - Returns a string or a string object as a string

let myString = "Hello World!";
let number = 25; 

console.log(myString.toString()); // Output: "Hello World!"
console.log(number.toString()); // Output: "25"

toUpperCase() - Returns a string converted to uppercase letters

let myString = "Hello World!";

console.log(myString); // Output: "Hello World!"
console.log(myString.toUpperCase()); // Output: "HELLO WORLD

Back to Top⤴️

trim() - Returns a string with removed whitespaces

let myString = " Hello World! ";

console.log(myString); // Output: " Hello World! "
console.log(myString.trim()); // Output: "Hello World!"

trimEnd() - Returns a string with removed whitespaces from the end

let myString = " Hello World! ";

console.log(myString); // Output: " Hello World! "
console.log(myString.trimEnd()); // Output: " Hello World!"

Back to Top⤴️

trimStart() - Returns a string with removed whitespaces from the start

let myString = " Hello World! ";

console.log(myString); // Output: " Hello World! "
console.log(myString.trimStart()); // Output: "Hello World! "

valueOf() - Returns the primitive value of a string or a string object.

let myString = "Hello World!";

console.log(myString.valueOf()); // Output: "Hello World!"

Back to Top⤴️

Objects

Objects are used to store collections of data and more complex entities.

const person = {
  firstName: "Manthan",
  lastName: "Ank",
  age: 25,
  hobbies: ["reading", "coding", "traveling"],
  address: {
    street: "123 Main St",
    city: "Mumbai",
    state: "MH",
  },
};

Object Methods

The following are some of the most commonly used object methods in JavaScript:

assign()
create()
defineProperties()
defineProperty()
entries()
freeze()
fromEntries()
getOwnPropertyDescriptor()
getOwnPropertyDescriptors()
getOwnPropertyNames()
getOwnPropertySymbols()
getPrototypeOf()
groupBy()
hasOwn()
is()
isExtensible()
isFrozen()
isSealed()
keys()
preventExtensions()
prototype
seal()
setPrototypeOf()
values()

Back to Top⤴️

assign() - Copies the values of all enumerable own properties from one or more source objects to a target object

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

const details = {
  age: 25,
  hobbies: ["reading", "coding", "traveling"],
};

const newPerson = Object.assign(person, details);

console.log(newPerson); // Output: {firstName: "Manthan", lastName: "Ank", age: 25, hobbies: Array(3)}

create() - Creates a new object with the specified prototype object and properties

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

const newPerson = Object.create(person);

console.log(newPerson); // Output: {}

Back to Top⤴️

defineProperties() - Defines new or modifies existing properties directly on an object, returning the object

const person = {};

Object.defineProperties(person, {
  firstName: {
    value: "Manthan",
    writable: true,
  },
  lastName: {
    value: "Ank",
    writable: true,
  },
});

console.log(person); // Output: {firstName: "Manthan", lastName: "Ank"}

defineProperty() - Defines a new property directly on an object, or modifies an existing property on an object, and returns the object

const person = {};

Object.defineProperty(person, "firstName", {
  value: "Manthan",
  writable: true,
});

console.log(person); // Output: {firstName: "Manthan"}

Back to Top⤴️

entries() - Returns an array of a given object's own enumerable string-keyed property [key, value] pairs

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

const entries = Object.entries(person);

console.log(entries); // Output: [["firstName", "Manthan"], ["lastName", "Ank"]]

freeze() - Freezes an object: other code can't delete or change any properties

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

Object.freeze(person);

person.age = 25;

console.log(person); // Output: {firstName: "Manthan", lastName: "Ank"}

Back to Top⤴️

fromEntries() - Returns a new object from an iterable of [key, value] pairs

const entries = [
  ["firstName", "Manthan"],
  ["lastName", "Ank"],
];

const person = Object.fromEntries(entries);

console.log(person); // Output: {firstName: "Manthan", lastName: "Ank"}

getOwnPropertyDescriptor() - Returns a property descriptor for a named property on an object

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

const descriptor = Object.getOwnPropertyDescriptor(person, "firstName");

console.log(descriptor); // Output: {value: "Manthan", writable: true, enumerable: true, configurable: true}

Back to Top⤴️

getOwnPropertyDescriptors() - Returns all own property descriptors of a given object

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

const descriptors = Object.getOwnPropertyDescriptors(person);

console.log(descriptors); // Output: {firstName: {…}, lastName: {…}}

getOwnPropertyNames() - Returns an array of all properties (enumerable or not) found directly upon a given object

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

const properties = Object.getOwnPropertyNames(person);

console.log(properties); // Output: ["firstName", "lastName"]

Back to Top⤴️

getOwnPropertySymbols() - Returns an array of all symbol properties found directly upon a given object

const person = {
  [Symbol("firstName")]: "Manthan",
  [Symbol("lastName")]: "Ank",
};

const symbols = Object.getOwnPropertySymbols(person);

console.log(symbols); // Output: [Symbol(firstName), Symbol(lastName)]

getPrototypeOf() - Returns the prototype of the specified object

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

const prototype = Object.getPrototypeOf(person);

console.log(prototype); // Output: {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

Back to Top⤴️

groupBy() - Groups the elements of an array based on the given function

const people = [
  { name: "Manthan", age: 25 },
  { name: "Ank", age: 30 },
  { name: "John", age: 25 },
];

const groupedPeople = people.groupBy(person => person.age);

console.log(groupedPeople); // Output: {25: Array(2), 30: Array(1)}

hasOwn() - Returns a boolean indicating whether the object has the specified property as its own property

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

console.log(person.hasOwn("firstName")); // Output: true

Back to Top⤴️

is() - Compares if two values are the same value

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

const newPerson = {
  firstName: "Manthan",
  lastName: "Ank",
};

console.log(Object.is(person, newPerson)); // Output: false

isExtensible() - Returns a boolean indicating if the object is extensible

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

console.log(Object.isExtensible(person)); // Output: true

Back to Top⤴️

isFrozen() - Returns a boolean indicating if the object is frozen

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

Object.freeze(person);

console.log(Object.isFrozen(person)); // Output: true

isSealed() - Returns a boolean indicating if the object is sealed

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

Object.seal(person);

console.log(Object.isSealed(person)); // Output: true

Back to Top⤴️

keys() - Returns an array of a given object's own enumerable property names

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

const keys = Object.keys(person);

console.log(keys); // Output: ["firstName", "lastName"]

preventExtensions() - Prevents any extensions of an object

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

Object.preventExtensions(person);

person.age = 25;

console.log(person); // Output: {firstName: "Manthan", lastName: "Ank"}

Back to Top⤴️

prototype - Allows you to add properties and methods to an object

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

Object.prototype.age = 25;

console.log(person.age); // Output: 25

seal() - Prevents other code from deleting properties of an object

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

Object.seal(person);

delete person.firstName;

console.log(person); // Output: {firstName: "Manthan", lastName: "Ank"}

Back to Top⤴️

setPrototypeOf() - Sets the prototype (i.e., the internal [[Prototype]] property) of a specified object to another object or null

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

const newPerson = {
  age: 25,
};

Object.setPrototypeOf(newPerson, person);

console.log(newPerson); // Output: {age: 25}

values() - Returns an array of a given object's own enumerable property values

const person = {
  firstName: "Manthan",
  lastName: "Ank",
};

const values = Object.values(person);

console.log(values); // Output: ["Manthan", "Ank"]

Loops

Loops are used to execute a block of code multiple times.

There are several types of loops in JavaScript:

for loop
while loop
do while loop
for in loop
for of loop

Back to Top⤴️

for loop

This type of loop is used to execute a block of code a specified number of times.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

while loop

This type of loop is used to execute a block of code as long as a specified condition is true.

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

Back to Top⤴️

do while loop

This type of loop is similar to the while loop, but it guarantees that the code block will be executed at least once.

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

for in loop

This type of loop is used to iterate over the enumerable properties of an object.

let obj = {a: 1, b: 2, c: 3};
for (let prop in obj) {
  console.log(prop + ": " + obj[prop]);
}

Back to Top⤴️

for of loop

This type of loop is used to iterate over the iterable objects such as arrays, strings, and maps.

let arr = [1, 2, 3];
for (let value of arr) {
  console.log(value);
}

Conditional Statements

Conditional statements are used to perform different actions based on different conditions.

There are several types of conditional statements in JavaScript:

if statement
if else statement
if else else if statement
switch statement

Back to Top⤴️

if statement

The if statement is used to execute a block of code if a specified condition is true.

if (x > 0) {
  console.log("x is greater than 0");
}

if else statement

The 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.

if (x > 0) {
  console.log("x is greater than 0");
} else {
  console.log("x is not greater than 0");
}

Back to Top⤴️

if else else if statement

The if...else if...else statement is used to specify multiple conditions and execute a different block of code for each one.

if (x > 0) {
  console.log("x is positive");
} else if (x < 0) {
  console.log("x is negative");
} else {
  console.log("x is zero");
}

switch statement

The switch statement is used to select one of many blocks of code to be executed.

let day = new Date().getDay();
switch (day) {
  case 0:
    console.log("Sunday");
    break;
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  // and so on
  default:
    console.log("Invalid day");
}

Back to Top⤴️

Functions

Functions 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 ().

function name(parameter1, parameter2, parameter3) {
  // code to be executed
}

Types of Functions

Named Function
Anonymous Function
Arrow Function
IIFE
Higher-Order Function
Function Expression
Function Declaration
Function Constructor

Back to Top⤴️

Named Function

A named function is a function that has a name. It can be defined using the function keyword followed by the function name.

function name(parameter1, parameter2, parameter3) {
  // code to be executed
}

Anonymous Function

An anonymous function is a function that does not have a name. It can be defined using the function keyword followed by parentheses ().

const name = function(parameter1, parameter2, parameter3) {
  // code to be executed
}

Arrow Function

Arrow functions are a more concise way to write functions in JavaScript. They are defined using the => syntax.

const name = (parameter1, parameter2, parameter3) => {
  // code to be executed
}

const name = (parameter1, parameter2, parameter3) => expression

const name = parameter => expression

const name = () => expression

const name = (parameter1, parameter2, parameter3) => {
  return expression
}

const name = parameter => {
  return expression
}

const name = () => {
  return expression
}

Back to Top⤴️

IIFE

An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.

(function() {
  console.log("Hello World!");
})();

Back to Top⤴️

Higher-Order Functions

A higher-order function is a function that takes another function as an argument or returns a function as a result.

function greet() {
  return "Hello World!";
}

function greetUser(greet) {
  return greet();
}

console.log(greetUser(greet)); // Output: "Hello World!"

Back to Top⤴️

Function Expression

A function expression is a function that is assigned to a variable.

const greet = function() {
  return "Hello World!";
}

console.log(greet()); // Output: "Hello World!"

Function Declaration

A function declaration is a function that is defined using the function keyword followed by the function name.

function greet() {
  return "Hello World!";
}

console.log(greet()); // Output: "Hello World!"

Function Constructor

A function constructor is a function that is used to create new objects.

const greet = new Function("return 'Hello World!'");
console.log(greet()); // Output: "Hello World!"

Back to Top⤴️

Scope

Scope refers to the visibility of variables in JavaScript. There are three types of scope in JavaScript:

Global Scope
Function Scope
Block Scope

Global Scope

let a = 10;
function myFunction() {
    console.log(a);
}
myFunction();

Block Scope

//var
function myFunction () {
    if(true) {
        var a = 10; // it exists in function scope
    }
    console.log(a);
}
myFunction();

//let
function myFunction () {
    if(true) {
        let a = 10; // it exists in block scope
    }
    console.log(a);
}
myFunction();

//const
function myFunction () {
    if(true) {
        const a = 10; // it exists in block scope
    }
    console.log(a);
}
myFunction();

Back to Top⤴️

Function Scope

//var
function myFunction() {
    var a = 10;
}
myFunction()
console.log(a);

//let
function myFunction() {
    let a = 10;
}
myFunction()
console.log(a);

//const
function myFunction() {
    const a = 10;
}
myFunction()
console.log(a);

Back to Top⤴️

Hoisting

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compilation phase.

console.log(x); // Output: undefined

var x = 5;

Back to Top⤴️

Currying

Currying is a technique in which a function with multiple arguments is converted into a sequence of nested functions, each taking a single argument.

function multiply(a) {
  return function(b) {
    return function(c) {
      return a * b * c;
    };
  };
}

console.log(multiply(2)(3)(4)); // Output: 24

Dates

JavaScript provides a built-in Date object that can be used to work with dates and times.

Date Object

The 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.

new Date()

Back to Top⤴️

Date Formats

There are several ways to create a new Date object in JavaScript:

new Date() // current date and time
new Date(milliseconds) // milliseconds since January 1, 1970, 00:00:00 UTC
new Date(dateString) // date string (e.g. "October 13, 2014 11:13:00")
new Date(year, month, day, hours, minutes, seconds, milliseconds) // year, month, day, hours, minutes, seconds, milliseconds

Back to Top⤴️

Date Properties

constructor - Returns the function that created the Date object's prototype

const d = new Date();
d.constructor; // ƒ Date() { [native code] }

prototype - Allows you to add properties and methods to the Date object

Date.prototype.age = 25;

const d = new Date();
d.age; // 25

UTC - Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC

const d = new Date();
d.UTC(); // 1642149980524

Back to Top⤴️

parse - Parses a date string and returns the number of milliseconds since January 1, 1970, 00:00:00 UTC

Date.parse("Jan 1, 2023"); // 1672531200000

now - Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC

Date.now(); // 1642149980524

Back to Top⤴️

Date Methods

toString - It is a built-in function that can be used to convert a date object to a string.

const d = new Date();
d.toString(); // 'Sat Jan 14 2023 10:36:20 GMT+0530 (India Standard Time)'

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".

const d = new Date();
d.toDateString(); // 'Sat Jan 14 2023'

Back to Top⤴️

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".

const d = new Date();
d.toUTCString(); // 'Sat, 14 Jan 2023 05:06:20 GMT'

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".

const d = new Date();
d.toISOString(); // '2023-01-14T05:06:20.524Z'

Back to Top⤴️

Date Get Methods

The 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:

getFullYear - returns the four-digit year of the date.

const d = new Date();
d.getFullYear();

getMonth - returns the month of the date (0-11, where 0 represents January and 11 represents December).

const d = new Date();
d.getMonth();

Back to Top⤴️

getDate - returns the day of the month of the date (1-31).

const d = new Date();
d.getDate();

getDay - returns the day of the week of the date (0-6, where 0 represents Sunday and 6 represents Saturday).

const d = new Date();
d.getDay();

getHours - returns the hour of the date (0-23).

const d = new Date();
d.getHours();

Back to Top⤴️

getMinutes - returns the minutes of the date (0-59).

const d = new Date();
d.getMinutes();

getSeconds - returns the seconds of the date (0-59).

const d = new Date();
d.getSeconds();

Back to Top⤴️

getMilliseconds - returns the milliseconds of the date (0-999).

const d = new Date();
d.getMilliseconds();

getTime - returns the number of milliseconds since January 1, 1970, 00:00:00 UTC.

const d = new Date();
d.getTime();

Back to Top⤴️

Date Set Methods

setDate - sets the day of the month of the date object.

const d = new Date();
d.setDate(15);

setFullYear - sets the year, and optionally the month and date, of the date object.

const d = new Date();
d.setFullYear(2020);

Back to Top⤴️

setHours - sets the hours, minutes, seconds and milliseconds of the date object.

const d = new Date();
d.setHours(22);

setMilliseconds - sets the milliseconds of the date object.

const d = new Date();
d.setMilliSeconds(3000);

setMinutes - sets the minutes, seconds and milliseconds of the date object.

const d = new Date();
d.setMinutes(30);

Back to Top⤴️

setSeconds - sets the seconds and milliseconds of the date object.

const d = new Date();
d.setSeconds(30);

setMonth - sets the month, and optionally the date, of the date object.

const d = new Date();
d.setMonth(11);

setTime - sets the date object to the time represented by a number of milliseconds since January 1, 1970, 00:00:00 UTC.

const d = new Date();
d.setTime(30);

Back to Top⤴️

Type Conversion

JavaScript 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.

Convert string to numbers

Number - Converts a string to a number using the Number() function.

Number("3.14") // 3.14
Number(Math.PI) // 3.141592653589793
Number(" ") // 0
Number("") // 0
Number("99 88") // NaN
Number("John") // NaN

Back to Top⤴️

parseFloat - Converts a string to a floating-point number using the parseFloat() method.

let num = parseFloat("123.456");
console.log(num); // Output: 123.456

Back to Top⤴️

parseInt - Converts a string to an integer using the parseInt() method.

let num = parseInt("123");
console.log(num); // Output: 123

Convert number to a string

String - Converts a number to a string using the String() method.

let str = String(123);
console.log(str); // Output: "123"

Back to Top⤴️

toString - Converts a number to a string using the toString() method.

let str = (123).toString();
console.log(str); // Output: "123"

toExponential - Converts a number to a string, using toExponential() method.

let str = (123).toExponential();
console.log(str); // Output: 1.23e+2

toFixed - Converts a number to a string, using toFixed() method.

let str = (123).toFixed();
console.log(str); // Output: 123

Back to Top⤴️

toPrecision - Converts a number to a string, using toPrecision() method.

let str = (123).toPrecision();
console.log(str); // Output: 123

Convert dates to numbers

Number - Converts a date to a number using the Number() function.

d = new Date();
Number(d) // 1673677425068

Back to Top⤴️

getTime Converts a date to a number using the getTime() method.

d = new Date();
d.getTime() // 1673677461233

string - Converts a date to a string using the String() function.

String(Date()) // 'Sat Jan 14 2023 11:54:38 GMT+0530 (India Standard Time)'

Back to Top⤴️

toString - Converts a date to a string using the toString() method.

Date().toString() //'Sat Jan 14 2023 11:54:57 GMT+0530 (India Standard Time)'

Convert boolean to number

Number - Converts a boolean to a number using the Number() function.

Number(false)     // returns 0
Number(true)      // returns 1

Back to Top⤴️

Convert boolean to string

string - Converts a boolean to a string using the String() function.

String(false)      // returns "false"
String(true)       // returns "true"

Original Value	Converted to Number	Converted to String	Converted to Boolean
false	0	"false"	false
true	1	"true"	true
0	0	"0"	false
1	1	"1"	true
"0"	0	"0"	true
"000"	0	"000"	true
"1"	1	"1"	true
NaN	NaN	"NaN"	false
Infinity	Infinity	"Infinity"	true
-Infinity	-Infinity	"-Infinity"	true
""	0	""	false
"20"	20	"20"	true
"twenty"	NaN	"twenty"	true
[ ]	0	""	true
[20]	20	"20"	true
[10,20]	NaN	"10,20"	true
["twenty"]	NaN	"twenty"	true
["ten","twenty"]	NaN	"ten,twenty"	true
function(){}	NaN	"function(){}"	true
{ }	NaN	"[object Object]"	true
null	0	"null"	false
undefined	NaN	"undefined"	false

Back to Top⤴️

Typeof

The typeof operator is used to get the data type of a variable or an expression.

typeof "John"                 // Returns "string"
typeof 3.14                   // Returns "number"
typeof NaN                    // Returns "number"
typeof false                  // Returns "boolean"
typeof [1,2,3,4]              // Returns "object"
typeof {name:'John', age:34}  // Returns "object"
typeof new Date()             // Returns "object"
typeof function () {}         // Returns "function"
typeof myCar                  // Returns "undefined" *
typeof null                   // Returns "object"

Back to Top⤴️

Keep in mind that

The data type of NaN is number
The data type of an array is object
The data type of a date is object
The data type of null is object
The data type of an undefined variable is undefined *
The data type of a variable that has not been assigned a value is also undefined *

Math

The Math object allows you to perform mathematical tasks on numbers.

Math.PI // returns 3.141592653589793

Back to Top⤴️

Math Property

Math.property

Example

Math.E        // returns Euler's number
Math.PI       // returns PI
Math.SQRT2    // returns the square root of 2
Math.SQRT1_2  // returns the square root of 1/2
Math.LN2      // returns the natural logarithm of 2
Math.LN10     // returns the natural logarithm of 10
Math.LOG2E    // returns base 2 logarithm of E
Math.LOG10E   // returns base 10 logarithm of E

Back to Top⤴️

Math Methods

The Math object has several built-in methods that can be used to perform mathematical tasks. Some of the most commonly used methods are:

Math.round - Returns x rounded to its nearest integer

Math.round(4.6); // 5

Math.ceil - Returns x rounded up to its nearest integer

Math.ceil(4.4); // 5

Back to Top⤴️

Math.floor - Returns x rounded down to its nearest integer

Math.floor(4.7); // 4

Math.trunc - Returns the integer part of x (new in ES6)

Math.trunc(4.7); // 4

Back to Top⤴️

Math.sign - Returns if x is negative, null or positive.

Math.sign(4); // 1

Math.pow - returns the value of x to the power of y.

Math.pow(8, 2); // 64

Math.sqrt - returns the square root of x.

Math.sqrt(64); // 8

Back to Top⤴️

Math.abs - returns the absolute (positive) value of x.

Math.abs(-4.7); // 4.7

Math.sin - returns the sine (a value between -1 and 1) of the angle x (given in radians).

Math.sin(90 * Math.PI / 180);     // returns 1 (the sine of 90 degrees)

Math.cos - returns the cosine (a value between -1 and 1) of the angle x (given in radians).

Math.cos(0 * Math.PI / 180);     // returns 1 (the cos of 0 degrees)

Back to Top⤴️

Math.min - It can be used to find the lowest value in a list of arguments.

Math.min(0, 150, 30, 20, -8, -200); // -200

Math.max - It can be used to find the highest value in a list of arguments.

Math.max(0, 150, 30, 20, -8, -200); // 150

Math.random - returns a random number between 0 (inclusive), and 1 (exclusive).

Math.random(); // 0.07840484495533051

Back to Top⤴️

Math.log - returns the natural logarithm of x.

Math.log(1); // 0

Math.log2 - returns the base 2 logarithm of x.

Math.log2(8); // 3

Math.log10 - returns the base 10 logarithm of x.

Math.log10(1000); // 3

Back to Top⤴️

Method	Description
abs(x)	Returns the absolute value of x
acos(x)	Returns the arccosine of x, in radians
acosh(x)	Returns the hyperbolic arccosine of x
asin(x)	Returns the arcsine of x, in radians
asinh(x)	Returns the hyperbolic arcsine of x
atan(x)	Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians
atan2(y, x)	Returns the arctangent of the quotient of its arguments
atanh(x)	Returns the hyperbolic arctangent of x
cbrt(x)	Returns the cubic root of x
ceil(x)	Returns x, rounded upwards to the nearest integer
cos(x)	Returns the cosine of x (x is in radians)
cosh(x)	Returns the hyperbolic cosine of x
exp(x)	Returns the value of Ex
floor(x)	Returns x, rounded downwards to the nearest integer
log(x)	Returns the natural logarithm (base E) of x
max(x, y, z, ..., n)	Returns the number with the highest value
min(x, y, z, ..., n)	Returns the number with the lowest value
pow(x, y)	Returns the value of x to the power of y
random()	Returns a random number between 0 and 1
round(x)	Rounds x to the nearest integer
sign(x)	Returns if x is negative, null or positive (-1, 0, 1)
sin(x)	Returns the sine of x (x is in radians)
sinh(x)	Returns the hyperbolic sine of x
sqrt(x)	Returns the square root of x
tan(x)	Returns the tangent of an angle
tanh(x)	Returns the hyperbolic tangent of a number
trunc(x)	Returns the integer part of a number (x)

Sets

A Set is a collection of unique values. A Set can hold any datatype, including primitive types and objects.

const letters = new Set(["a","b","c"]);

Back to Top⤴️

Set Properties

constructor - Returns the function that created the Set object's prototype

letters.constructor; // ƒ Set() { [native code] }

prototype - Allows you to add properties and methods to a Set object

Set.prototype.size = 0;

const letters = new Set(["a","b","c"]);
letters.size; // 3

Back to Top⤴️

Set Methods

The Set object has several built-in methods that can be used to work with Sets. Some of the most commonly used methods are:

new Set()
add()
delete()
has()
forEach()
values()
size

new Set - Creates a new Set

const letters = new Set(["a","b","c"]);

Back to Top⤴️

add - Adds a new element to the Set

letters.add("d");

delete - Removes an element from a Set

letters.delete("d");

has - Returns true if a value exists in the Set

letters.has("a");

Back to Top⤴️

forEach - Invokes a callback for each element in the Set

// Create a Set
const letters = new Set(["a","b","c"]);

// List all Elements
let text = "";
letters.forEach (function(value) {
  text += value;
})

values - Returns an iterator with all the values in a Set

letters.values()   // Returns [object Set Iterator]

Back to Top⤴️

size Property - Returns the number of elements in a Set

letters.size;

Map

A Map holds key-value pairs where the keys can be any datatype. A Map remembers the original insertion order of the keys.

const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Back to Top⤴️

Map Properties

constructor - Returns the function that created the Map object's prototype

fruits.constructor; // ƒ Map() { [native code] }

prototype - Allows you to add properties and methods to a Map object

Map.prototype.size = 0;

const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);
fruits.size; // 3

Back to Top⤴️

Map Methods

The Map object has several built-in methods that can be used to work with Maps. Some of the most commonly used methods are:

new Map()
set()
get()
delete()
has()
forEach()
entries()
size

new Map - Creates a new Map

// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Back to Top⤴️

set - Sets the value for a key in a Map

// Create a Map
const fruits = new Map();

// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

get - Gets the value for a key in a Map

fruits.get("apples");    // Returns 500

delete - Removes a Map element specified by the key

fruits.delete("apples");

Back to Top⤴️

has - Returns true if a key exists in a Map

fruits.has("apples");

forEach - Calls a function for each key/value pair in a Map

// List all entries
let text = "";
fruits.forEach (function(value, key) {
  text += key + ' = ' + value;
})

entries - Returns an iterator with the [key, value] pairs in a Map.

// List all entries
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

size Property - Returns the number of elements in a Map

fruits.size;

Back to Top⤴️

Recursion

Recursion 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.

function factorial(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

factorial(5); // 120

Back to Top⤴️

Async

Asynchronous 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.

Callbacks

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

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}

myCalculator(5, 5, myDisplayer);

// Output: 10

Back to Top⤴️

Asynchronous JavaScript

JavaScript 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.

let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("The async operation was successful");
  }, 1000);
});

myPromise.then((value) => {
  console.log(value);
});

// Output: The async operation was successful

Promise

A promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

Syntax -

const myPromise = new Promise((resolve, reject) => {
    // code
});

myPromise.then(
    (value) => {
        // success
    },
    (error) => {
        // error
    }
);

myPromise.catch(
    (error) => {
        // error
    }
);

myPromise.finally(
    () => {
        // code
    }
);

myPromise.all([promise1, promise2, promise3, ...])

Example

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("The async operation was successful");
    }, 1000);
});

myPromise.then((value) => {
    console.log(value);
});

// Output: The async operation was successful

Back to Top⤴️

async/await

The 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.

Async Syntax

async function myFunction() {
    // code
}

Await Syntax

let result = await promise;

// or

await promise;

Example

async function myFunction() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("The async operation was successful"), 1000);
    });

    let result = await promise;
    console.log(result);
}

myFunction();

// Output: The async operation was successful

Back to Top⤴️

DOM

The 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.

DOM Properties

document.body - Returns the body element

document.body;

document.cookie - Returns the document's cookie

document.cookie;

document.doctype - Returns the document's doctype

document.doctype;

Back to Top⤴️

document.documentElement - Returns the document's root element

document.documentElement;

document.documentURI - Returns the URI of the document

document.documentURI;

document.domain - Returns the domain name of the server that loaded the document

document.domain;

Back to Top⤴️

document.head - Returns the head element

document.head;

document.images - Returns a collection of all images in the document

document.images;

document.lastModified - Returns the date and time the document was last modified

document.lastModified;

document.links - Returns a collection of all links in the document

document.links;

Back to Top⤴️

document.readyState - Returns the loading status of the document

document.readyState;

document.referrer - Returns the URI of the referrer (the linking document)

document.referrer;

document.title - Returns the title of the document

document.title;

document.URL - Returns the complete URL of the document

document.URL;

Back to Top⤴️

DOM Methods

The Document object has several built-in methods that can be used to manipulate the document. Some of the most commonly used methods are:

addEventListener() - It is used to add an event listener to the document.

document.addEventListener("click", () => {
  console.log("The document was clicked");
});

adoptNode() - It is used to adopt the node from the other documents.

document.adoptNode(node);

Back to Top⤴️

append() - It appends the new node or HTML after the last child node of the document.

document.append(node);

caretPositionFromPoint() - It returns the caretPosition object, containing the DOM node based on the coordinates passed as an argument.

document.caretPositionFromPoint(x, y);

close() - It closes the output stream opened using the document.open() method.

document.close();

Back to Top⤴️

createAttribute() - It creates a new attribute node.

document.createAttribute("class");

createAttributeNS() - It creates a new attribute node with the particular namespace URI.

document.createAttributeNS("http://www.w3.org/2000/svg", "class");

createComment() - It creates a new comment node with a specific text message.

document.createComment("This is a comment");

Back to Top⤴️

createDocumentFragment() - It creates a DocumentFragment node.

document.createDocumentFragment();

createElement() - It creates a new element node to insert into the web page.

document.createElement("div");

createElementNS() - It is used to create a new element node with a particular namespace URI.

document.createElementNS("http://www.w3.org/2000/svg", "div");

createEvent() - It creates a new event node.

document.createEvent("Event");

Back to Top⤴️

createTextNode() - It creates a new text node.

document.createTextNode("This is a text node");

elementFromPoint() - It accesses the element from the specified coordinates.

document.elementFromPoint(x, y);

elementsFromPoint() - It returns the array of elements that are at the specified coordinates.

document.elementsFromPoint(x, y);

Back to Top⤴️

getAnimations() - It returns the array of all animations applied on the document.

document.getAnimations();

getElementById() - It accesses the HTML element using the id.

document.getElementById("id");

getElementsByClassName() - It accesses the HTML element using the class name.

document.getElementsByClassName("class");

Back to Top⤴️

getElementsByName() - It accesses the HTML element using the name.

document.getElementsByName("name");

getElementsByTagName() - It accesses the HTML element using the tag name.

document.getElementsByTagName("tag");

hasFocus() - It returns the boolean value based on whether any element or document itself is in the focus.

document.hasFocus();

Back to Top⤴️

importNode() - It is used to import the node from another document.

document.importNode(node);

normalize() - It removes the text nodes, which are empty, and joins other nodes.

document.normalize();

open() - It is used to open a new output stream.

document.open();

Back to Top⤴️

prepand() - It is used to insert the particular node before all nodes.

document.prepand(node);

querySelector() - It is used to select the first element that matches the css selector passed as an argument.

document.querySelector("p");

querySelectorAll() - It returns the nodelist of the HTML elements, which matches the multiple CSS selectors.

document.querySelectorAll("p.intro");

Back to Top⤴️

removeEventListener() - It is used to remove the event listener from the document.

document.removeEventListener("click", () => {
  console.log("The document was clicked");
});

replaceChildren() - It replaces the children nodes of the document.

document.replaceChildren(node);

Back to Top⤴️

write() - It is used to write text, HTML, etc., into the document.

document.write("Hello World!");

writeln() - It is similar to the write() method but writes each statement in the new line.

document.writeln("Hello World!");

Back to Top⤴️

Documents

The Document object represents the entire HTML document. It is the root node of the HTML document tree.

Finding HTML Elements -

Method	Description
document.getElementById(id)	Find an element by element id
document.getElementsByTagName(name)	Find elements by tag name
document.getElementsByClassName(name)	Find elements by class name

Changing HTML Elements -

Property	Description
element.innerHTML = new html content	Change the inner HTML of an element
element.attribute = new value	Change the attribute value of an HTML element
element.style.property = new style	Change the style of an HTML element

Method	Description
element.setAttribute(attribute, value)	Change the attribute value of an HTML element

Back to Top⤴️

Adding and Deleting Elements -

Method	Description
document.createElement(element)	Create an HTML element
document.removeChild(element)	Remove an HTML element
document.appendChild(element)	Add an HTML element
document.replaceChild(new, old)	Replace an HTML element
document.write(text)	Write into the HTML output stream

Adding Events Handlers -

Method	Description
document.getElementById(id).onclick = function(){code}	Adding event handler code to an onclick event

Finding HTML Objects -

Property	Description	DOM
document.anchors	Returns all elements that have a name attribute	1
document.applets	Deprecated	1
document.baseURI	Returns the absolute base URI of the document	3
document.body	Returns the element	1
document.cookie	Returns the document's cookie	1
document.doctype	Returns the document's doctype	3
document.documentElement	Returns the element	3
document.documentMode	Returns the mode used by the browser	3
document.documentURI	Returns the URI of the document	3
document.domain	Returns the domain name of the document server	1
document.domConfig	Obsolete.	3
document.embeds	Returns all elements	3
document.forms	Returns all elements	1
document.head	Returns the element	3
document.images	Returns all elements	1
document.implementation	Returns the DOM implementation	3
document.inputEncoding	Returns the document's encoding (character set)	3
document.lastModified	Returns the date and time the document was updated	3
document.links	Returns all and elements that have a href attribute	1
document.readyState	Returns the (loading) status of the document	3
document.referrer	Returns the URI of the referrer (the linking document)	1
document.scripts	Returns all elements	3
document.strictErrorChecking	Returns if error checking is enforced	3
document.title	Returns the element	1
document.URL	Returns the complete URL of the document	1

Back to Top⤴️

Elements -

Finding HTML elements by id

const element = document.getElementById("intro");

Finding HTML elements by tag name

const element = document.getElementsByTagName("p");

Finding HTML elements by class name

const x = document.getElementsByClassName("intro");

Finding HTML elements by CSS selectors

const x = document.querySelectorAll("p.intro");

Back to Top⤴️

Finding HTML elements by HTML object collections

const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
  text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

Changing HTML

document.getElementById("demo").innerHTML = "Hello World!";

Forms

document.getElementById("myForm").submit();

Changing CSS

document.getElementById("demo").style.fontSize = "35px";

Back to Top⤴️

Animations

document.getElementById("animate").style.animation = "mymove 4s infinite";

Events

document.getElementById("myBtn").addEventListener("click", displayDate);

Event Listener

document.getElementById("myBtn").addEventListener("click", function() {
  alert("Hello World!");
});

Back to Top⤴️

Navigation

document.getElementById("myAnchor").href = "https://www.w3schools.com";

Nodes

document.getElementById("demo").childNodes[0].nodeValue = "new text";

Collections

document.getElementsByTagName("p");

Node

document.getElementById("main").firstChild.nodeValue;

Lists

document.getElementById("myList").innerHTML = "Mango";

Back to Top⤴️

Browser BOM

Browser 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.

Window -

Window Object

window.document.getElementById("header");
//or
document.getElementById("header");

Window Size

window.innerHeight - the inner height of the browser window (in pixels)

window.innerWidth - the inner width of the browser window (in pixels)

window.open() - open a new window

window.close() - close the current window

window.moveTo() - move the current window

window.resizeTo() - resize the current window

window.innerWidth;

window.innerHeight;

Back to Top⤴️

Window Screen -

window.screen - object contains information about the user's screen.

screen.width

document.getElementById("demo").innerHTML =
"Screen Width: " + screen.width;

screen.height

document.getElementById("demo").innerHTML =
"Screen Height: " + screen.height;

screen.availWidth

document.getElementById("demo").innerHTML =
"Available Screen Width: " + screen.availWidth;

screen.availHeight

document.getElementById("demo").innerHTML =
"Available Screen Height: " + screen.availHeight;

screen.colorDepth

document.getElementById("demo").innerHTML =
"Screen Color Depth: " + screen.colorDepth;

screen.pixelDepth

document.getElementById("demo").innerHTML =
"Screen Pixel Depth: " + screen.pixelDepth;

Back to Top⤴️

Example

document.getElementById('demo1').innerHTML = 'Screen Width: ' + screen.width;
document.getElementById('demo2').innerHTML = 'Screen Height: ' + screen.height;
document.getElementById('demo3').innerHTML =
  'Available Screen Width: ' + screen.availWidth;
document.getElementById('demo4').innerHTML =
  'Available Screen Height: ' + screen.availHeight;
document.getElementById('demo5').innerHTML =
  'Screen Color Depth: ' + screen.colorDepth;
document.getElementById('demo6').innerHTML =
  'Screen Pixel Depth: ' + screen.pixelDepth;

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Window Screen</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <main>
      <p id="demo1"></p>
      <p id="demo2"></p>
      <p id="demo3"></p>
      <p id="demo4"></p>
      <p id="demo5"></p>
      <p id="demo6"></p>
    </main>
  </body>
</html>

Stackblitz Link

Back to Top⤴️

Window Location

window.location - object can be used to get the current page address (URL) and to redirect the browser to a new page.

window.location.href returns the href (URL) of the current page

document.getElementById("demo").innerHTML =
"Page location is " + window.location.href;

window.location.hostname returns the domain name of the web host

document.getElementById("demo").innerHTML =
"Page hostname is " + window.location.hostname;

window.location.pathname returns the path and filename of the current page

document.getElementById("demo").innerHTML =
"Page path is " + window.location.pathname;

window.location.protocol returns the web protocol used (http: or https:)

document.getElementById("demo").innerHTML =
"Page protocol is " + window.location.protocol;

window.location.assign() loads a new document

document.getElementById("demo").innerHTML =
"Port number is " + window.location.port;

Back to Top⤴️

Window Location Assign

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<input type="button" value="Load new document" onclick="newDoc()">

<script>
function newDoc() {
  window.location.assign("https://www.w3schools.com")
}
</script>

</body>
</html>

Example

document.getElementById('demo1').innerHTML =
  'Page location is ' + window.location.href;
document.getElementById('demo2').innerHTML =
  'Page hostname is ' + window.location.hostname;
document.getElementById('demo3').innerHTML =
  'Page path is ' + window.location.pathname;
document.getElementById('demo4').innerHTML =
  'Page protocol is ' + window.location.protocol;
document.getElementById('demo5').innerHTML =
  'Port number is ' + window.location.port;

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Window Location</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <nav>
      <h1>Window Location Example</h1>
    </nav>
    <main>
      <p id="demo1"></p>
      <p id="demo2"></p>
      <p id="demo3"></p>
      <p id="demo4"></p>
      <p id="demo5"></p>
    </main>
  </body>
</html>

Stackblitz Link

Back to Top⤴️

Window History - The window.history object contains the browser's history.

window.history - object can be written without the window prefix.

history.back() - same as clicking back in the browser

history.forward() - same as clicking forward in the browser

window.history.back()
window.history.forward()

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Window History</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <nav>
      <h1>Window History</h1>
    </nav>
    <main>
      <input type="button" value="Forward" onclick="goForward()" />
      <input type="button" value="Back" onclick="goBack()" />
    </main>
  </body>
</html>

Back to Top⤴️

Window Navigator - Window Navigator object contains information about the visitor's browser.

navigator.cookieEnabled

navigator.appCodeName

navigator.platform

Browser Cookies

document.getElementById("demo").innerHTML =
"cookiesEnabled is " + navigator.cookieEnabled;

Browser Application Name

document.getElementById("demo").innerHTML =
"navigator.appName is " + navigator.appName;

Browser Application Code Name

document.getElementById("demo").innerHTML =
"navigator.appCodeName is " + navigator.appCodeName;

Back to Top⤴️

Browser Engine

document.getElementById("demo").innerHTML =
"navigator.product is " + navigator.product;

Browser Version

document.getElementById("demo").innerHTML = navigator.appVersion;

Browser Agent

document.getElementById("demo").innerHTML = navigator.userAgent;

Browser Platform

document.getElementById("demo").innerHTML = navigator.platform;

Browser Language

document.getElementById("demo").innerHTML = navigator.language;

Is The Browser Online?

document.getElementById("demo").innerHTML = navigator.onLine;

Back to Top⤴️

Is Java Enabled?

document.getElementById("demo").innerHTML = navigator.javaEnabled();

document.getElementById('demo1').innerHTML =
  'navigator.cookieEnabled is ' + navigator.cookieEnabled;
document.getElementById('demo2').innerHTML =
  'navigator.appName is ' + navigator.appName;
document.getElementById('demo3').innerHTML =
  'navigator.appCodeName is ' + navigator.appCodeName;
document.getElementById('demo4').innerHTML =
  'navigator.product is ' + navigator.product;
document.getElementById('demo5').innerHTML =
  'navigator.appVersion is ' + navigator.appVersion;
document.getElementById('demo6').innerHTML =
  'navigator.userAgent is ' + navigator.userAgent;
document.getElementById('demo7').innerHTML =
  'navigator.platform is ' + navigator.platform;
document.getElementById('demo8').innerHTML =
  'navigator.language is ' + navigator.language;
document.getElementById('demo9').innerHTML =
  'navigator.onLine is ' + navigator.onLine;
document.getElementById('demo10').innerHTML =
  'navigator.javaEnabled is ' + navigator.javaEnabled();

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Window Navigator</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <nav>
      <h1>Window Navigator</h1>
    </nav>
    <main>
      <p id="demo1"></p>
      <p id="demo2"></p>
      <p id="demo3"></p>
      <p id="demo4"></p>
      <p id="demo5"></p>
      <p id="demo6"></p>
      <p id="demo7"></p>
      <p id="demo8"></p>
      <p id="demo9"></p>
      <p id="demo10"></p>
    </main>
  </body>
</html>

Stackblitz Link

Back to Top⤴️

Popup Boxes -

Alert Box

window.alert("sometext");

function myFunction() {
  alert('I am an alert box!');
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Alert Box</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <nav>
      <h2>Alert Box</h2>
    </nav>
    <main>
      <button onclick="myFunction()">Try it</button>
    </main>
  </body>
</html>

Replit Link

Back to Top⤴️

Confirm Box

window.confirm("sometext");

function myFunction() {
  var txt;
  if (confirm("Press a button!")) {
    txt = "You pressed OK!";
  } else {
    txt = "You pressed Cancel!";
  }
  document.getElementById("demo").innerHTML = txt;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Confirm Box</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <nav>
      <h1>Confirm Box</h1>
    </nav>
    <main>
      <button onclick="myFunction()">Try it</button>
      <p id="demo"></p>
    </main>
  </body>
</html>

Replit Link

Back to Top⤴️

Prompt Box

window.prompt("sometext","defaultText");

function myFunction() {
  let text;
  let person = prompt('Please enter your name:', 'Harry Potter');
  if (person == null || person == '') {
    text = 'User cancelled the prompt.';
  } else {
    text = 'Hello ' + person + '! How are you today?';
  }
  document.getElementById('demo').innerHTML = text;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <nav>
      <h1>Prompt Box</h1>
    </nav>
    <main>
      <button onclick="myFunction()">Try it</button>

      <p id="demo"></p>
    </main>
  </body>
</html>

Replit Link

Back to Top⤴️

Line Breaks

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <nav>
      <h1>Line Breaks</h1>
    </nav>
    <main>
      <button onclick="alert('Hello\nHow are you?')">Try it</button>
    </main>
  </body>
</html>

Replit Link

Back to Top⤴️

Timing Events -

setTimeout(function, milliseconds) - Executes a function, after waiting a specified number of milliseconds.

Syntax : window.setTimeout(function, milliseconds);

setTimeout(() => {
  console.log("Hello World!");
}, 5000);

setInterval(function, milliseconds) - Same as setTimeout(), but repeats the execution of the function continuously.

Syntax : window.setInterval(function, milliseconds);

setInterval(() => {
  console.log("Hello World!");
}, 5000);

Back to Top⤴️

Cookies - Cookies are data, stored in small text files, on your computer.

Create a Cookie with JavaScript

document.cookie = "username=Manthan Ank";

//with an expiry date(in UTC Time)
document.cookie = "username=Manthan Ank; expires=Sat, 28 Jan 2023 12:00:00 UTC";

//with path parameter
document.cookie = "username=Manthan Ank; expires=Sat, 28 Jan 2023 12:00:00 UTC; path=/";

Read a Cookie with JavaScript

let x = document.cookie;
console.log(x);

Change a Cookie with JavaScript

document.cookie = "username=Manthan Ankolekar; expires=Sat, 28 Jan 2023 12:00:00 UTC; path=/";

Delete a Cookie with JavaScript

document.cookie = "username=; expires=Sat, 28 Jan 2023 12:00:00 UTC; path=/;";

Back to Top⤴️

Web API

Web API is an application programming interface for the Web. It defines the structure of web services and allows different software applications to communicate with each other over the web.

API - Application Programming Interface.

Forms API -

Constraint Validation DOM Methods -

checkValidity() - Returns true if an input element contains valid data.

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  }
}

setCustomValidity() - Sets the validationMessage property of an input element.

document.getElementById("id1").setCustomValidity("Input not valid");

Back to Top⤴️

Constraint Validation DOM Properties -

validity - Contains boolean properties related to the validity of an input element.

document.getElementById("id1").validity.rangeOverflow;

validationMessage - Contains the message a browser will display when the validity is false.

document.getElementById("id1").validationMessage;

willValidate - Indicates if an input element will be validated.

document.getElementById("id1").willValidate;

Back to Top⤴️

Validity Properties -

customError - Set to true, if a custom validity message is set.

document.getElementById("id1").validity.customError;

patternMismatch - Set to true, if an element's value does not match its pattern attribute.

document.getElementById("id1").validity.patternMismatch;

rangeOverflow - Set to true, if an element's value is greater than its max attribute.

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

function myFunction() {
  let text = "Value OK";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Value too large";
  }
}

Back to Top⤴️

rangeUnderflow - Set to true, if an element's value is less than its min attribute.

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

function myFunction() {
  let text = "Value OK";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Value too small";
  }
}

stepMismatch - Set to true, if an element's value is invalid per its step attribute.

document.getElementById("id1").validity.stepMismatch;

tooLong - Set to true, if an element's value exceeds its maxLength attribute.

document.getElementById("id1").validity.tooLong;

Back to Top⤴️

typeMismatch - Set to true, if an element's value is invalid per its type attribute.

document.getElementById("id1").validity.typeMismatch;

valueMissing - Set to true, if an element (with a required attribute) has no value.

document.getElementById("id1").validity.valueMissing;

valid - Set to true, if an element's value is valid.

document.getElementById("id1").validity.valid;

Back to Top⤴️

History API -

Web History API provides easy methods to access the windows.history object.

History back() Method

function myFunction() {
  window.history.back();
}

History go() Method

function myFunction() {
  window.history.go(-2);
}

Back to Top⤴️

History Object Properties -

length - Returns the number of URLs in the history list

history.length

History Object Methods -

back() - Loads the previous URL in the history list

history.back()

forward() - Loads the next URL in the history list

history.forward()

go() - Loads a specific URL from the history list

history.go()

Back to Top⤴️

Storage API -

Web Storage API is a simple syntax for storing and retrieving data in the browser.

The localStorage Object -

The localStorage object provides access to a local storage for a particular Web Site. It allows you to store, read, add, modify, and delete data items for that domain.

setItem() Method

localStorage.setItem("name", "Manthan Ankolekar");

getItem() Method

localStorage.getItem("name", "Manthan Ankolekar");

Back to Top⤴️

sessionStorage Object -

The sessionStorage object is identical to the localStorage object. The difference is that the sessionStorage object stores data for one session.

getItem() Method

sessionStorage.getItem("name");

setItem() Method

sessionStorage.setItem("name", "Manthan Ankolekar");

Storage Object Properties and Methods

key(n) - Returns the name of the nth key in the storage

localStorage.key(index)
sessionStorage.key(index)

length - Returns the number of data items stored in the Storage object

localStorage.length;
sessionStorage.length;

Back to Top⤴️

getItem(keyname) - Returns the value of the specified key name

localStorage.getItem(keyname)
sessionStorage.getItem(keyname)

setItem(keyname, value) - Adds a key to the storage, or updates a key value (if it already exists)

localStorage.setItem(keyname, value)
sessionStorage.setItem(keyname, value)

removeItem(keyname)- Removes that key from the storage

localStorage.removeItem(keyname)
sessionStorage.removeItem(keyname)

clear() - Empty all key out of the storage

localStorage.clear()
sessionStorage.clear()

Back to Top⤴️

Related Pages for Web Storage API

window.localStorage - Allows to save key/value pairs in a web browser. Stores the data with no expiration date

window.localStorage

localStorage

window.sessionStorage - Allows to save key/value pairs in a web browser. Stores the data for one session

window.sessionStorage

sessionStorage

Back to Top⤴️

Worker API -

A web worker is a JavaScript running in the background, without affecting the performance of the page.

Fetch API -

The Fetch API interface allows web browser to make HTTP requests to web servers.

fetch(file)
.then(x => x.text())
.then(y => myDisplay(y));

GeoLocation API -

The HTML Geolocation API is used to get the geographical position of a user.

const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}

Back to Top⤴️

AJAX

AJAX (Asynchronous JavaScript and XML) is a technique used in web development to create asynchronous web applications. It allows you to update parts of a web page without reloading the entire page. Originally, XML (eXtensible Markup Language) was commonly used for data exchange, but modern AJAX implementations often use JSON (JavaScript Object Notation) for data interchange due to its lighter syntax.

XMLHttp - The XMLHttpRequest object is used to interact with servers asynchronously. Here's an example of creating an XMLHttpRequest object

let xhttp = new XMLHttpRequest();

Request - To make a request to a server, you'll typically use methods like open() and send()

xhttp.open('GET', 'https://api.example.com/data', true); // Method, URL, async (true or false)
xhttp.send(); // Send the request

You can also send data along with the request by passing parameters within the send() method.

Back to Top⤴️

Response - Handling the response from the server can be done using event listeners like onreadystatechange and checking for the readyState and status of the request

xhttp.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    // Handle successful response
    console.log(this.responseText); // Response data
  } else {
    // Handle errors
    console.error('There was a problem with the request.');
  }
};

XML File - If you are working with an XML file, you can parse the response using methods like responseXML to access the XML data

xhttp.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    let xmlDoc = this.responseXML;
    // Process xmlDoc for XML data
    console.log(xmlDoc);
  }
};

Back to Top⤴️

JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. JSON is a text format that is completely language-independent but uses conventions that are familiar to programmers of the C family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others.

JSON Methods

There are two methods in JSON

JSON.parse()
JSON.stringify()

parse() - Parses a JSON string and returns a JavaScript object

stringify() - Convert a JavaScript object to a JSON string

Data Types

a string
a number
an object (containing valid JSON values)
an array
a boolean
null

Back to Top⤴️

String:

const str = "Hello, World!";

Number:

const num = 42;

Object:

const obj = {
  name: "John",
  age: 30,
  city: "New York"
};

Array:

const arr = [1, 2, 3, 4, 5];

Boolean:

const bool = true;

Null:

const nullValue = null;

Back to Top⤴️

Parse - The parse() method is used to parse a JSON string and convert it into a JavaScript object.

const jsonString = '{"name": "John", "age": 30}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject); // Output: { name: 'John', age: 30 }

Stringify - The stringify() method is used to convert a JavaScript object into a JSON string.

const jsonObject = { name: 'John', age: 30 };
const jsonString = JSON.stringify(jsonObject);
console.log(jsonString); // Output: '{"name":"John","age":30}'

Objects - Objects in JSON are key-value pairs enclosed in curly braces {}.

const person = {
  "name": "Alice",
  "age": 30,
  "address": {
    "city": "New York",
    "zipcode": "10001"
  }
};

Back to Top⤴️

Arrays - Arrays in JSON are ordered lists of values enclosed in square brackets [].

const colors = ["Red", "Green", "Blue"];

JQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers.

Selectors

$("p")
$(".test")
$("#test")

Back to Top⤴️

Graphics

Canvas - The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);

Plotly - Plotly is a charting library for JavaScript. It is used to create interactive charts in web applications.

const data = [
  {
    x: [1, 2, 3, 4, 5],
    y: [1, 2, 4, 8, 16],
    type: 'scatter'
  }
];
Plotly.newPlot('myDiv', data);

Back to Top⤴️

Chart.js - Chart.js is a simple yet flexible JavaScript charting library for designers & developers.

const ctx = document.getElementById('myChart').getContext('2d');

Google Chart - Google Charts provides a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart gallery provides a large number of ready-to-use chart types.

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);

Back to Top⤴️

D3.js - D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers.

const svg = d3.select("body").append("svg")
  .attr("width", 960)
  .attr("height", 500);

svg.append("circle")
  .attr("cx", 480)
  .attr("cy", 250)
  .attr("r", 240)
  .style("fill", "purple");

svg.append("text")
  .attr("x", 480)
  .attr("y", 250)
  .attr("text-anchor", "middle")
  .attr("dy", ".3em")
  .text("Hello, D3.js!");

Back to Top⤴️

Best Practices

Avoid Global Variables - Avoid using global variables in JavaScript.

// Bad
var name = "Alice";

// Good
const name = "Alice";

Avoid Declare Local Variables - Avoid declaring local variables without using the var, let, or const keyword.

// Bad
name = "Alice";

// Good
const name = "Alice";

Declarations on Top - Declare all variables at the beginning of every script or function.

// Bad
function myFunction() {
  console.log("Hello, World!");
  var name = "Alice";
}

// Good
function myFunction() {
  var name = "Alice";
  console.log("Hello, World!");
}

Back to Top⤴️

Intialize Variables - Always initialize variables when you declare them.

// Bad
let name;

// Good
let name = "Alice";

Declare Objects with const - Use const to declare objects.

// Bad
let person = {
  name: "Alice",
  age: 30
};

// Good
const person = {
  name: "Alice",
  age: 30
};

Declare Arrays with const - Use const to declare arrays.

// Bad
let colors = ["Red", "Green", "Blue"];

// Good
const colors = ["Red", "Green", "Blue"];

Back to Top⤴️

Don't Use new Objects - Avoid using the new keyword to create objects.

// Bad
let person = new Object();

// Good
let person = {};

Beware of Automatic Type Conversions - Be aware of automatic type conversions in JavaScript.

console.log(10 + "20"); // Output: "1020"

Use === Comparison - Use the === operator to compare values and data types.

console.log(10 === "10"); // Output: false

Back to Top⤴️

Use Parameter Defaults - Use parameter defaults to assign default values to function parameters.

function greet(name = "Alice") {
  console.log("Hello, " + name + "!");
}

greet(); // Output: "Hello, Alice!"

End Your Switches with Defaults - Always end your switch statements with a default case.

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
    break;
  default:
    day = "Unknown";
}

console.log(day);

Back to Top⤴️

Avoid Number, String, and Boolean as Objects - Avoid using Number, String, or Boolean objects.

// Bad
let x = new Number(500);

// Good
let x = 500;

Avoid Using eval() - Avoid using the eval() function in JavaScript.

// Bad
let x = eval("10 * 20");

// Good
let x = 10 * 20;

Back to Top⤴️

Common Mistakes

Accidentally Using the Assignment Operator - Be careful when using the assignment operator = instead of the equality operator == or ===.

let x = 10;

if (x = 10) {
  console.log("Hello, World!");
}

// Output: "Hello, World!"

Expecting Loose Comparison - Be aware of the differences between loose and strict comparison in JavaScript.

console.log(10 == "10"); // Output: true

Confusing Addition & Concatenation - Be careful when adding numbers and strings in JavaScript.

console.log(10 + 20); // Output: 30

Misundering Floats - Be aware of floating-point arithmetic in JavaScript.

console.log(0.1 + 0.2); // Output: 0.30000000000000004

Back to Top⤴️

Breaking a JavaScript String - Be careful when breaking a string into multiple lines.

let text = "Hello \ World!";

console.log(text); // Output: "Hello  World!"

Misplacing semicolon - Be careful when misplacing semicolons in JavaScript.

let x = 10
let y = 20

console.log(x + y); // Output: 30

Breaking a Return Statement - Be careful when breaking a return statement into multiple lines.

function myFunction() {
  return
  "Hello, World!";
}

console.log(myFunction()); // Output: undefined

Back to Top⤴️

Accessing Arrays with Named Indexes - Be careful when accessing arrays with named indexes.

let person = [];
person["name"] = "Alice";
person["age"] = 30;

console.log(person); // Output: []

Ending Definition with a Comma - Be careful when ending object definitions with a comma.

let person = {
  name: "Alice",
  age: 30,
};

console.log(person); // Output: { name: 'Alice', age: 30 }

Undefined is Not Null - Be aware of the difference between undefined and null in JavaScript.

let x;

console.log(x); // Output: undefined

Back to Top⤴️

Performance

Reduce Activity in Loops - Avoid unnecessary activity inside loops.

// Bad
for (let i = 0; i < 1000; i++) {
  console.log("Hello, World!");
}

// Good
for (let i = 0; i < 1000; i++) {
  // Do nothing
}

Reduce DOM Access - Minimize DOM access in JavaScript.

// Bad
document.getElementById("demo").innerHTML = "Hello, World!";

// Good
let element = document.getElementById("demo");
element.innerHTML = "Hello, World!";

Back to Top⤴️

Reduce DOM Size - Minimize the size of the DOM.

// Bad
for (let i = 0; i < 1000; i++) {
  document.body.innerHTML += "Hello, World!";
}

// Good
let text = "";
for (let i = 0; i < 1000; i++) {
  text += "Hello, World!";
}

Avoid Unnecessary Variables - Avoid unnecessary variables in JavaScript.

// Bad
let x = 10;
let y = 20;
let z = x + y;

// Good
let z = 10 + 20;

Back to Top⤴️

Delay Javascript Loading - Load JavaScript files at the end of the body tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Delay JavaScript Loading</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <script src="script.js"></script>
</body>
</html>

Avoid Using with - Avoid using the with statement in JavaScript.

// Bad
with (document) {
  let text = "Hello, World!";
  console.log(text);
}

// Good
let text = "Hello, World!";
console.log(text);

Back to Top⤴️

ES6 Features

The let keyword - The let keyword allows you to declare block-scoped variables.

let x = 10;

if (x === 10) {
  let y = 20;
  console.log(x + y); // Output: 30
}

console.log(x + y); // Error: y is not defined

The const keyword - The const keyword allows you to declare constants in JavaScript.

const PI = 3.14159;
PI = 3.14; // Error: Assignment to constant variable

console.log(PI); // Output: 3.14159

Back to Top⤴️

Arrow Functions - Arrow functions provide a more concise syntax for writing function expressions.

const add = (x, y) => x + y;

console.log(add(10, 20)); // Output: 30

The ... Operator - The ... operator allows you to spread elements of an array or object.

const arr1 = [1, 2, 3];

const arr2 = [...arr1, 4, 5, 6];

console.log(arr2); // Output: [1, 2, 3, 4, 5, 6]

Back to Top⤴️

For/of Loop - The for...of loop allows you to iterate over the values of an iterable object.

const colors = ["Red", "Green", "Blue"];

for (const color of colors) {
  console.log(color);
}

// Output: Red, Green, Blue

Map Objects - The Map object allows you to store key-value pairs.

const map = new Map();

map.set("name", "Alice");

console.log(map.get("name")); // Output: Alice

Back to Top⤴️

Set Objects - The Set object allows you to store unique values of any type.

const set = new Set();

set.add(1);

console.log(set.has(1)); // Output: true

Classes - Classes provide a more concise syntax for creating objects and dealing with inheritance.

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person = new Person("Alice", 30);

person.greet(); // Output: Hello, my name is Alice and I am 30 years old.

Back to Top⤴️

Promises - Promises provide a more flexible way to handle asynchronous operations in JavaScript.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hello, World!");
  }, 2000);
});

promise.then((value) => {
  console.log(value); // Output: Hello, World!
});

Symbol - The Symbol object allows you to create unique values that can be used as object properties.

const key = Symbol("key");

const obj = {};

obj[key] = "value";

console.log(obj[key]); // Output: value

Back to Top⤴️

Default Parameters - Default parameters allow you to specify default values for function parameters.

function greet(name = "Alice") {
  console.log(`Hello, ${name}!`);
}

greet(); // Output: Hello, Alice!

Function Rest Parameter - The rest parameter allows you to pass an indefinite number of arguments to a function.

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

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

String.includes() - The includes() method allows you to check if a string contains a specific substring.

const str = "Hello, World!";

console.log(str.includes("World")); // Output: true

Back to Top⤴️

String.startsWith() - The startsWith() method allows you to check if a string starts with a specific substring.

const str = "Hello, World!";

console.log(str.startsWith("Hello")); // Output: true

String.endsWith() - The endsWith() method allows you to check if a string ends with a specific substring.

const str = "Hello, World!";
console.log(str.endsWith("World!")); // Output: true

Array.from() - The from() method allows you to create an array from an array-like or iterable object.

const arr = Array.from("Hello");

console.log(arr); // Output: ["H", "e", "l", "l", "o"]

Back to Top⤴️

Array keys() - The keys() method returns an array iterator that contains the keys for each index in the array.

const arr = ["a", "b", "c"];

const iterator = arr.keys();

for (const key of iterator) {
  console.log(key); // Output: 0, 1, 2
}

Array find() - The find() method returns the first element in an array that satisfies a provided condition.

const arr = [1, 2, 3, 4, 5];

const result = arr.find((x) => x > 3);

console.log(result); // Output: 4

Array findIndex() - The findIndex() method returns the index of the first element in an array that satisfies a provided condition.

const arr = [1, 2, 3, 4, 5];

const index = arr.findIndex((x) => x > 3);

console.log(index); // Output: 3

Back to Top⤴️

New Math Methods - The Math object in JavaScript provides several new methods in ES6.

console.log(Math.cbrt(27)); // Output: 3

New Number Properties - The Number object in JavaScript provides several new properties in ES6.

console.log(Number.EPSILON); // Output: 2.220446049250313e-16

New Number Methods - The Number object in JavaScript provides several new methods in ES6.

console.log(Number.isInteger(10)); // Output: true

New Global Methods - The global object in JavaScript provides several new methods in ES6.

console.log(isFinite(10)); // Output: true

Back to Top⤴️

Object entries - The Object.entries() method returns an array of a given object's own enumerable property [key, value] pairs.

const obj = { name: "Alice", age: 30 };

const entries = Object.entries(obj);

console.log(entries); // Output: [["name", "Alice"], ["age", 30]]

JavaScript Modules - JavaScript modules allow you to split your code into multiple files and import/export functionality between them.

// math.js
export const add = (x, y) => x + y;

// main.js
import { add } from "./math.js";

console.log(add(10, 20)); // Output: 30

Back to Top⤴️

ES5 Features

"use strict" - The "use strict" directive is used to enable strict mode in JavaScript.

"use strict";

String[number] access - You can access characters in a string using array-like syntax.

const str = "Hello, World!";

console.log(str[0]); // Output: H

Multiline strings - You can create multiline strings in JavaScript using backticks.

const str = `Hello, 
World!`;

console.log(str); // Output: Hello,
                  //         World!

Back to Top⤴️

String.trim() - The trim() method removes whitespace from both ends of a string.

const str = "  Hello, World!  ";

console.log(str.trim()); // Output: "Hello, World!"

Array.isArray() - The isArray() method checks if a value is an array.

const arr = [1, 2, 3];

console.log(Array.isArray(arr)); // Output: true

Array forEach() - The forEach() method executes a provided function once for each array element.

const arr = [1, 2, 3];

arr.forEach((x) => console.log(x));

// Output: 1, 2, 3

Back to Top⤴️

Array map() - The map() method creates a new array with the results of calling a provided function on every element in the array.

const arr = [1, 2, 3];

const result = arr.map((x) => x * 2);

console.log(result); // Output: [2, 4, 6]

Array filter() - The filter() method creates a new array with all elements that pass the test implemented by the provided function.

const arr = [1, 2, 3, 4, 5];

const result = arr.filter((x) => x % 2 === 0);

console.log(result); // Output: [2, 4]

Array reduce() - The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

const arr = [1, 2, 3, 4, 5];

const result = arr.reduce((acc, val) => acc + val, 0);

console.log(result); // Output: 15

Back to Top⤴️

Array reduceRight() - The reduceRight() method applies a function against an accumulator and each value of the array (from right-to-left) to reduce it to a single value.

const arr = [1, 2, 3, 4, 5];

const result = arr.reduceRight((acc, val) => acc + val, 0);

console.log(result); // Output: 15

Array every() - The every() method tests whether all elements in the array pass the test implemented by the provided function.

const arr = [1, 2, 3, 4, 5];

const result = arr.every((x) => x > 0);

console.log(result); // Output: true

Array some() - The some() method tests whether at least one element in the array passes the test implemented by the provided function.

const arr = [1, 2, 3, 4, 5];

const result = arr.some((x) => x > 3);

console.log(result); // Output: true

Back to Top⤴️

Array indexOf() - The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

const arr = [1, 2, 3, 4, 5];

const index = arr.indexOf(3);

console.log(index); // Output: 2

Array lastIndexOf() - The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present.

const arr = [1, 2, 3, 4, 5, 3];

const index = arr.lastIndexOf(3);

console.log(index); // Output: 5

JSON.parse() - The parse() method parses a JSON string and returns a JavaScript object.

const jsonString = '{"name": "Alice", "age": 30}';

const jsonObject = JSON.parse(jsonString);

console.log(jsonObject); // Output: { name: 'Alice', age: 30 }

Back to Top⤴️

JSON.stringify() - The stringify() method converts a JavaScript object to a JSON string.

const jsonObject = { name: 'Alice', age: 30 };

const jsonString = JSON.stringify(jsonObject);

console.log(jsonString); // Output: '{"name":"Alice","age":30}'

Date.now() - The now() method returns the number of milliseconds elapsed since January 1, 1970.

const timestamp = Date.now();

console.log(timestamp); // Output: 1633660800000

Date toISOString() - The toISOString() method returns a string in simplified extended ISO format.

const date = new Date();

console.log(date.toISOString()); // Output: "2021-10-08T07:00:00.000Z"

Date toJSON() - The toJSON() method returns a string representation of the Date object.

const date = new Date();

console.log(date.toJSON()); // Output: "2021-10-08T07:00:00.000Z"

Back to Top⤴️

Property getters and setters - Getters and setters allow you to define object properties that behave like methods.

const person = {
  firstName: "Alice",
  lastName: "Smith",
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  set fullName(value) {
    const parts = value.split(" ");
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
};

console.log(person.fullName); // Output: "Alice Smith"

Reserved words as property names - You can use reserved words as property names in JavaScript.

const person = {
  class: "A",
  function: "greet"
};

console.log(person.class); // Output: "A"

Object Methods - The Object object provides several methods for working with objects in JavaScript.

const obj = { name: "Alice", age: 30 };

const keys = Object.keys(obj);

console.log(keys); // Output: ["name", "age"]

Back to Top⤴️

Object defineProperty() - The defineProperty() method defines a new property directly on an object, or modifies an existing property.

const obj = {};

Object.defineProperty(obj, "name", {
  value: "Alice",
  writable: true,
  enumerable: true,
  configurable: true
});

console.log(obj.name); // Output: "Alice"

Function bind() - The bind() method creates a new function that, when called, has its this keyword set to the provided value.

const person = {
  name: "Alice",
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

const greet = person.greet.bind(person);

greet(); // Output: "Hello, my name is Alice."

Trailing commas - Trailing commas are allowed in JavaScript.

const arr = [
  1,
  2,
  3,
];

console.log(arr); // Output: [1, 2, 3]

Back to Top⤴️

Snippets

Here are a few JavaScript snippets that you might find useful:

Hello World:
```
console.log("Hello, World!");
```
Variable Declaration:
```
let variableName = "Some value";
```

Conditional Statement (if-else):

let condition = true;

if (condition) {
    console.log("Condition is true");
} else {
    console.log("Condition is false");
}

Loop (for):

for (let i = 0; i < 5; i++) {
    console.log(i);
}

Function Declaration:

function greet(name) {
    console.log("Hello, " + name + "!");
}

greet("John");

Array Manipulation:

let fruits = ['Apple', 'Banana', 'Orange'];

// Add an element to the end
fruits.push('Mango');

// Remove the last element
fruits.pop();

// Access elements by index
console.log(fruits[1]);

Object Declaration:

let person = {
    name: 'John',
    age: 25,
    profession: 'Developer'
};

// Accessing object properties
console.log(person.name);

Async/Await:

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

fetchData();

Event Handling:

let button = document.getElementById('myButton');

button.addEventListener('click', function() {
    console.log('Button clicked!');
});

LocalStorage:

// Save data to local storage
localStorage.setItem('username', 'JohnDoe');

// Retrieve data from local storage
let storedUsername = localStorage.getItem('username');
console.log('Username:', storedUsername);

Error Handling:

try {
    // Code that may throw an error
    throw new Error('Something went wrong');
} catch (error) {
    console.error('Error:', error.message);
}

Regular Expression:

let pattern = /hello/i; // Case-insensitive match for 'hello'

let text = 'Hello, World!';
let result = pattern.test(text);

console.log(result); // Output: true

Math Operations:

let x = 10;

console.log(Math.sqrt(x)); // Square root

console.log(Math.pow(x, 2)); // x raised to the power of 2

console.log(Math.random()); // Random number between 0 and 1

Date and Time:

let date = new Date();

console.log(date.toDateString()); // Date in human-readable format

console.log(date.getHours()); // Current hour

Set Timeout:

setTimeout(function() {
    console.log('Timeout completed');
}, 2000); // 2 seconds

Set Interval:

let counter = 0;

let interval = setInterval(function() {
    console.log('Counter:', counter);
    counter++;

    if (counter === 5) {
        clearInterval(interval);
    }
}, 1000); // Every 1 second

Fetch API:

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error fetching data:', error));

Arrow Functions:

let add = (x, y) => x + y;

console.log(add(5, 3)); // Output: 8

Template Literals:

let name = 'Alice';
let greeting = `Hello, ${name}!`;

console.log(greeting); // Output: Hello, Alice!

Destructuring Assignment:

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

let { name, age } = person;

console.log(name, age); // Output: John 30

Spread Operator:

let numbers = [1, 2, 3];
let newNumbers = [...numbers, 4, 5];

console.log(newNumbers); // Output: [1, 2, 3, 4, 5]

Promise:

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Promise resolved');
    }, 2000);
});

promise.then(result => console.log(result));

Map Function:

let numbers = [1, 2, 3, 4, 5];

let squaredNumbers = numbers.map(num => num * num);

console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]

Filter Function:

let numbers = [1, 2, 3, 4, 5];

let evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // Output: [2, 4]

Reduce Function:

let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(sum); // Output: 15

Find Function:

let numbers = [1, 2, 3, 4, 5];

let foundNumber = numbers.find(num => num > 3);

console.log(foundNumber); // Output: 4

Back to Top⤴️

Short Hands

JavaScript offers several shorthand techniques to write code more concisely and improve readability. Here are some common JavaScript shorthand techniques:

Ternary Operator:

Instead of using an if-else statement, you can use the ternary operator for concise conditional expressions.

// Long form
let result;
if (condition) {
    result = 'true';
} else {
    result = 'false';
}

// Shorthand
let result = condition ? 'true' : 'false';

Nullish Coalescing Operator (??):

This operator provides a concise way to provide a default value if a variable is null or undefined.

// Long form
let value;
if (value !== null && value !== undefined) {
    result = value;
} else {
    result = 'default';
}

// Shorthand
let result = value ?? 'default';

Arrow Functions:

Arrow functions provide a concise syntax for writing function expressions.

// Long form
function add(x, y) {
    return x + y;
}

// Shorthand
const add = (x, y) => x + y;

Template Literals:

Template literals make it easier to concatenate strings and include variables within strings.

// Long form
const greeting = 'Hello, ' + name + '!';

// Shorthand
const greeting = `Hello, ${name}!`;

Object Property Shorthand:

When creating an object with properties that have the same name as the variables being assigned, you can use shorthand notation.

// Long form
const name = 'John';
const age = 30;
const user = {
    name: name,
    age: age
};

// Shorthand
const user = {
    name,
    age
};

Destructuring Assignment:

Destructuring allows you to extract values from arrays or objects and assign them to variables in a concise way.

// Long form
const person = { name: 'John', age: 30 };
const name = person.name;
const age = person.age;

// Shorthand
const { name, age } = { name: 'John', age: 30 };

Default Parameters:

Default parameters allow you to specify default values for function parameters.

// Long form
function greet(name) {
    if (name === undefined) {
        name = 'World';
    }
    console.log('Hello, ' + name + '!');
}

// Shorthand
function greet(name = 'World') {
    console.log('Hello, ' + name + '!');
}

Array and Object Spread:

The spread operator (...) allows you to spread the elements of an array or object into another array or object.

// Long form
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];

// Shorthand
const newNumbers = [...numbers, 4, 5];

// Long form
const person = { name: 'John', age: 30 };

const updatedPerson = {
    name: person.name,
    age: person.age,
    profession: 'Developer
};

// Shorthand
const updatedPerson = { ...person, profession: 'Developer };

Array Destructuring:

Array destructuring allows you to extract values from arrays and assign them to variables in a concise way.

// Long form
const numbers = [1, 2, 3];
const first = numbers[0];
const second = numbers[1];

// Shorthand
const [first, second] = [1, 2, 3];

Object Destructuring:

Object destructuring allows you to extract values from objects and assign them to variables in a concise way.

// Long form
const person = { name: 'John', age: 30 };
const name = person.name;
const age = person.age;

// Shorthand
const { name, age } = { name: 'John', age: 30 };

Short-Circuit Evaluation:

Short-circuit evaluation allows you to write concise conditional expressions using logical operators.

// Long form
let result;
if (condition) {
    result = value;
} else {
    result = 'default';
}

// Shorthand
let result = condition && value || 'default';

// Long form
let result;
if (condition) {
    result = 'true';
} else {
    result = 'false';
}

// Shorthand
let result = condition ? 'true' : 'false';

// Long form
let result;

if (value !== null && value !== undefined) {
    result = value;
} else {
    result = 'default';
}

// Shorthand
let result = value ?? 'default';

Logical Assignment Operators:

Logical assignment operators provide a concise way to update a variable based on a condition.

// Long form
let count = 0;
if (count === 0) {
    count = 1;
}

// Shorthand
let count = 0;
count ||= 1;

// Long form
let count = 0;
if (count === 0) {
    count += 1;
}

// Shorthand
let count = 0;
count += 1;

Optional Chaining:

Optional chaining allows you to access nested properties of an object without having to check for the existence of each property.

// Long form
let result;
if (data && data.user && data.user.name) {
    result = data.user.name;
} else {
    result = 'Unknown';
}

// Shorthand
let result = data?.user?.name ?? 'Unknown';

Promise Chaining:

Promise chaining allows you to chain multiple asynchronous operations in a concise way.

// Long form
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        console.log(data);
        return fetch('https://api.example.com/other-data');
    })
    .then(response => response.json())
    .then(otherData => console.log(otherData))
    .catch(error => console.error('Error:', error));

// Shorthand
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .then(() => fetch('https://api.example.com/other-data'))
    .then(response => response.json())
    .then(otherData => console.log(otherData))
    .catch(error => console.error('Error:', error));

Async/Await:

Async/await provides a more concise way to work with asynchronous code compared to promises.

// Long form
function fetchData() {
    return fetch('https://api.example.com/data')
        .then(response => response.json());
}

fetchData()
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

// Shorthand
async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

fetchData();

Array Methods:

JavaScript array methods provide a concise way to perform common operations on arrays.

// Long form
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);

// Shorthand
const squaredNumbers = [1, 2, 3, 4, 5].map(num => num * num);

// Long form
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);

// Shorthand
const evenNumbers = [1, 2, 3, 4, 5].filter(num => num % 2 === 0);

// Long form
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);

// Shorthand
const sum = [1, 2, 3, 4, 5].reduce((acc, num) => acc + num, 0);

// Long form
const numbers = [1, 2, 3, 4, 5];
const foundNumber = numbers.find(num => num > 3);

// Shorthand
const foundNumber = [1, 2, 3, 4, 5].find(num => num > 3);

Object Methods:

JavaScript object methods provide a concise way to perform common operations on objects.

// Long form
const person = { name: 'John', age: 30 };
const keys = Object.keys(person);

// Shorthand
const keys = Object.keys({ name: 'John', age: 30 });

// Long form
const person = { name: 'John', age: 30 };
const values = Object.values(person);

// Shorthand
const values = Object.values({ name: 'John', age: 30 });

// Long form
const person = { name: 'John', age: 30 };
const entries = Object.entries(person);

// Shorthand
const entries = Object.entries({ name: 'John', age: 30 });

// Long form
const person = { name: 'John', age: 30 };
const copy = Object.assign({}, person);

// Shorthand
const copy = { ...{ name: 'John', age: 30 } };

Function Methods:

JavaScript function methods provide a concise way to work with functions.

// Long form
function greet(name) {
    console.log('Hello, ' + name + '!');
}

// Shorthand
const greet = name => console.log('Hello, ' + name + '!');

// Long form
function add(x, y) {
    return x + y;
}

// Shorthand
const add = (x, y) => x + y;

// Long form
function multiply(x, y) {
    return x * y;
}

// Shorthand
const multiply = (x, y) => x * y;

// Long form
function divide(x, y) {
    return x / y;
}

// Shorthand
const divide = (x, y) => x / y;

String Methods:

JavaScript string methods provide a concise way to work with strings.

// Long form
const text = 'Hello, World!';
const trimmedText = text.trim();

// Shorthand
const trimmedText = '  Hello, World!  '.trim();

// Long form
const text = 'Hello, World!';
const uppercaseText = text.toUpperCase();

// Shorthand
const uppercaseText = 'Hello, World!'.toUpperCase();

// Long form
const text = 'Hello, World!';
const lowercaseText = text.toLowerCase();

// Shorthand
const lowercaseText = 'Hello, World!'.toLowerCase();

// Long form
const text = 'Hello, World!';
const length = text.length;

// Shorthand
const length = 'Hello, World!'.length;

Number Methods:

JavaScript number methods provide a concise way to work with numbers.

// Long form
const number = 3.14159;
const roundedNumber = Math.round(number);

// Shorthand
const roundedNumber = Math.round(3.14159);

// Long form
const number = 3.14159;
const squaredNumber = Math.pow(number, 2);

// Shorthand
const squaredNumber = Math.pow(3.14159, 2);

// Long form
const number = 3.14159;
const squareRoot = Math.sqrt(number);

// Shorthand
const squareRoot = Math.sqrt(3.14159);

// Long form
const number = 3.14159;
const absoluteValue = Math.abs(number);

// Shorthand
const absoluteValue = Math.abs(3.14159);

Date Methods:

JavaScript date methods provide a concise way to work with dates.

// Long form
const date = new Date();
const day = date.getDate();

// Shorthand
const day = new Date().getDate();

// Long form
const date = new Date();
const month = date.getMonth();

// Shorthand
const month = new Date().getMonth();

// Long form
const date = new Date();
const year = date.getFullYear();

// Shorthand
const year = new Date().getFullYear();

// Long form
const date = new Date();
const hours = date.getHours();

// Shorthand
const hours = new Date().getHours();

Math Methods:

JavaScript math methods provide a concise way to perform mathematical operations.

// Long form
const number = 3.14159;
const roundedNumber = Math.round(number);

// Shorthand
const roundedNumber = Math.round(3.14159);

// Long form
const number = 3.14159;
const squaredNumber = Math.pow(number, 2);

// Shorthand
const squaredNumber = Math.pow(3.14159, 2);

// Long form
const number = 3.14159;
const squareRoot = Math.sqrt(number);

// Shorthand
const squareRoot = Math.sqrt(3.14159);

// Long form
const number = 3.14159;
const absoluteValue = Math.abs(number);

// Shorthand
const absoluteValue = Math.abs(3.14159);

Array Methods:

JavaScript array methods provide a concise way to perform common operations on arrays.

// Long form
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);

// Shorthand
const squaredNumbers = [1, 2, 3, 4, 5].map(num => num * num);

// Long form
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);

// Shorthand
const evenNumbers = [1, 2, 3, 4, 5].filter(num => num % 2 === 0);

// Long form
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);

// Shorthand
const sum = [1, 2, 3, 4, 5].reduce((acc, num) => acc + num, 0);

// Long form
const numbers = [1, 2, 3, 4, 5];
const foundNumber = numbers.find(num => num > 3);

// Shorthand
const foundNumber = [1, 2, 3, 4, 5].find(num => num > 3);

Back to Top⤴️

Interview Questions

Print only id's from the below array

const nameList = [{
  name: 'a',
  id: '1'
},
{
  name: 'b',
  id: '2'
}, {
  name: 'c',
  id: '3'
}]

// solution using built-in method or funtion
const ids = nameList.map(item => item.id);
console.log(ids); // ['1', '2', '3']

// solution using without built-in method or funtion
let ids = [];
for (let i = 0; i < nameList.length; i++) {
  ids[i] = nameList[i].id;
}
console.log(ids); // ['1', '2', '3']

Back to Top⤴️

Print the output as shown below

// output
OutPutArray=[{amount:300,name:'a',id:'1'},{amount:300,name:'b',id:'2'},{amount:300,name:'c',id:'3'}]

// solution
const nameList = {
  amount: 300,
  name: [{
    name: 'a',
    id: '1'
  },
  {
    name: 'b',
    id: '2'
  }, {
    name: 'c',
    id: '3'
  }]
}

// solution using built-in method or funtion
const outputArray = nameList.name.map(item => ({ ...item, amount: nameList.amount }));
console.log(outputArray); // [{amount:300,name:'a',id:'1'},{amount:300,name:'b',id:'2'},{amount:300,name:'c',id:'3'}]

// solution using without built-in method or funtion
let outputArray = [];
for (let i = 0; i < nameList.name.length; i++) {
  outputArray[i] = {
    amount: nameList.amount,
    name: nameList.name[i].name,
    id: nameList.name[i].id
  };
}
console.log(outputArray); // [{amount:300,name:'a',id:'1'},{amount:300,name:'b',id:'2'},{amount:300,name:'c',id:'3'}]

Print a half pyramid in JavaScript as shown below

// output 
// *
// **
// ***

// solution using built-in method or funtion
for (let i = 1; i <= 3; i++) {
  console.log('*'.repeat(i));
}

// solution using without built-in method or funtion
for (let i = 1; i <= 3; i++) {
  let string = '';
  for (let j = 1; j <= i; j++) {
    string += '*';
  }
  console.log(string);
}

// solution using without built-in method or funtion
let string = "";

for (let i = 0; i < 3; i++){
    string += '*';
    console.log(string);
}

Back to Top⤴️

Print a inverted half pyramid in JavaScript as shown below

// output 
// ***
// **
// *

// solution using built-in method or funtion
for (let i = 3; i >= 1; i--) {
  console.log('*'.repeat(i));
}

// solution using without built-in method or funtion
for (let i = 3; i >= 1; i--) {
  let string = '';
  for (let j = 1; j <= i; j++) {
    string += '*';
  }
  console.log(string);
}

Print the output as shown below

// OUTPUT
// {
//   "odd" : all odd nums,
//   "even": all even numbers
// }

let nums = [2, 5, 3, 6, 8, 5];

// solution using built-in method or funtion
let evenNums = nums.filter((num) => num % 2 === 0);
let oddNums = nums.filter((num) => num % 2 !== 0);

let result = {
  "odd": oddNums,
  "even": evenNums
};

console.log(result);

// solution using without built-in method or funtion
let evenNums = [];
let oddNums = [];

for (let i = 0; i < nums.length; i++) {
  if (nums[i] % 2 === 0) {
    evenNums[evenNums.length] = nums[i];
  } else {
    oddNums[oddNums.length] = nums[i];
  }
}

let result = {
  "odd": oddNums,
  "even": evenNums
};

console.log(result);

Back to Top⤴️

Show Chess board in javascript and make it to center.

const chessboard = document.createElement("div");
chessboard.id = "chessboard";
chessboard.style.display = "flex";
chessboard.style.flexDirection = "column";
chessboard.style.justifyContent = "center";
chessboard.style.alignItems = "center";
chessboard.style.height = "450px";

for (let i = 0; i < 8; i++) {
  const row = document.createElement("div");
  row.style.display = "flex";
  
  for (let j = 0; j < 8; j++) {
    const cell = document.createElement("div");
    cell.style.width = "50px";
    cell.style.height = "50px";
    cell.style.backgroundColor = (i + j) % 2 === 0 ? "white" : "black";
    cell.style.border = "1px solid black";
    row.appendChild(cell);
  }
  
  chessboard.appendChild(row);
}

document.body.appendChild(chessboard);