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
- Data Types
- Operators
- Arrays
- Strings
- Loops
- Conditional Statements
- Functions
- Scope
- Hoisting
- Currying
- Dates
- Date Get Methods
- Date Set Methods
- Type Conversion
- Typeof
- Math
- Sets
- Map
- 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
.jsextension 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>
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>
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?
*/
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).
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();
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;
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
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
```javascript | 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⤴️](#table-of-contents)
### Bitwise Operators
| Operator | Description |
| :-----------: | :-----------: |
| & | AND |
| l | OR |
| ~ | NOT |
| ^| XOR |
| << | Left shift |
| >> | Right shift |
| >>> | Unsigned right |
Examples
```javascript
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
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
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"
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"}
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]
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
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"}
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()
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"]
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"]
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
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
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
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"
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
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"
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]
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"]
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"
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
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()
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
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] }
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"
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
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
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"
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!"
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
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!"]
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"
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!"
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!"
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
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!"
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!"
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()
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: {}
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"}
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"}
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}
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"]
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__: ƒ, …}
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
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
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
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"}
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"}
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
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++;
}
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]);
}
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
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");
}
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");
}
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
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
}
IIFE
An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.
(function() {
console.log("Hello World!");
})();
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!"
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!"
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();
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);
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;
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()
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
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
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
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'
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'
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();
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();
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();
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();
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);
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);
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);
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
parseFloat - Converts a string to a floating-point number using the parseFloat() method.
let num = parseFloat("123.456");
console.log(num); // Output: 123.456
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"
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
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
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)'
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
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 |
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"
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
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
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
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
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
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)
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
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
| 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"]);
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
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"]);
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");
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 + " ";
});
console.log(text.trim()); // Output: "a b c"
values - Returns an iterator with all the values in a Set
letters.values() // Returns [object Set Iterator]
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]
]);
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
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]
]);
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");
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;
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
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
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
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
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;
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;
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;
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;
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);
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();
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");
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");
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);
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");
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();
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();
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");
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);
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!");
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 |
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 |
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");
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";
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!");
});
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";
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;
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;
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>
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;
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>
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>
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;
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;
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>
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>
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>
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>
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>
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);
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=/;";
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");
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;
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";
}
}
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;
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;
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);
}
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()
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");
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;
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()
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
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;
}
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.
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);
}
};
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
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;
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"
}
};
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")
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);
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);
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!");
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!");
}
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"];
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
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);
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;
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
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
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
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!";
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;
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);
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
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]
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
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.
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
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
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"]
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
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
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
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!
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
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
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
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 }
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"
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"]
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]
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
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-elsestatement, 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);
Interview Questions
Sorts an array of numbers without using any built-in method.
const sortArray = (arr) => {
for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
if (arr[i] > arr[j]) {
let temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
return arr;
};
const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
console.log(sortArray(numbers)); // Output: [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]
Find the maximum number in an array of numbers without using any built-in method.
const findMax = (arr) => {
let max = arr[0];
for (let i = 1; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
return max;
};
const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
console.log(findMax(numbers)); // Output: 9
Find the minimum number in an array of numbers without using any built-in method.
const findMin = (arr) => {
let min = arr[0];
for (let i = 1; i < arr.length; i++) {
if (arr[i] < min) {
min = arr[i];
}
}
return min;
};
const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
console.log(findMin(numbers)); // Output: 1
Find the second largest number from the array given
let array = [1, 8, 9, 40, 50];
const secondLar = (arr) => {
let first = -Infinity;
let second = -Infinity;
for (let i = 0; i < arr.length; i++){
if( arr[i] > first){
second = first;
first = arr[i];
} else if (arr[i] > second && arr[i] != first){
second = arr[i];
}
}
return second === -Infinity ? "No second largest number" : second;
}
console.log(secondLar(array));
Remove special characters from the given string without using built-in methods:
const input = "MA@NT+H(A+N)";
const remove = (str) => {
let result = '';
for (let i = 0; i < str.length; i++){
let char = str[i];
if(
(char >= 'A' && char <= 'Z') ||
(char >= 'a' && char <= 'z') ||
(char >= '0' && char <= '9') ||
char === ' '
){
result += char;
}
}
return result;
}
console.log(remove(input)); // Output=MANTHAN
Print the given values in matrix form without using built-in methods
Output:
1 4 7
2 5 8
3 6 9
let input = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// Manually print the matrix
for (let row = 0; row < 3; row++) {
let output = ""; // Initialize an empty string for each row
for (let col = 0; col < 3; col++) {
output += input[row + col * 3] + " "; // Calculate index and add spaces
}
console.log(output);
}
Write a function that calculates the sum of an array of numbers Without Inbuilt Method.
function sumArray(arr) {
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum += arr[i];
}
return sum;
}
const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
console.log(sumArray(numbers)); // Output: 44
Write a function that calculates the average of an array of numbers Without Inbuilt Method.
function averageArray(arr) {
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum += arr[i];
}
return sum / arr.length;
}
const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
console.log(averageArray(numbers)); // Output: 4
Write a function that checks if a number is prime Without Inbuilt Method.
function isPrime(num) {
if (num <= 1) {
return false;
}
for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) {
return false;
}
}
return true;
}
console.log(isPrime(7)); // Output: true
console.log(isPrime(10)); // Output: false
Write a function that checks if a number is a palindrome Without Inbuilt Method.
function isPalindrome(num) {
const str = num.toString();
for (let i = 0; i < str.length / 2; i++) {
if (str[i] !== str[str.length - 1 - i]) {
return false;
}
}
return true;
}
console.log(isPalindrome(121)); // Output: true
console.log(isPalindrome(123)); // Output: false
Write a function that checks if a string is a palindrome Without Inbuilt Method.
function isPalindrome(str) {
for (let i = 0; i < str.length / 2; i++) {
if (str[i] !== str[str.length - 1 - i]) {
return false;
}
}
return true;
}
console.log(isPalindrome('madam')); // Output: true
console.log(isPalindrome('hello')); // Output: false
Find duplicate numbers in an array without using any built-in method.
const findDuplicates = (arr) => {
let duplicates = [];
let index = 0;
for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
let isDuplicate = false;
if (arr[i] === arr[j]) {
for (let k = 0; k < index; k++) {
if (duplicates[k] === arr[i]) {
isDuplicate = true;
break;
}
}
if (!isDuplicate) {
duplicates[index] = arr[i];
index++;
}
}
}
}
return duplicates;
};
let numbers = [1, 2, 3, 4, 2, 5, 6, 3, 7, 8, 8];
console.log(findDuplicates(numbers)); // Output: [2, 3, 8]
Remove duplicate numbers in an array without using any built-in method.
const removeDuplicates = (arr) => {
let unique = [];
let index = 0;
for (let i = 0; i < arr.length; i++) {
let isDuplicate = false;
for (let j = 0; j < index; j++) {
if (arr[i] === unique[j]) {
isDuplicate = true;
break;
}
}
if (!isDuplicate) {
unique[index] = arr[i];
index++;
}
}
return unique;
};
let numbers = [1, 2, 3, 4, 2, 5, 6, 3, 7, 8, 8];
console.log(removeDuplicates(numbers)); // Output: [1, 2, 3, 4, 5, 6, 7, 8]
Reverse a string without using any built-in method.
const reverseString = (str) => {
let reversed = '';
for (let i = str.length - 1; i >= 0; i--) {
reversed += str[i];
}
return reversed;
};
console.log(reverseString('hello')); // Output: 'olleh'
Reverse a number without using any built-in method.
const reverseNumber = (num) => {
let reversed = 0;
while (num > 0) {
reversed = reversed * 10 + (num % 10);
num = Math.floor(num / 10);
}
return reversed;
};
console.log(reverseNumber(12345)); // Output: 54321
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']
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);
}
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);
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);
Print the result for the code below
var obj1 = {
num: 10
}
var obj2 = Object.create(obj1);
console.log(obj2.num);
// output: 10
Print the result for the code below
var num = 10;
var obj = {
num: 20
};
(function() {
console.log(num, obj.num);
})();
// output: 10 20
Print the result for the code below
var num1 = 20;
var num2 = 30;
[num1, num2] [num2, num1];
console.log(num1, num2);
// output: 20 30
Print the result for the code below
var num= 10;
var obj = {
num: 20,
printNum: function() {
console.log(this.num);
}
};
var newObj = obj.printNum.bind(obj);
newObj();
// output: 20
Print the result for the code below
var num= 10;
var obj = {
num: 20,
printNum: function() {
console.log(this.num);
}
};
var newObj = obj.printNum.bind({ num: 30 });
newObj();
// output: 30
Print the result for the code below
var person = {
name: "John",
greet: function() {
console.log("Hello, my name is "+this.name);
}
}
var newPerson = person;
newPerson.name = "Jane";
person.greet();
// output: Hello, my name is Jane
Print the result for the code below
var num = 10;
var obj = {
num: 20
};
(function(num, obj) {
console.log(num, obj.num);
})(num, obj);
// output: 10 20
Print the result for the code below
var num = 10;
var obj = {
num: 20,
printNum: function() {
console.log(this.num);
}
};
var newObj = obj.printNum;
newObj();
// output: 10
Write a JavaScript program to remove duplicate items from an array.
let arr = ['CS001', 'TSW002','STS003','CS001','TSW002','STS004'];
// using built-in Set
let arr = ['CS001', 'TSW002','STS003','CS001','TSW002','STS004'];
let uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // Output: ['CS001', 'TSW002', 'STS003', 'STS004']
// using filter
let arr = ['CS001', 'TSW002','STS003','CS001','TSW002','STS004'];
let uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(uniqueArr); // Output: ['CS001', 'TSW002', 'STS003', 'STS004']
// using reduce
let arr = ['CS001', 'TSW002','STS003','CS001','TSW002','STS004'];
let uniqueArr = arr.reduce((acc, item) => {
if (!acc.includes(item)) {
acc.push(item);
}
return acc;
}, []);
console.log(uniqueArr); // Output: ['CS001', 'TSW002', 'STS003', 'STS004']
// using forEach
let arr = ['CS001', 'TSW002','STS003','CS001','TSW002','STS004'];
let uniqueArr = [];
arr.forEach((item) => {
if (!uniqueArr.includes(item)) {
uniqueArr.push(item);
}
});
console.log(uniqueArr); // Output: ['CS001', 'TSW002', 'STS003', 'STS004']
// using indexOf
let arr = ['CS001', 'TSW002','STS003','CS001','TSW002','STS004'];
let uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
if (uniqueArr.indexOf(arr[i]) === -1) {
uniqueArr.push(arr[i]);
}
}
console.log(uniqueArr); // Output: ['CS001', 'TSW002', 'STS003', 'STS004']
// using includes
let arr = ['CS001', 'TSW002','STS003','CS001','TSW002','STS004'];
let uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
if (!uniqueArr.includes(arr[i])) {
uniqueArr.push(arr[i]);
}
}
console.log(uniqueArr); // Output: ['CS001', 'TSW002', 'STS003', 'STS004']
// using map
let arr = ['CS001', 'TSW002','STS003','CS001','TSW002','STS004'];
let uniqueArr = [];
arr.map((item) => {
if (!uniqueArr.includes(item)) {
uniqueArr.push(item);
}
});
console.log(uniqueArr); // Output: ['CS001', 'TSW002', 'STS003', 'STS004']
// using while loop
let arr = ['CS001', 'TSW002','STS003','CS001','TSW002','STS004'];
let uniqueArr = [];
let i = 0;
while (i < arr.length) {
if (!uniqueArr.includes(arr[i])) {
uniqueArr.push(arr[i]);
}
i++;
}
console.log(uniqueArr); // Output: ['CS001', 'TSW002', 'STS003', 'STS004']
// using without built-in methods
let arr = ['CS001', 'TSW002','STS003','CS001','TSW002','STS004'];
let uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
let isUnique = true;
for (let j = 0; j < uniqueArr.length; j++) {
if (arr[i] === uniqueArr[j]) {
isUnique = false;
break;
}
}
if (isUnique) {
uniqueArr.push(arr[i]);
}
}
console.log(uniqueArr); // Output: ['CS001', 'TSW002', 'STS003', 'STS004']
Write a JavaScript program to find ‘CS001’ in the array.
let arr = ['CS001', 'TSW002','STS003','CS001','TSW002','STS004'];
// using built-in method find
let arr = ['CS001', 'TSW002','STS003','CS001','TSW002','STS004'];
let index = arr.find((item) => item === 'TSW002');
console.log(index); // Output: TSW002
// using without built-in methods or functions
let arr = ['CS001', 'TSW002','STS003','CS001','TSW002','STS004'];
let index = -1;
for (let i = 0; i < arr.length; i++) {
if (arr[i] === 'TSW002') {
index = i;
break;
}
}
console.log(index); // Output: 1
console.log(arr[index]); // Output: TSW002
Write a JavaScript program to find middle element of an array.
let arr = ['CS001', 'TSW002','STS003','CS001','TSW002'];
// using built-in method slice
let arr = ['CS001', 'TSW002','STS003','CS001','TSW002'];
let middle = arr.slice(Math.floor(arr.length / 2), Math.ceil(arr.length / 2) + 1);
console.log(middle); // Output: ['STS003']
// using without built-in methods or functions
let arr = ['CS001', 'TSW002','STS003','CS001','TSW002'];
let middle = [];
if (arr.length % 2 === 0) {
middle = [arr[arr.length / 2 - 1], arr[arr.length / 2]];
} else {
middle = [arr[(arr.length - 1) / 2]];
}
console.log(middle); // Output: ['STS003']
Write a JavaScript program to find last element of an array.
let arr = ['CS001', 'TSW002','STS003','CS001','TSW002','STS004'];
// using built-in method or function
let arr = ['CS001', 'TSW002','STS003','CS001','TSW002','STS004'];
let last = arr[arr.length - 1];
console.log(last); // Output: STS004
// using without built-in methods or functions
let arr = ['CS001', 'TSW002','STS003','CS001','TSW002','STS004'];
for (let i = 0; i < arr.length; i++) {
if (i === arr.length - 1) {
console.log(arr[i]); // Output: STS004
}
}
Give the output for the code below
function counter() {
let count = 0;
return () => count++;
}
let c = counter();
console.log("count1", c()); // Output: 0
console.log("count2", c()); // Output: 1
console.log("count3", c()); // Output: 2
Program To Print Hello World
console.log("Hello, World!");
// Output: Hello, World!
Program to Add Two Numbers
const num1 = 5;
const num2 = 10;
const sum = num1 + num2;
console.log("The sum of " + num1 + " and " + num2 + " is: " + sum);
// Output: The sum of 5 and 10 is: 15
Program to Find the Square Root
const num = 16;
const squareRoot = Math.sqrt(num);
console.log("The square root of " + num + " is: " + squareRoot);
// Output: The square root of 16 is: 4
Program to Calculate the Area of a Triangle
const base = 5;
const height = 10;
const area = 0.5 * base * height;
console.log("The area of the triangle is: " + area);
// Output: The area of the triangle is: 25
Program to Swap Two Variables
let a = 5;
let b = 10;
[a, b] = [b, a];
console.log("a is: " + a);
console.log("b is: " + b);
// Output: a is: 10
// Output: b is: 5
Program to Solve Quadratic Equation
const a = 1;
const b = 5;
const c = 6;
const discriminant = b * b - 4 * a * c;
let x1, x2;
if (discriminant > 0) {
x1 = (-b + Math.sqrt(discriminant)) / (2 * a);
x2 = (-b - Math.sqrt(discriminant)) / (2 * a);
console.log("The roots are: " + x1 + " and " + x2);
} else if (discriminant === 0) {
x1 = -b / (2 * a);
console.log("The root is: " + x1);
} else {
const realPart = (-b / (2 * a)).toFixed(2);
const imaginaryPart = (Math.sqrt(-discriminant) / (2 * a)).toFixed(2);
console.log("The roots are: " + realPart + " + " + imaginaryPart + "i and " + realPart + " - " + imaginaryPart + "i");
}
// Output: The roots are: -2 and -3
Program to Convert Kilometers to Miles
const kilometers = 5;
const miles = kilometers * 0.621371;
console.log(kilometers + " kilometers is equal to " + miles + " miles");
// Output: 5 kilometers is equal to 3.10686 miles
Program to Convert Celsius to Fahrenheit
const celsius = 37;
const fahrenheit = (celsius * 9 / 5) + 32;
console.log(celsius + "°C is equal to " + fahrenheit + "°F");
// Output: 37°C is equal to 98.6°F
Program to Generate a Random Number
const min = 1;
const max = 10;
const randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
console.log("Random number between " + min + " and " + max + " is: " + randomNum);
// Output: Random number between 1 and 10 is: 7
Program to Check if a number is Positive, Negative, or Zero
const num = 5;
if (num > 0) {
console.log(num + " is a positive number");
} else if (num < 0) {
console.log(num + " is a negative number");
} else {
console.log(num + " is zero");
}
// Output: 5 is a positive number
Program to Check if a Number is Odd or Even
const num = 5;
if (num % 2 === 0) {
console.log(num + " is an even number");
} else {
console.log(num + " is an odd number");
}
// Output: 5 is an odd number
Program to Find the Largest Among Three Numbers
const num1 = 10;
const num2 = 20;
const num3 = 15;
let largest;
if (num1 >= num2 && num1 >= num3) {
largest = num1;
} else if (num2 >= num1 && num2 >= num3) {
largest = num2;
} else {
largest = num3;
}
console.log("The largest number is: " + largest);
// Output: The largest number is: 20
Program to Check Prime Number
const num = 29;
let isPrime = true;
if (num === 1) {
console.log("1 is neither prime nor composite number.");
} else if (num > 1) {
for (let i = 2; i < num; i++) {
if (num % i === 0) {
isPrime = false;
break;
}
}
if (isPrime) {
console.log(num + " is a prime number");
} else {
console.log(num + " is not a prime number");
}
} else {
console.log("Invalid input");
}
// Output: 29 is a prime number
Program to Print All Prime Numbers in an Interval
const lowerNumber = 10;
const upperNumber = 50;
console.log("Prime numbers between " + lowerNumber + " and " + upperNumber + " are:");
for (let i = lowerNumber; i <= upperNumber; i++) {
let isPrime = true;
if (i === 1) {
isPrime = false;
} else if (i > 1) {
for (let j = 2; j < i; j++) {
if (i % j === 0) {
isPrime = false;
break;
}
}
}
if (isPrime) {
console.log(i);
}
}
// Output: Prime numbers between 10 and 50 are:
Program to Find the Factorial of a Number
const num = 5;
let factorial = 1;
if (num < 0) {
console.log("Factorial of a negative number is not possible");
} else {
for (let i = 1; i <= num; i++) {
factorial *= i;
}
console.log("The factorial of " + num + " is: " + factorial);
}
// Output: The factorial of 5 is: 120
Program to Display the Multiplication Table
const num = 5;
console.log("Multiplication table of " + num + ":");
for (let i = 1; i <= 10; i++) {
console.log(num + " * " + i + " = " + num * i);
}
// Output: Multiplication table of 5:
Program to Print the Fibonacci Sequence
const num = 10;
let n1 = 0, n2 = 1, nextTerm;
console.log("Fibonacci series up to " + num + " terms:");
for (let i = 1; i <= num; i++) {
console.log(n1);
nextTerm = n1 + n2;
n1 = n2;
n2 = nextTerm;
}
// Output: Fibonacci series up to 10 terms: 0 1 1 2 3 5 8 13 21 34
Program to Check Armstrong Number
const num = 153;
let sum = 0;
let temp = num;
let remainder;
while (temp > 0) {
remainder = temp % 10;
sum += remainder * remainder * remainder;
temp = parseInt(temp / 10);
}
if (sum === num) {
console.log(num + " is an Armstrong number");
} else {
console.log(num + " is not an Armstrong number");
}
// Output: 153 is an Armstrong number
Program to Find Armstrong Number in an Interval
const lowerNumber = 100;
const upperNumber = 1000;
console.log("Armstrong numbers between " + lowerNumber + " and " + upperNumber + " are:");
for (let i = lowerNumber; i <= upperNumber; i++) {
let numberOfDigits = i.toString().length;
let sum = 0;
let temp = i;
let remainder;
while (temp > 0) {
remainder = temp % 10;
sum += remainder ** numberOfDigits;
temp = parseInt(temp / 10);
}
if (sum === i) {
console.log(i);
}
}
// Output: Armstrong numbers between 100 and 1000 are: 153 370 371 407
Program to Make a Simple Calculator
const operator = '+';
const num1 = 5;
const num2 = 10;
let result;
switch (operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
default:
console.log("Invalid operator");
}
console.log("The result is: " + result); // Output: The result is: 15
Program to Find the Sum of Natural Numbers
const num = 10;
let sum = 0;
for (let i = 1; i <= num; i++) {
sum += i;
}
console.log("The sum of natural numbers up to " + num + " is: " + sum);
// Output: The sum of natural numbers up to 10 is: 55
Program to Check if the Numbers Have Same Last Digit
const num1 = 25;
const num2 = 35;
if (num1 % 10 === num2 % 10) {
console.log("Both numbers have the same last digit");
} else {
console.log("Both numbers do not have the same last digit");
}
// Output: Both numbers have the same last digit
Program to Find HCF or GCD
const num1 = 12;
const num2 = 18;
let hcf;
for (let i = 1; i <= num1 && i <= num2; i++) {
if (num1 % i === 0 && num2 % i === 0) {
hcf = i;
}
}
console.log("The HCF of " + num1 + " and " + num2 + " is: " + hcf);
// Output: The HCF of 12 and 18 is: 6
Program to Find LCM
const num1 = 12;
const num2 = 18;
let lcm;
lcm = (num1 > num2) ? num1 : num2;
while (true) {
if (lcm % num1 === 0 && lcm % num2 === 0) {
console.log("The LCM of " + num1 + " and " + num2 + " is: " + lcm);
break;
}
lcm++;
}
// Output: The LCM of 12 and 18 is: 36
Program to Find the Factors of a Number
const num = 60;
console.log("The factors of " + num + " are:");
for (let i = 1; i <= num; i++) {
if (num % i === 0) {
console.log(i);
}
}
// Output: The factors of 60 are: 1 2 3 4 5 6 10 12 15 20 30 60
Program to Find Sum of Natural Numbers Using Recursion
function sum(num) {
if (num === 1) {
return 1;
} else {
return num + sum(num - 1);
}
}
const n = 10;
const result = sum(n);
console.log("The sum of natural numbers up to " + n + " is: " + result);
// Output: The sum of natural numbers up to 10 is: 55
Program to Guess a Random Number
const min = 1;
const max = 10;
const randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
let guess;
do {
guess = parseInt(prompt("Guess a number between " + min + " and " + max));
if (guess > randomNum) {
console.log("Too high. Try again!");
} else if (guess < randomNum) {
console.log("Too low. Try again!");
}
} while (guess !== randomNum);
console.log("Congratulations! You guessed the correct number.");
// Output: Congratulations! You guessed the correct number.
Program to Shuffle Deck of Cards
const suits = ["Hearts", "Diamonds", "Clubs", "Spades"];
const ranks = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King", "Ace"];
const deck = [];
for (const suit of suits) {
for (const rank of ranks) {
deck.push(rank + " of " + suit);
}
}
console.log("Shuffled deck of cards:");
for (const card of deck) {
console.log(card);
}
// Output: Shuffled deck of cards: 2 of Hearts 3 of Hearts 4 of Hearts ...
Program to Display Fibonacci Sequence Using Recursion
function fibonacci(num) {
if (num <= 1) {
return num;
} else {
return fibonacci(num - 1) + fibonacci(num - 2);
}
}
const n = 10;
console.log("Fibonacci series up to " + n + " terms:");
for (let i = 0; i < n; i++) {
console.log(fibonacci(i));
}
// Output: Fibonacci series up to 10 terms: 0 1 1 2 3 5 8 13 21 34
Program to Find Factorial of Number Using Recursion
function factorial(num) {
if (num === 0) {
return 1;
} else {
return num * factorial(num - 1);
}
}
const n = 5;
console.log("The factorial of " + n + " is: " + factorial(n));
// Output: The factorial of 5 is: 120
Program to Convert Decimal to Binary
const decimal = 10;
let binary = "";
while (decimal > 0) {
binary = (decimal % 2) + binary;
decimal = parseInt(decimal / 2);
}
console.log("The binary equivalent is: " + binary);
// Output: The binary equivalent is: 1010
Program to Find ASCII Value of Character
const char = 'A';
console.log("The ASCII value of " + char + " is: " + char.charCodeAt(0));
// Output: The ASCII value of A is: 65
Program to Check Whether a String is Palindrome or Not
const str = "madam";
let isPalindrome = true;
for (let i = 0; i < str.length / 2; i++) {
if (str[i] !== str[str.length - 1 - i]) {
isPalindrome = false;
break;
}
}
if (isPalindrome) {
console.log(str + " is a palindrome");
} else {
console.log(str + " is not a palindrome");
}
// Output: madam is a palindrome
Program to Sort Words in Alphabetical Order
const words = ["Apple", "Banana", "Orange", "Mango"];
words.sort();
console.log("Words in alphabetical order:");
for (const word of words) {
console.log(word);
}
// Output: Words in alphabetical order: Apple Banana Mango Orange
Program to Replace Characters of a String
const str = "Hello, World!";
const newStr = str.replace(/o/g, "x");
console.log("Original string: " + str);
console.log("New string: " + newStr);
// Output: Original string: Hello, World!
// Output: New string: Hellx, Wxrld!
Program to Reverse a String
const str = "Hello, World!";
let reversedStr = "";
for (let i = str.length - 1; i >= 0; i--) {
reversedStr += str[i];
}
console.log("Original string: " + str);
console.log("Reversed string: " + reversedStr);
// Output: Original string: Hello, World!
// Output: Reversed string: !dlroW ,olleH
Program to Create Objects in Different Ways
// Using Object Literal
const person1 = {
name: "Alice",
age: 30
};
// Using Object Constructor
function Person(name, age) {
this.name = name;
this.age = age;
}
const person2 = new Person("Bob", 25);
// Using Object.create()
const person3 = Object.create(person1);
console.log(person1);
console.log(person2);
console.log(person3);
// Output: { name: 'Alice', age: 30 }
// Output: Person { name: 'Bob', age: 25 }
// Output: {}
Program to Check the Number of Occurrences of a Character in the String
const str = "Hello, World!";
const char = "o";
let count = 0;
for (let i = 0; i < str.length; i++) {
if (str[i] === char) {
count++;
}
}
console.log("The number of occurrences of " + char + " in the string is: " + count);
// Output: The number of occurrences of o in the string is: 2
Program to Convert the First Letter of a String into UpperCase
const str = "hello, world!";
const firstLetter = str[0].toUpperCase();
const newStr = firstLetter + str.slice(1);
console.log("Original string: " + str);
console.log("New string: " + newStr);
// Output: Original string: hello, world!
// Output: New string: Hello, world!
Program to Count the Number of Vowels in a String
const str = "hello, world!";
const vowels = "aeiou";
let count = 0;
for (let char of str) {
if (vowels.includes(char.toLowerCase())) {
count++;
}
}
console.log("The number of vowels in the string is: " + count);
// Output: The number of vowels in the string is: 3
Program to Remove a Property from an Object
const person = {
name: "Alice",
age: 30,
profession: "Developer"
};
delete person.profession;
console.log(person);
// Output: { name: 'Alice', age: 30 }
Program to Check Whether a String Starts and Ends With Certain Characters
const str = "hello, world!";
const startsWith = "he";
const endsWith = "ld";
if (str.startsWith(startsWith) && str.endsWith(endsWith)) {
console.log("The string starts with " + startsWith + " and ends with " + endsWith);
} else {
console.log("The string does not start with " + startsWith + " and end with " + endsWith);
}
// Output: The string starts with he and ends with ld
Program to Check if a Key Exists in an Object
const person = {
name: "Alice",
age: 30
};
const key = "name";
if (key in person) {
console.log("The key " + key + " exists in the object");
} else {
console.log("The key " + key + " does not exist in the object");
}
// Output: The key name exists in the object
Program to Clone a JS Object
const person = {
name: "Alice",
age: 30
};
const clone = { ...person };
console.log(clone);
// Output: { name: 'Alice', age: 30 }
Program to Loop Through an Object
const person = {
name: "Alice",
age: 30
};
for (const key in person) {
console.log(key + ": " + person[key]);
}
// Output: name: Alice
Program to Merge Property of Two Objects
const obj1 = {
name: "Alice"
};
const obj2 = {
age: 30
};
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj);
// Output: { name: 'Alice', age: 30 }
Program to Count the Number of Keys/Properties in an Object
const person = {
name: "Alice",
age: 30
};
const keys = Object.keys(person);
const count = keys.length;
console.log("The number of keys in the object is: " + count);
// Output: The number of keys in the object is: 2
Program to Add Key/Value Pair to an Object
const person = {
name: "Alice",
age: 30
};
person.profession = "Developer";
console.log(person);
// Output: { name: 'Alice', age: 30, profession: 'Developer' }
Program to Replace All Occurrences of a String
const str = "hello, world!";
const newStr = str.replace(/l/g, "x");
console.log("Original string: " + str);
console.log("New string: " + newStr);
// Output: Original string: hello, world!
// Output: New string: hexxo, worxd!
Program to Create Multiline Strings
const multilineString = `This is a
multiline
string`;
console.log(multilineString);
// Output: This is a
// multiline
// string
Program to Format Numbers as Currency Strings
const number = 12345.6789;
const currencyString = number.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
console.log(currencyString);
// Output: $12,345.68
Program to Generate Random String
const randomString = Math.random().toString(36).substring(7);
console.log(randomString);
// Output: Random string of length 7 characters (e.g., "x8z2j9a")
Program to Check if a String Starts With Another String
const str = "hello, world!";
const startsWith = "hello";
if (str.startsWith(startsWith)) {
console.log("The string starts with " + startsWith);
} else {
console.log("The string does not start with " + startsWith);
}
// Output: The string starts with hello
Program to Trim a String
const str = " hello, world! ";
const trimmedStr = str.trim();
console.log("Original string: " + str);
console.log("Trimmed string: " + trimmedStr);
// Output: Original string: hello, world!
// Output: Trimmed string: hello, world!
Program to Convert Objects to Strings
const person = {
name: "Alice",
age: 30
};
const str = JSON.stringify(person);
console.log(str);
// Output: {"name":"Alice","age":30}
Program to Check Whether a String Contains a Substring
const str = "hello, world!";
const subStr = "world";
if (str.includes(subStr)) {
console.log("The string contains " + subStr);
} else {
console.log("The string does not contain " + subStr);
}
// Output: The string contains world
Program to Compare Two Strings
const str1 = "hello";
const str2 = "world";
if (str1 === str2) {
console.log("The strings are equal");
} else {
console.log("The strings are not equal");
}
// Output: The strings are not equal
Program to Encode a String to Base64
const str = "hello, world!";
const encodedStr = btoa(str);
console.log("Encoded string: " + encodedStr);
// Output: Encoded string: aGVsbG8sIHdvcmxkIQ==
Program to Replace all Instances of a Character in a String
const str = "hello, world!";
const newStr = str.replace(/l/g, "x");
console.log("Original string: " + str);
console.log("New string: " + newStr);
// Output: Original string: hello, world!
// Output: New string: hexxo, worxd!
Program to Replace All Line Breaks with
const str = "hello\nworld!";
const newStr = str.replace(/\n/g, " ");
console.log("Original string: " + str);
console.log("New string: " + newStr);
// Output: Original string: hello
// world!
// Output: New string: hello world!
Program to Display Date and Time
const date = new Date();
console.log("Current date and time: " + date);
// Output: Current date and time: Sun Oct 31 2021 12:00:00 GMT+0530 (India Standard Time)
Program to Check Leap Year
const year = 2024;
if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
console.log(year + " is a leap year");
} else {
console.log(year + " is not a leap year");
}
// Output: 2024 is a leap year
Program to Format the Date
const date = new Date();
const options = { year: 'numeric', month: 'long', day: 'numeric' };
const formattedDate = date.toLocaleDateString('en-US', options);
console.log("Formatted date: " + formattedDate);
// Output: Formatted date: October 31, 2021
Program to Display Current Date
const date = new Date();
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
console.log("Current date: " + day + "/" + month + "/" + year);
// Output: Current date: 14/06/2024
Program to Compare The Value of Two Dates
const date1 = new Date('2021-10-31');
const date2 = new Date('2021-11-01');
if (date1 > date2) {
console.log("Date 1 is greater than Date 2");
} else if (date1 < date2) {
console.log("Date 1 is less than Date 2");
} else {
console.log("Date 1 is equal to Date 2");
}
// Output: Date 1 is less than Date 2
Program to Create Countdown Timer
let count = 10;
const interval = setInterval(() => {
console.log(count);
count--;
if (count < 0) {
clearInterval(interval);
console.log("Countdown is over");
}
}, 1000);
// Output: 10 9 8 7 6 5 4 3 2 1 0 Countdown is over
Program to Remove Specific Item From an Array
const fruits = ["Apple", "Banana", "Orange", "Mango"];
const index = fruits.indexOf("Banana");
if (index > -1) {
fruits.splice(index, 1);
}
console.log(fruits);
// Output: ["Apple", "Orange", "Mango"]
Program to Check if An Array Contains a Specified Value
const fruits = ["Apple", "Banana", "Orange", "Mango"];
const value = "Banana";
if (fruits.includes(value)) {
console.log("The array contains " + value);
} else {
console.log("The array does not contain " + value);
}
// Output: The array contains Banana
Program to Insert Item in an Array
const fruits = ["Apple", "Banana", "Orange", "Mango"];
fruits.push("Grapes");
console.log(fruits);
// Output: ["Apple", "Banana", "Orange", "Mango", "Grapes"]
Program to Append an Object to an Array
const fruits = ["Apple", "Banana", "Orange", "Mango"];
const obj = { name: "Grapes" };
fruits.push(obj);
console.log(fruits);
// Output: ["Apple", "Banana", "Orange", "Mango", { name: 'Grapes' }]
Program to Check if An Object is An Array
const fruits = ["Apple", "Banana", "Orange", "Mango"];
if (Array.isArray(fruits)) {
console.log("fruits is an array");
} else {
console.log("fruits is not an array");
}
// Output: fruits is an array
Program to Empty an Array
let fruits = ["Apple", "Banana", "Orange", "Mango"];
fruits = [];
console.log(fruits);
// Output: []
Program to Add Element to Start of an Array
let fruits = ["Apple", "Banana", "Orange", "Mango"];
fruits.unshift("Grapes");
console.log(fruits);
// Output: ["Grapes", "Apple", "Banana", "Orange", "Mango"]
Program to Remove Duplicates From Array
const fruits = ["Apple", "Banana", "Orange", "Mango", "Apple", "Banana"];
const uniqueFruits = [...new Set(fruits)];
console.log(uniqueFruits);
// Output: ["Apple", "Banana", "Orange", "Mango"]
Program to Merge Two Arrays and Remove Duplicate Items
const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];
const mergedArray = [...new Set([...arr1, ...arr2])];
console.log(mergedArray);
// Output: [1, 2, 3, 4, 5]
Program to Sort Array of Objects by Property Values
const persons = [
{ name: "Alice", age: 30 },
{ name: "Bob", age: 25 },
{ name: "Charlie", age: 35 }
];
persons.sort((a, b) => a.age - b.age);
console.log(persons);
// Output: [ { name: 'Bob', age: 25 }, { name: 'Alice', age: 30 }, { name: 'Charlie', age: 35 } ]
Program to Create Two Dimensional Array
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix);
// Output: [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ]
Program to Extract Given Property Values from Objects as Array
const persons = [
{ name: "Alice", age: 30 },
{ name: "Bob", age: 25 },
{ name: "Charlie", age: 35 }
];
const names = persons.map(person => person.name);
console.log(names);
// Output: [ 'Alice', 'Bob', 'Charlie' ]
Program to Compare Elements of Two Arrays
const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
const isEqual = arr1.length === arr2.length && arr1.every((value, index) => value === arr2[index]);
if (isEqual) {
console.log("The arrays are equal");
} else {
console.log("The arrays are not equal");
}
// Output: The arrays are equal
Program to Get Random Item From an Array
const fruits = ["Apple", "Banana", "Orange", "Mango"];
const randomFruit = fruits[Math.floor(Math.random() * fruits.length)];
console.log("Random fruit: " + randomFruit);
// Output: Random fruit: Banana
Program To Perform Intersection Between Two Arrays
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [3, 4, 5, 6, 7];
const intersection = arr1.filter(value => arr2.includes(value));
console.log(intersection);
// Output: [3, 4, 5]
Program to Split Array into Smaller Chunks
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const chunkSize = 3;
const chunks = [];
for (let i = 0; i < arr.length; i += chunkSize) {
chunks.push(arr.slice(i, i + chunkSize));
}
console.log(chunks);
// Output: [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ], [ 10 ] ]
Program to Include a JS file in Another JS file
// index.js
console.log("Hello, World!");
// script.js
document.write("This is a script file");
// index.html
<!DOCTYPE html>
<html>
<head>
<title>Include JS File</title>
</head>
<body>
<script src="index.js"></script>
<script src="script.js"></script>
</body>
</html>
// Output: In console: Hello, World! In body: This is a script file
Program to Get File Extension
const filename = "script.js";
const extension = filename.split('.').pop();
console.log("File extension: " + extension);
// Output: File extension: js
Program To Check If A Variable Is undefined or null
let x;
if (x === undefined) {
console.log("x is undefined");
} else {
console.log("x is defined");
}
// Output: x is undefined
Program to Set a Default Parameter Value For a Function
function greet(name = "World") {
console.log("Hello, " + name + "!");
}
greet("Alice");
greet();
// Output: Hello, Alice! Hello, World!
Program to Illustrate Different Set Operations
const set1 = new Set([1, 2, 3, 4, 5]);
const set2 = new Set([4, 5, 6, 7, 8]);
const union = new Set([...set1, ...set2]);
const intersection = new Set([...set1].filter(x => set2.has(x)));
console.log("Union: " + [...union]);
console.log("Intersection: " + [...intersection]);
// Output: Union: 1,2,3,4,5,6,7,8 Intersection: 4,5
Program to Generate a Random Number Between Two Numbers
const min = 1;
const max = 10;
const randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
console.log("Random number between " + min + " and " + max + ": " + randomNum);
// Output: Random number between 1 and 10: 7
Program To Get The Current URL
const currentURL = window.location.href;
console.log("Current URL: " + currentURL);
// Output: Current URL: https://www.example.com/page
Program to Validate An Email Address
const email = "manthan.ank46@gmail.com";
const pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (pattern.test(email)) {
console.log(email + " is a valid email address");
} else {
console.log(email + " is not a valid email address");
}
// Output: manthan.ank46@gmail.com is a valid email address
Program to Check If a Variable is of Function Type
function greet() {
console.log("Hello, World!");
}
const x = 10;
if (typeof greet === 'function') {
console.log("greet is a function");
} else {
console.log("greet is not a function");
}
if (typeof x === 'function') {
console.log("x is a function");
} else {
console.log("x is not a function");
}
// Output: greet is a function x is not a function
Program To Work With Constants
const PI = 3.14159;
console.log("The value of PI is: " + PI);
// Output: The value of PI is: 3.14159
Program to Pass Parameter to a setTimeout() Function
function greet(name) {
console.log("Hello, " + name + "!");
}
setTimeout(greet, 1000, "Alice");
// Output: Hello, Alice! (after 1 second)
Program to Generate a Range of Numbers and Characters
const numbers = Array.from({ length: 10 }, (_, i) => i + 1);
const characters = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));
console.log("Numbers: " + numbers);
console.log("Characters: " + characters);
// Output: Numbers: 1,2,3,4,5,6,7,8,9,10 Characters: A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z
Program to Perform Function Overloading
function add(x, y) {
return x + y;
}
function add(x, y, z) {
return x + y + z;
}
console.log(add(1, 2)); // Output: NaN
console.log(add(1, 2, 3)); // Output: 6
// Explanation: The second function definition overwrites the first one, resulting in the first function call returning NaN.
Program to Implement a Stack
class Stack {
constructor() {
this.items = [];
}
push(element) {
this.items.push(element);
}
pop() {
if (this.items.length === 0) {
return "Underflow";
}
return this.items.pop();
}
peek() {
return this.items[this.items.length - 1];
}
isEmpty() {
return this.items.length === 0;
}
printStack() {
let str = "";
for (let i = 0; i < this.items.length; i++) {
str += this.items[i] + " ";
}
return str;
}
}
const stack = new Stack();
stack.push(1);
stack.push(2);
stack.push(3);
console.log(stack.printStack()); // Output: 1 2 3
console.log(stack.peek()); // Output: 3
console.log(stack.pop()); // Output: 3
console.log(stack.printStack()); // Output: 1 2
console.log(stack.isEmpty()); // Output: false
stack.pop();
stack.pop();
console.log(stack.isEmpty()); // Output: true
console.log(stack.pop()); // Output: Underflow
Program to Implement a Queue
class Queue {
constructor() {
this.items = [];
}
enqueue(element) {
this.items.push(element);
}
dequeue() {
if (this.items.length === 0) {
return "Underflow";
}
return this.items.shift();
}
front() {
if (this.items.length === 0) {
return "No elements in Queue";
}
return this.items[0];
}
isEmpty() {
return this.items.length === 0;
}
printQueue() {
let str = "";
for (let i = 0; i < this.items.length; i++) {
str += this.items[i] + " ";
}
return str;
}
}
const queue = new Queue();
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(3);
console.log(queue.printQueue()); // Output: 1 2 3
console.log(queue.front()); // Output: 1
console.log(queue.dequeue()); // Output: 1
console.log(queue.printQueue()); // Output: 2 3
console.log(queue.isEmpty()); // Output: false
queue.dequeue();
queue.dequeue();
console.log(queue.isEmpty()); // Output: true
console.log(queue.dequeue()); // Output: Underflow
Program to Check if a Number is Float or Integer
function isFloat(num) {
return Number(num) === num && num % 1 !== 0;
}
function isInteger(num) {
return Number(num) === num && num % 1 === 0;
}
console.log(isFloat(3.14)); // Output: true
console.log(isFloat(5)); // Output: false
console.log(isInteger(5)); // Output: true
console.log(isInteger(3.14)); // Output: false
// Explanation: The isFloat function checks if the number is a float by comparing it with its integer value and checking if it has a non-zero decimal part. The isInteger function checks if the number is an integer by comparing it with its integer value and checking if it has a zero decimal part.
Program to Pass a Function as Parameter
function greet(name) {
return "Hello, " + name + "!";
}
function welcome(greetFunction, name) {
return greetFunction(name);
}
console.log(welcome(greet, "Alice")); // Output: Hello, Alice!
// Explanation: The welcome function takes a function as a parameter and calls it with the provided name parameter.
Program to Get the Dimensions of an Image
const img = new Image();
img.src = "image.jpg";
img.onload = function() {
console.log("Image width: " + this.width);
console.log("Image height: " + this.height);
};
// Output: Image width: 800 Image height: 600
Program to Remove All Whitespaces From a Text
const text = " Hello, World! ";
const trimmedText = text.replace(/\s/g, "");
console.log("Original text: " + text);
console.log("Trimmed text: " + trimmedText);
// Output: Original text: Hello, World! Trimmed text: Hello,World!
Program to Write to Console
console.log("Hello, World!");
// Output: Hello, World!
Program to Convert Date to Number
const date = new Date();
const timestamp = date.getTime();
console.log("Timestamp: " + timestamp);
// Output: Timestamp: 1635648000000
Program to Get the Last Element of an Array
const fruits = ["Apple", "Banana", "Orange", "Mango"];
const lastFruit = fruits[fruits.length - 1];
console.log("Last fruit: " + lastFruit);
// Output: Last fruit: Mango
Program to Get the Current Time
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
console.log("Current time: " + hours + ":" + minutes + ":" + seconds);
// Output: Current time: 12:00:00
Program to Get the Current Day
const date = new Date();
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const day = days[date.getDay()];
console.log("Today is: " + day);
// Output: Today is: Friday
Program to Get the Current Month
const date = new Date();
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const month = months[date.getMonth()];
console.log("Current month: " + month);
// Output: Current month: June
Program to Get the Current Year
const date = new Date();
const year = date.getFullYear();
console.log("Current year: " + year);
// Output: Current year: 2024
Count the character ‘l’ in the string “Hello, World!”
const str = "Hello, World!";
let count = 0;
for (let i = 0; i < str.length; i++) {
if (str[i] === 'l') {
count++;
}
}
console.log("The number of occurrences of 'l' in the string is: " + count);
// Output: The number of occurrences of 'l' in the string is: 3
Count the number of words in the string “Hello, World!”
const str = "Hello, World!";
const words = str.split(" ");
console.log("The number of words in the string is: " + words.length);
// Output: The number of words in the string is: 2
Find the largest element in an array.
const numbers = [10, 5, 20, 15, 30];
const largest = Math.max(...numbers);
console.log("Largest number: " + largest);
// Output: Largest number: 30
Find the smallest element in an array.
const numbers = [10, 5, 20, 15, 30];
const smallest = Math.min(...numbers);
console.log("Smallest number: " + smallest);
// Output: Smallest number: 5
Find the largest element in an array without using any built-in functions/methods.
const numbers = [10, 5, 20, 15, 30];
let largest = numbers[0];
for (let i = 1; i < numbers.length; i++) {
if (numbers[i] > largest) {
largest = numbers[i];
}
}
console.log("Largest number: " + largest);
// Output: Largest number: 30
Find the smallest element in an array without using any built-in functions/methods.
const numbers = [10, 5, 20, 15, 30];
let smallest = numbers[0];
for (let i = 1; i < numbers.length; i++) {
if (numbers[i] < smallest) {
smallest = numbers[i];
}
}
console.log("Smallest number: " + smallest);
// Output: Smallest number: 5
Reverse an array without using any built-in functions/methods.
const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < (numbers.length - 1) / 2; i++) {
const temp = numbers[i];
numbers[i] = numbers[numbers.length - 1 - i];
numbers[numbers.length - 1 - i] = temp;
}
console.log("Reversed array: " + numbers);
// Output: Reversed array: 5,4,3,2,1
Find the missing number in an array of size n containing numbers from 1 to n+1 without using any built-in functions/methods.
const numbers = [1, 2, 3, 4, 6, 7, 8, 9, 10];
const n = numbers.length + 1;
let sum = (n * (n + 1)) / 2;
for (let i = 0; i < numbers.length; i++) {
sum -= numbers[i];
}
console.log("The missing number is: " + sum);
// Output: The missing number is: 5
Move all zeroes to the end of the array without using any built-in functions/methods.
const numbers = [0, 2, 0, 4, 0, 6, 0, 8];
let count = 0;
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] !== 0) {
numbers[count] = numbers[i];
count++;
}
}
while (count < numbers.length) {
numbers[count] = 0;
count++;
}
console.log("Array with zeroes at the end: " + numbers);
// Output: Array with zeroes at the end: 2,4,6,8,0,0,0,0
Find the “Kth” largest element in an array without using any built-in functions/methods.
const numbers = [10, 5, 20, 15, 30];
const k = 2;
for (let i = 0; i < k; i++) {
let max = 0;
let maxIndex = 0;
for (let j = 0; j < numbers.length; j++) {
if (numbers[j] > max) {
max = numbers[j];
maxIndex = j;
}
}
numbers[maxIndex] = 0;
}
console.log("The " + k + "th largest element is: " + max);
// Output: The 2th largest element is: 20
Find the “Kth” smallest element in an array without using any built-in functions/methods.
const numbers = [10, 5, 20, 15, 30];
const k = 2;
for (let i = 0; i < k; i++) {
let min = numbers[i];
let minIndex = i;
for (let j = i + 1; j < numbers.length; j++) {
if (numbers[j] < min) {
min = numbers[j];
minIndex = j;
}
}
// Swap the found minimum element with the element at index i
[numbers[i], numbers[minIndex]] = [numbers[minIndex], numbers[i]];
}
console.log("The " + k + "th smallest element is: " + numbers[k - 1]);
// Output: The 2th smallest element is: 10
Find the subarray with the given sum in a non-negative array without using any built-in functions/methods.
const numbers = [1, 4, 20, 3, 10, 5];
const targetSum = 33;
let start = 0;
let sum = numbers[0];
for (let i = 1; i <= numbers.length; i++) {
while (sum > targetSum && start < i - 1) {
sum -= numbers[start];
start++;
}
if (sum === targetSum) {
console.log("Subarray with the given sum found between indexes " + start + " and " + (i - 1));
break;
}
if (i < numbers.length) {
sum += numbers[i];
}
}
// Output: Subarray with the given sum found between indexes 2 and 4
Kadane’s Algorithm: Find the maximum sum subarray without using any built-in functions/methods.
const numbers = [-2, -3, 4, -1, -2, 1, 5, -3];
let maxSum = numbers[0];
let currentSum = numbers[0];
for (let i = 1; i < numbers.length; i++) {
if (currentSum + numbers[i] > numbers[i]) {
currentSum = currentSum + numbers[i];
} else {
currentSum = numbers[i];
}
if (currentSum > maxSum) {
maxSum = currentSum;
}
}
console.log("Maximum sum subarray: " + maxSum);
// Output: Maximum sum subarray: 7
Two Sum Problem: Find pairs in an array that sum to a target value without using any built-in functions/methods.
const numbers = [2, 7, 11, 15];
const target = 9;
const pairs = [];
for (let i = 0; i < numbers.length; i++) {
for (let j = i + 1; j < numbers.length; j++) {
if (numbers[i] + numbers[j] === target) {
pairs[pairs.length] = [numbers[i], numbers[j]];
}
}
}
console.log("Pairs that sum to " + target + ": " + pairs);
// Output: Pairs that sum to 9: 2,7
Merge two sorted arrays without using any built-in functions/methods.
const arr1 = [1, 3, 5, 7];
const arr2 = [2, 4, 6, 8];
const mergedArray = [];
let i = 0;
let j = 0;
while (i < arr1.length && j < arr2.length) {
if (arr1[i] < arr2[j]) {
mergedArray[mergedArray.length] = arr1[i];
i++;
} else {
mergedArray[mergedArray.length] = arr2[j];
j++;
}
}
while (i < arr1.length) {
mergedArray[mergedArray.length] = arr1[i];
i++;
}
while (j < arr2.length) {
mergedArray[mergedArray.length] = arr2[j];
j++;
}
console.log("Merged array: " + mergedArray);
// Output: Merged array: 1,2,3,4,5,6,7,8
Find the longest increasing subsequence in an array without using any built-in functions/methods.
const numbers = [10, 22, 9, 33, 21, 50, 41, 60, 80];
const lis = [];
for (let i = 0; i < numbers.length; i++) {
lis[i] = 1;
}
for (let i = 1; i < numbers.length; i++) {
for (let j = 0; j < i; j++) {
if (numbers[i] > numbers[j] && lis[i] < lis[j] + 1) {
lis[i] = lis[j] + 1;
}
}
}
let maxLis = 0;
for (let i = 0; i < lis.length; i++) {
if (lis[i] > maxLis) {
maxLis = lis[i];
}
}
console.log("Length of the longest increasing subsequence: " + maxLis);
// Output: Length of the longest increasing subsequence: 6
Trapping Rain Water Problem without using any built-in functions/methods.
const heights = [0, 1, 0, 2, 1, 0, 1, 3, 2, 1, 2, 1];
let totalWater = 0;
for (let i = 1; i < heights.length - 1; i++) {
let leftMax = 0;
for (let j = 0; j < i; j++) {
if (heights[j] > leftMax) {
leftMax = heights[j];
}
}
let rightMax = 0;
for (let j = i + 1; j < heights.length; j++) {
if (heights[j] > rightMax) {
rightMax = heights[j];
}
}
const minMax = leftMax < rightMax ? leftMax : rightMax;
totalWater += minMax > heights[i] ? minMax - heights[i] : 0;
console.log("Total trapped rainwater: " + totalWater);
// Output: Total trapped rainwater: 6
}
Reverse a string.
Check if a string is a palindrome.
Find the first non-repeating character in a string.
Find the longest palindrome in a string.
Check if two strings are anagrams.
Implement strstr() or indexOf().
Longest Common Prefix.
Count and say problem.
Group anagrams together from a list of strings.
Check if a string has balanced parentheses.
Reverse a linked list (iterative and recursive).
Detect a cycle in a linked list (Floyd’s Cycle Detection).
Find the middle element of a linked list.
Merge two sorted linked lists.
Remove N-th node from the end of a linked list.
Find the intersection point of two linked lists.
Detect and remove a loop in a linked list.
Flatten a linked list.
Rotate a linked list.
Clone a linked list with random pointers.
Implement a stack using arrays or linked lists.
Implement a queue using stacks.
Implement a stack that supports getMin() in constant time.
Next Greater Element in a stack.
Design a circular queue.
Evaluate postfix/prefix expressions.
Implement a LRU (Least Recently Used) Cache.
Check for balanced parentheses using a stack.
Sort a stack.
Find the largest rectangle in a histogram.
Inorder/Preorder/Postorder traversal of a binary tree (recursive and iterative).
Level order traversal of a binary tree.
Find the height of a binary tree.
Check if two trees are identical.
Find the diameter of a binary tree.
Check if a binary tree is a mirror of itself (symmetric).
Find the lowest common ancestor (LCA) of two nodes in a binary tree.
Convert a binary tree into its mirror tree.
Print the boundary nodes of a binary tree.
Find the path from the root to a given node in a binary tree.
Insert a node in a binary search tree.
Delete a node from a binary search tree.
Find the inorder successor/predecessor of a node in a BST.
Check if a binary tree is a binary search tree (BST).
Find the k-th smallest/largest element in a BST.
Convert a BST into a sorted doubly linked list.
Merge two binary search trees.
Check if there’s a pair with a given sum in a BST.
Construct a BST from a sorted array.
Find the range sum in a binary search tree.
Implement a min/max heap.
Find the k-th largest/smallest element in an array using a heap.
Merge k sorted arrays using a heap.
Find the median in a stream of integers.
Check if a binary tree is a heap.
Find the top K frequent elements in a stream of data.
Sort an array using heap sort.
Rearrange characters in a string such that no two adjacent characters are the same using a heap.
Depth First Search (DFS) and Breadth First Search (BFS).
Check if a graph is bipartite.
Detect a cycle in a directed/undirected graph.
Find the shortest path in an unweighted graph (BFS).
Dijkstra’s Algorithm for shortest path in a weighted graph.
Topological Sorting of a directed graph.
Find the strongly connected components in a graph (Kosaraju’s Algorithm).
Prim’s and Kruskal’s Algorithm for Minimum Spanning Tree (MST).
Flood Fill Algorithm.
Find if there’s a path between two nodes in a graph.
0/1 Knapsack problem.
Longest Common Subsequence.
Longest Increasing Subsequence.
Coin Change Problem.
Rod Cutting Problem.
Subset Sum Problem.
Edit Distance Problem.
Egg Dropping Problem.
Fibonacci number using dynamic programming.
Word Break Problem.
Find the majority element in an array (element that appears more than n/2 times).
Find the median of two sorted arrays.
Count inversions in an array.
Best time to buy and sell stock.
Reservoir sampling.
Find the minimum number of platforms required for a railway station.
K-th largest element in a stream.
Median of a stream of integers.
Find the longest consecutive sequence in an array.
Sliding window maximum.
List of GitHub Repositories to learn JavaScript
- 30 Days of JavaScript
- You Don’t Know JavaScript
- Wtfjs
- JavaScript30
- Clean Code JavaScript
- JavaScript Questions
- ES6 For Humans
- Javascript Algorithms
- Js Stack From Scratch
- 30 Seconds of Code
- Airbnb Js Style Guide
- Js The Right Way
- 33 Js Concepts
- Awesome JavaScript
- Modern Js CheatSheet
- Jstips
- Awesome JavaScript Projects
- Project Guidelines
- Nodebestpractices
- JavaScript Testing Best Practices
- JavaScript Interview Questions
- Must Watch JavaScript
List of Websites to learn JavaScript
- W3School
- MDN
- GeeksForGeeks
- DevDocs
- Programiz
- Freecodecamp
- Javatpoint
- Javascript.info
- Tutorialspoint
- Udemy
- YouTube
- Stackoverflow
List of Books to learn JavaScript
- Eloquent JavaScript
- You Don’t Know JS
- Effective JavaScript
- JavaScript: The Good Parts
- JavaScript: The Definitive Guide
- A Smarter Way to Learn JavaScript
- Programming JavaScript Applications
List of YouTube Channels to learn JavaScript
- Freecodecamp
- Code With Harry
- Programming With Mosh
- Hitesh Choudhary
- Clever Programmer
- JavaScript Mastery
- Traversy Media
- Yahoo Baba
- The New Boston
- LearnCode. academy
- Academind
- LearnWebCode
- Wes Bos
- WebDevMentors
- Codevolution
- Codecademy
- Daily Tuition
- WebDevSimplified
- Harshit Vashisth
- AniaKubow
List of Udemy Courses to learn JavaScript
- The Complete JavaScript Course 2021: From Zero to Expert!
- JavaScript - The Complete Guide 2021 (Beginner + Advanced)
- Modern JavaScript From The Beginning
- JavaScript Web Projects: 20 Projects to Build Your Portfolio
List of Games to learn JavaScript by playing
List of Blogs Sites to learn JavaScript
List of JavaScript Online Editors/Compilers
- Programiz JavaScript Online Compiler
- W3School JavaScript Online Editor
- Playcode
- JSFiddle
- One Complier
- Tutorialspoint Online JavaScript Editor
- myComplier
- JS.do
- Codingninjas Online JavaScript Compiler
- Codepen
- Replit
List of Twitter Users
List of LinkedIn Users
Contributing
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Acknowledgments
- Asabeneh - For his 30 Days of JavaScript challenge.
- JavaScript.info - For their comprehensive JavaScript tutorials.
- W3Schools - For their interactive JavaScript tutorials.
- MDN Web Docs - For their detailed JavaScript documentation.
- FreeCodeCamp - For their JavaScript tutorials and projects.
- Programiz - For their simple and easy-to-understand JavaScript tutorials.
- GeeksforGeeks - For their JavaScript articles and tutorials.
- DevDocs - For their JavaScript documentation.
- Codecademy - For their interactive JavaScript courses.
- Stack Overflow - For their vast collection of JavaScript questions and answers.
Connect with me
Support
If you like this learning repository and find it useful, consider buying me a coffee or sponsoring me through the GitHub Sponsor. Your support will help me to continue and bring more exciting projects. Thank you!
Show your support by 🌟 the repository.