DEV Community

Cover image for      
Top 40 JavaScript Methods You Must Know!!
Zahab Kakar
Zahab Kakar

Posted on • Originally published at zahab.tech

Top 40 JavaScript Methods You Must Know!!

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 to explore more about JS.

  1. Array
  2. String
  3. Objects
  4. Numbers
  5. 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.

var students = [ 'Jack', 'James', 'Robert', 'John'];
 console.log(students);
 students.pop();
 console.log(students)
Enter fullscreen mode Exit fullscreen mode
Output: 
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Robert' ]

Enter fullscreen mode Exit fullscreen mode
  • shift()

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


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

Enter fullscreen mode Exit fullscreen mode
Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'James', 'Robert', 'John' ]

Enter fullscreen mode Exit fullscreen mode
  • push()

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

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

Enter fullscreen mode Exit fullscreen mode
Output: 
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Robert', 'John', 'Zahab', 'Kakar' ]

Enter fullscreen mode Exit fullscreen mode
  • unshift()

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

var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
   students.unshift('Zahab', 'Kakar');
   console.log(students);
Enter fullscreen mode Exit fullscreen mode
Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Zahab', 'Kakar', 'Jack', 'James', 'Robert', 'John' ]
Enter fullscreen mode Exit fullscreen mode
  • length

The length returns the number of elements in an array.

var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
var length = students.length;
   console.log(length)
Enter fullscreen mode Exit fullscreen mode
[ 'Jack', 'James', 'Robert', 'John' ]
4
Enter fullscreen mode Exit fullscreen mode
  • splice()

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

var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
students.splice(2, 1, "Zahab", "Kakar");
  console.log(students);
Enter fullscreen mode Exit fullscreen mode
Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Zahab', 'Kakar', 'John' ]

Enter fullscreen mode Exit fullscreen mode

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.


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)

Enter fullscreen mode Exit fullscreen mode
Output:
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'Jennifer', 'Mary', 'Patricia' ]
[ 'Jack', 'James', 'Rober', 'John', 'Jennifer', 'Mary', 'Patricia' ]

Enter fullscreen mode Exit fullscreen mode
  • 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.
var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);

 var newStudent  = students.slice(3);  
  console.log(newStudent);
Enter fullscreen mode Exit fullscreen mode
Output:
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'John' ]

Enter fullscreen mode Exit fullscreen mode
var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);

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

Enter fullscreen mode Exit fullscreen mode
Output:
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'James', 'Rober' ]
Enter fullscreen mode Exit fullscreen mode
var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);

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

Enter fullscreen mode Exit fullscreen mode
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'John' ]
Enter fullscreen mode Exit fullscreen mode

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.

var str = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
 var newStr = str.toUpperCase()
 console.log(newStr)
Enter fullscreen mode Exit fullscreen mode
Output: 

LOREM IPSUM IS SIMPLY DUMMY TEXT OF THE PRINTING AND TYPESETTING INDUSTRY. 
Enter fullscreen mode Exit fullscreen mode
  • toLowerCase()

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

var str = "LOREM IPSUM IS SIMPLY DUMMY TEXT OF THE PRINTING AND TYPESETTING INDUSTRY. "
 var newStr = str.toLowerCase()
 console.log(newStr)
Enter fullscreen mode Exit fullscreen mode
Output:
lorem ipsum is simply dummy text of the printing and typesetting industry. 
Enter fullscreen mode Exit fullscreen mode
  • 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.

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

Enter fullscreen mode Exit fullscreen mode
Output:

industr

Enter fullscreen mode Exit fullscreen mode
  • substring()

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

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

Enter fullscreen mode Exit fullscreen mode
Output:

orem 
Enter fullscreen mode Exit fullscreen mode
  • substr()

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


var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"
var newStr = str.substr(8, 13)
console.log(newStr);
Enter fullscreen mode Exit fullscreen mode
Output:

sum is simply

Enter fullscreen mode Exit fullscreen mode
  • replace()

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

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

Enter fullscreen mode Exit fullscreen mode
Output:

lorem ipsum are simply dummy text of the printing and typesetting industry
Enter fullscreen mode Exit fullscreen mode
  • concat()

This method is used to concatenate two or more strings.


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

var str = str1.concat(str2);
console.log(str)
Enter fullscreen mode Exit fullscreen mode
Output:
JavaScript

Enter fullscreen mode Exit fullscreen mode
  • trim()

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

var str1 = "       JavaScript        ";
str2 = str1.trim();
console.log(str2);
Enter fullscreen mode Exit fullscreen mode
Output:

JavaScript
Enter fullscreen mode Exit fullscreen mode
  • split()

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

var str = "JavaScript, is, nice"
var newStr = str.split(",")
console.log(newStr[0]);
Enter fullscreen mode Exit fullscreen mode
Output:

JavaScript
Enter fullscreen mode Exit fullscreen mode
  • charCodeAt

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

