Top 40 JavaScript Methods You Must Know!!
Tags: javascript, beginners, programming, webdev
Published: 2021-10-15 05:11:22

JavaScript is a programming language used to create web pages and mobile apps. If you have been studying Javascript for so long and still it looks scary to you,  probably you haven't learnt these methods yet. This article is for all javascript developers at any level. If you are looking for a specific method, feel free to jump and skip others. If you are familiar with javascript, I recommend you to read [ES6 The modern Javascript](https://zahab.tech/es6-learn-modern-javascript-part-1) to explore more about JS.

1.  [**Array**](#array)
2. [**String**](#string)
3. [**Objects**](#objects)
4. [**Numbers**](#numbers)
5. [**ES6**](#es6)


**If you are already familiar with the definition of the above topics, feel free to explore their methods only.**
##  Array
You may know that a variable can store only a value at a time, for example 
***var student = "jack"***, this is totally fine and we may use it many times while building a project, however, sometimes it is required to collect many values in a single variable like a list of students names, this is where we can use the Array concept.
Array is a single variable that store a list of values and each element is specified by a single index. 

 Array methods:

- **pop()**

The pop() method removes the last element of an array. 



```javascript
var students = [ 'Jack', 'James', 'Robert', 'John'];
 console.log(students);
 students.pop();
 console.log(students)
``` 

```text
Output: 
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Robert' ]

``` 

- **shift()**

The shift() method removes the first element from an array.

```javascript

 var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
   students.shift();
   console.log(students)
   
``` 
```text
Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'James', 'Robert', 'John' ]

``` 


- **push()**  

The push() method adds one or more elements to the end of an array.  


```javascript
 var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
   students.push('Zahab', 'Kakar');
   console.log(students)
   
``` 

```text
Output: 
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Robert', 'John', 'Zahab', 'Kakar' ]

``` 

- **unshift()**

The unshift method adds one or more elements to the beginning of an array.

```javascript
var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
   students.unshift('Zahab', 'Kakar');
   console.log(students);
``` 

```
Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Zahab', 'Kakar', 'Jack', 'James', 'Robert', 'John' ]
``` 



- **length**

The length returns the number of elements in an array.


```javascript
var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
var length = students.length;
   console.log(length)
``` 

```text
[ 'Jack', 'James', 'Robert', 'John' ]
4
``` 

- **splice()**

The splice() method is used to add new elements to an array.


```javascript
var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
students.splice(2, 1, "Zahab", "Kakar");
  console.log(students);
``` 

```text
Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Zahab', 'Kakar', 'John' ]

``` 
As we said before, this method is used to add elements into an array, however, we must indicate that where the new elements should be added. In the above example, 2 indicates the index number where the new elements should be placed and 1 shows the number of elements that should be deleted, as we mentioned 1 element should be deleted, we do not have the 'Robert' in the second array.


- **concat()**

The contact method is used to creates a new array by concatenating or merging existing arrays.

```javascript

var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);
var myFriends = ['Jennifer','Mary','Patricia']
  console.log(myFriends);
  
  var allNames =  students.concat(myFriends);  
  console.log(allNames)
  
``` 

```text
Output:
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'Jennifer', 'Mary', 'Patricia' ]
[ 'Jack', 'James', 'Rober', 'John', 'Jennifer', 'Mary', 'Patricia' ]

``` 
 - **slice()**

1.  This method slices out a part of an array starting from mentioned array element index.
2.  Slice can have two arguments, which indicate the starting and up to (but not including) the end argument.
3. This method also accept negative numbers.



```javascript
var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);

 var newStudent  = students.slice(3);  
  console.log(newStudent);
``` 

```text
Output:
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'John' ]

``` 

```javascript
var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);

 var newStudent  = students.slice(1,3);  
  console.log(newStudent);
  
``` 

```text
Output:
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'James', 'Rober' ]
``` 


```javascript
var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);

 var newStudent  = students.slice(-1);  
  console.log(newStudent);
  
``` 

```text
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'John' ]
``` 






## String

A JavaScript string stores a series of characters or a string is a collection of characters. A string can be any text inside double or single quotes.

- **toUpperCase()**

The toUpperCase method is used to convert a string to upper case.

```javascript
var str = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
 var newStr = str.toUpperCase()
 console.log(newStr)
``` 


```text
Output: 

LOREM IPSUM IS SIMPLY DUMMY TEXT OF THE PRINTING AND TYPESETTING INDUSTRY. 
``` 



- **toLowerCase()**

The to Lowercase is used to convert a string to lower case.


```javascript
var str = "LOREM IPSUM IS SIMPLY DUMMY TEXT OF THE PRINTING AND TYPESETTING INDUSTRY. "
 var newStr = str.toLowerCase()
 console.log(newStr)
``` 

```text
Output:
lorem ipsum is simply dummy text of the printing and typesetting industry. 
``` 

- **slice()**

This method is used to return the sliced part of a string, it takes one or two arguments that indicate the initial and end of the slice. The arguments can also be negative.

```javascript
var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"
var newStr = str.slice(-8, -1)
console.log(newStr);

``` 

```text
Output:

industr
 
``` 


- **substring()**


This method is used to return the sliced part of a string, however, it doesn't accept negative numbers as an argument.

```javascript
var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"
var newStr = str.substring(1, 6)
console.log(newStr);

``` 

```text
Output:

orem 
``` 



- **substr()**

This method is similar to slice, however, the second parameter indicates the length of the part that should be extracted.


```javascript

var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"
var newStr = str.substr(8, 13)
console.log(newStr);
``` 

```text
Output:

sum is simply

``` 

- **replace()**

The replace method is used to replace a part of a string with another string.
This method is case sensitive.


```javascript
var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"
var newStr = str.replace("is", "are")
console.log(newStr);

``` 

```text
Output:

lorem ipsum are simply dummy text of the printing and typesetting industry
``` 




- **concat()**

This method is used to concatenate two or more strings.


```javascript

var str1 = "Java";
var str2 = "Script";

var str = str1.concat(str2);
console.log(str)
```


```text
Output:
JavaScript

``` 
- **trim()**

This method is used to remove the spaces from both sides of the string.

```javascript
var str1 = "       JavaScript        ";
str2 = str1.trim();
console.log(str2);
``` 

```text
Output:

JavaScript
``` 
- **split()**

The split is used to convert a string to an array.
 

```javascript
var str = "JavaScript, is, nice"
var newStr = str.split(",")
console.log(newStr[0]);
``` 

```text
Output:

JavaScript
``` 
- **charCodeAt**

The charCodeAt returns the unicode of the character at a specified index in a string.

```javascript
var str = "JavaScript is nice"
var newStr = str.charCodeAt(str[1])
console.log(newStr);
``` 


```text
Output:

74
``` 

- **charAt()**

This method returns the character of a specific index in a string.

```javascript
var str = "JavaScript is nice"
var newStr = str.charAt(1)
console.log(newStr);
``` 

```text
Output:

a
``` 


- **padStart**

This method is used to add padding at the starting of a string.


```javascript
var str = "15"
var newStr = str.padStart(4, "3")
console.log(newStr);
``` 

```text
Output:

3315

``` 
- **padEnd**

It adds padding at the end of the string.

```javascript

var str = "15"
var newStr = str.padEnd(4, "3")
console.log(newStr);
``` 

```text
Output:

1533

``` 
- **length**

This method is used to return the length of a string.


```javascript
var str = "JavaScript is nice."
var newStr = str.length
console.log(newStr);
``` 

```text
Output:

19
``` 

## Objects

The Object is the JavaScript data type. It is used to store various keyed collections and each key can have a value.


- **keys()**
 
This method returns the keys of an object.


```javascript
const object1 = {
  name: 'John',
  age: 20,

};

console.log(Object.keys(object1));
``` 

```text
Output:

[ 'name', 'age' ]
``` 
- **values()**

This method returns the values of an object.

```javascript
const object1 = {
  name: 'John',
  age: 20,

};

console.log(Object.values(object1));
``` 

```text
Output:

[ 'John', 20 ]
``` 

- **create()**

This method is used to create an new object from existing object.

```javascript
const person = {
  name: "John",
  introduction: function() {
    console.log(`My name is ${this.name}`);
  }
};

const me = Object.create(person);

me.name = 'Robert'; 

me.introduction();
``` 

```text

Output:

My name is Robert

``` 
- **freeze()**

The Object.freeze() method freezes an object. This method will allow an object to be changed, freezing an object prevents changing, for example, adding new properties to it, removing existing properties from it. 

```javascript
const person = {
  name: "John",
  
};


Object.freeze(person);

person.name = "Robert";


console.log(person.name);
``` 

```text
Output:

John

``` 


- **assign()**

This method is used to copy the properties of one object to another object.

```javascript
const person = {
  name: "John",
  age : 20
};

const obj = {
  ishuman : true
}
Object.assign(person, obj);

console.log(person);
``` 

```text
Output:

{ name: 'John', age: 20, ishuman: true }

``` 

## Numbers

The number is the numeric data type of Javascript that stores a normal integer, floating-point values.


-  **toFixed()**

This method writes the number with a specified number of decimals and return its value as a string.

```javascript

var x = 9.656;
var newX = x.toFixed(0);
console.log(newX)
var newX = x.toFixed(2); 
console.log(newX)
var newX = x.toFixed(4);  
console.log(newX)
var newX = x.toFixed(6);  
console.log(newX)
console.log(typeof(newX))
``` 

```text
Output:
10
9.66
9.6560
9.656000
string
``` 

-  **toPrecision()**

This method is used to convert a number to a specified precision and return its value as a string.


```javascript
var x = 9.656;
var newX = x.toPrecision(2);
console.log(newX)
var newX = x.toPrecision(4);  
console.log(newX)
var newX = x.toPrecision(6);  
console.log(newX)
console.log(typeof(newX))
``` 

```text
Output:
9.7
9.656
9.65600
string

``` 
- **parseFloat()**

This method converts the function argument to a string first and returns a floating-point number.

```javascript

function addition(r) {
  return parseFloat(r) * 2.0;
}

console.log(addition(2))
console.log(addition("2"))
console.log(addition("3.3"))
``` 


```text
outPut:
4
4
6.6

``` 

- **Number()**

This method is used to convert the value of other data types to numbers.

```javascript
var x = true;
console.log(Number(x))
var x = false;
console.log(Number(x))
var x = "999";
console.log(Number(x))
``` 

```text

1
0
999

``` 
- **parseInt()**

This method converts the function argument to a string first and returns an integer.


```javascript
function addition(r) {
  return parseInt(r) * 2.0;
}

console.log(addition(2))
console.log(addition("2"))
console.log(addition("3.3"))
``` 

```text
Output:
4
4
6

``` 


## ES6
ES6 introduced many important methods in javascript that we will discuss in this article.
If you don't know the ES6  yet, I recommend you to have a look at [this](https://zahab.tech/es6-learn-modern-javascript-part-1)  article because, in the below paragraphs, we used a few topics which might look tough, however, they include their definition and example.  

- **map()**

This method takes an array, and performs a particular function on each of the elements of the array, and returns a new array. 


```javascript
var arr=[2.1,3.5,4.7]; 

var result= arr.map((num) => 2*num );  
console.log(result)
``` 

```text
Output:

[ 4.2, 7, 9.4 ]
``` 

- **every()**

This method is used to check whether elements in a given array satisfy a particular given condition or not. It returns true if all of the array elements satisfy the condition, otherwise, it return false


```javascript
const ages = [32, 33, 16, 40];


function checkAge(age) {
  return age > 18;
}

console.log(ages.every(checkAge))
``` 


```text
Output:

false
``` 

- **includes()**

This method is used to check a particular element exists in an array or not. it returns true if the element includes in the array.


```javascript
const ages = [32, 33, 16, 40];

console.log(ages.includes(33))
``` 

```text
Output:

true
``` 

- **for…of iterator**


The for ...of creates a loop over object and array.


```javascript

const ages = [33, 32, 16];

for (const element of ages) {
  console.log(element + "b");
}

``` 

```text

Output:

33b
32b
16b
``` 


- **Spread operator**

The spread operator is used to )take an array and expands it into individual elements. The ... indicates the spread operator.


```javascript
const ages = [33, 32, 16];

console.log(...ages)
``` 

```text
Output:

33 32 16
``` 

- **filter()**

This method creates a new array with all elements that pass the provided condition.


```javascript
const ages = [33, 32, 16];

console.log(ages.filter((age)=> age>20))
``` 


```text

Output:

[ 33, 32 ]

``` 

- **reduce()**

 This method is used to reduces an array to a value.


```javascript
const ages = [33, 32, 16];

const reducer = (first, second) => first + second;


console.log(ages.reduce(reducer))

``` 


```text

Output:

81

``` 

 That's all for now.
Thanks for reading, I hope you found this article useful.

Feel free to connect with me on [Twitter](https://twitter.com/KakarZahab) :)