var str = "JavaScript is nice"
var newStr = str.charCodeAt(str[1])
console.log(newStr);
Enter fullscreen mode Exit fullscreen mode
Output:

74
Enter fullscreen mode Exit fullscreen mode
  • charAt()

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

var str = "JavaScript is nice"
var newStr = str.charAt(1)
console.log(newStr);
Enter fullscreen mode Exit fullscreen mode
Output:

a
Enter fullscreen mode Exit fullscreen mode
  • padStart

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

var str = "15"
var newStr = str.padStart(4, "3")
console.log(newStr);
Enter fullscreen mode Exit fullscreen mode
Output:

3315

Enter fullscreen mode Exit fullscreen mode
  • padEnd

It adds padding at the end of the string.


var str = "15"
var newStr = str.padEnd(4, "3")
console.log(newStr);
Enter fullscreen mode Exit fullscreen mode
Output:

1533

Enter fullscreen mode Exit fullscreen mode
  • length

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

var str = "JavaScript is nice."
var newStr = str.length
console.log(newStr);
Enter fullscreen mode Exit fullscreen mode
Output:

19
Enter fullscreen mode Exit fullscreen mode

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.

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

};

console.log(Object.keys(object1));
Enter fullscreen mode Exit fullscreen mode
Output:

[ 'name', 'age' ]
Enter fullscreen mode Exit fullscreen mode
  • values()

This method returns the values of an object.

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

};

console.log(Object.values(object1));
Enter fullscreen mode Exit fullscreen mode
Output:

[ 'John', 20 ]
Enter fullscreen mode Exit fullscreen mode
  • create()

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

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

const me = Object.create(person);

me.name = 'Robert'; 

me.introduction();
Enter fullscreen mode Exit fullscreen mode

Output:

My name is Robert

Enter fullscreen mode Exit fullscreen mode
  • 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.

const person = {
  name: "John",

};


Object.freeze(person);

person.name = "Robert";


console.log(person.name);
Enter fullscreen mode Exit fullscreen mode
Output:

John

Enter fullscreen mode Exit fullscreen mode
  • assign()

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

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

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

console.log(person);
Enter fullscreen mode Exit fullscreen mode
Output:

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

Enter fullscreen mode Exit fullscreen mode

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.


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))
Enter fullscreen mode Exit fullscreen mode
Output:
10
9.66
9.6560
9.656000
string
Enter fullscreen mode Exit fullscreen mode
  • toPrecision()

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

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))
Enter fullscreen mode Exit fullscreen mode
Output:
9.7
9.656
9.65600
string

Enter fullscreen mode Exit fullscreen mode
  • parseFloat()

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


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

console.log(addition(2))
console.log(addition("2"))
console.log(addition("3.3"))
Enter fullscreen mode Exit fullscreen mode
outPut:
4
4
6.6

Enter fullscreen mode Exit fullscreen mode
  • Number()

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

var x = true;
console.log(Number(x))
var x = false;
console.log(Number(x))
var x = "999";
console.log(Number(x))
Enter fullscreen mode Exit fullscreen mode

1
0
999

Enter fullscreen mode Exit fullscreen mode
  • parseInt()

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

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

console.log(addition(2))
console.log(addition("2"))
console.log(addition("3.3"))
Enter fullscreen mode Exit fullscreen mode
Output:
4
4
6

Enter fullscreen mode Exit fullscreen mode

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

var arr=[2.1,3.5,4.7]; 

var result= arr.map((num) => 2*num );  
console.log(result)
Enter fullscreen mode Exit fullscreen mode
Output:

[ 4.2, 7, 9.4 ]
Enter fullscreen mode Exit fullscreen mode
  • 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

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


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

console.log(ages.every(checkAge))
Enter fullscreen mode Exit fullscreen mode
Output:

false
Enter fullscreen mode Exit fullscreen mode
  • 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.

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

console.log(ages.includes(33))
Enter fullscreen mode Exit fullscreen mode
Output:

true
Enter fullscreen mode Exit fullscreen mode
  • for…of iterator

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


const ages = [33, 32, 16];

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

Enter fullscreen mode Exit fullscreen mode

Output:

33b
32b
16b
Enter fullscreen mode Exit fullscreen mode
  • Spread operator

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

const ages = [33, 32, 16];

console.log(...ages)
Enter fullscreen mode Exit fullscreen mode
Output:

33 32 16
Enter fullscreen mode Exit fullscreen mode
  • filter()

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

const ages = [33, 32, 16];

console.log(ages.filter((age)=> age>20))
Enter fullscreen mode Exit fullscreen mode

Output:

[ 33, 32 ]

Enter fullscreen mode Exit fullscreen mode
  • reduce()

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

const ages = [33, 32, 16];

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


console.log(ages.reduce(reducer))

Enter fullscreen mode Exit fullscreen mode

Output:

81

Enter fullscreen mode Exit fullscreen mode

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

Feel free to connect with me on Twitter :)

Discussion (0)