Array Methods JavaScript - Cheat Sheet

Javascript array methods, push array, filter array, array map, array splice, array reverse, array concat, array shift, array unshift, array slice, array pop

Everything You Need to Know About JavaScript Array Methods

Web development or web programming gave birth to dynamic web applications. With the rise of the web, JavaScript has become one of the most important languages in today’s world. This **JavaScript Array **article will take you to the depths of array methods in JavaScript in the following sequence:

• Introduction to JavaScript
• Fundamentals of JavaScript
• JavaScript Array
• Difference between Array and Objects
• JavaScript Array Methods

Introduction to JavaScript

JavaScript is a high level, interpreted, programming language used to make web pages more interactive. It is a very powerful client-side scripting language which makes your webpage more lively and interactive.

It is a programming language that helps you to implement a complex and beautiful design on web pages. If you want your web page to look alive and do a lot more than just gawk at you, JavaScript is a must.

Fundamentals of JavaScript

If you are new to the language, you need to know some of the fundamentals of JavaScript that will help you start writing your code. The basics include:

• Variables
• Constants
• Data Types
• Objects
• Arrays
• Functions
• Conditional Statements
• Loops
• Switch case

JavaScript Array

An array is a data structure that contains a list of elements which store multiple values under a single variable.

To declare an array in JavaScript use the ‘let’ keyword with square brackets and enclose all the elements within them. The syntax is as follows:

let ListItems=[];
ListItems=['shoes','watch','bag'];

You can also declare it as:

let ListItems=['shoes','watch','bag'];

Difference between Array and Objects

JavaScript variables can be objects. Arrays are considered to be special kinds of objects. Because of this, you can have variables of different types in the same Array.

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myItems;

In JavaScript, arrays use numbered indexes. Whereas, objects are used as named indexes.

JavaScript Array Methods

The purpose of using an array is to store** multiple values** in a single entity of a declared variable. Arrays are used when we want to access elements in an orderly fashion using a single variable. One can store strings, boolean and numbers in a single array.

There are different JavaScript array methods in order to perform various tasks such as:
push() – It is easy to remove elements and add new elements while working with arrays. The push() method adds a new element to the end of an array. The return value is the new array length.
Example:

let listItems = ['bag','shoes','dress'];
console.log(listItems.push('watch'));

Output:

4

Push() doest not return the value that has been added to the array. It only returns the new length of the array.
**pop() – **The pop() method is used to remove the last element from an array. It returns the value that has been popped out.
Example:

let listItems = ['bag','shoes','dress'];
console.log(listItems.pop());

Output:

dress

Pop() returns the value that has been removed and not the array length like Push().
shift() – Shifting is similar to popping, working on the first element instead of the last. The shift() method is used to remove the first array element and shifts all other elements to a lower index. It will return you the string that has been shifted out.
Example:

let listItems = ['bag','shoes','dress'];
console.log(listItems.shift());

Output:

bag

Shift() works same as pop() but it returns the first element of the array instead of the last one.
unshift() – The unshift() method adds a new element at the beginning of an array and unshifts older elements. It is similar to Push() and returns the new array length.
**Example: **

let listItems = ['bag','shoes','dress','watch'];
console.log(listItems.unshift('phone'));

Output:

5

Unshift() will add the new element into the array and return the length of the new array.
concat() – The concat() method creates a new array by concatenating or merging existing arrays. It does not modify the existing array and always returns a new array.
Example:

let arr1 = ['red','blue','green'];
let arr2 = ['colors','spraypaint', 'brush'];
let newArr = arr1.concat(arr2);
console.log(newArr);

Output:

toString() – The toString() method is used to convert an array to a string of array values, separated by commas.
Example:

let colors = ['red','blue','green'];
console.log(colors.toString());

Output:

red,blue,green

join() – The join() method works same as toString(). It is used to join all array elements into a string, but in addition, you can specify the separator.
Example:

let colors = ['red','blue','green'];
console.log(colors.join("+"));

Output:

red+blue+green

reverse() – The reverse() method is used to reverse the order of the elements in an array. It will change the original array and swap the order of the elements.
Example:

let fruits = ['mango','apple','grapes'];
console.log(fruits.reverse());

Output:

sort() – The sort() method is used to sort an array alphabetically. This function sorts the values as string by default.
Example:

let fruits = ['mango','apple','grapes'];
console.log(fruits.sort());

Output:

slice() – The slice() method is used to slice out a piece of an array into a new array. It creates a new array without removing any elements from the source array. It will return the value that has been sliced out from the array.
Example:

let colors = ['red','blue','green','yellow','orange'];
console.log(colors.slice(1,3));

Output:

These were some of the most commonly used JavaScript array methods. With this, we have come to the end of our article. I hope you understood how array methods are used in JavaScript.

JavaScript Array Methods – In this tutorial we are going to show you the daily useful and important JavaScript Array Methods with examples. Javascript array methods or functions, to help write clean code with less effort.

JavaScript Array Methods – In this tutorial we are going to show you the daily useful and important JavaScript Array Methods with examples. Javascript array methods or functions, to help write clean code with less effort.

In this tutorial, we will demonstrate daily useful 18 array methods of javascript with examples.

JavaScript: Array Methods

The basic daily useful array methods in javascript are the following:

• Array pop() Method
• Array push() Method
• Array toString() Method
• Array join() Method
• Array splice() Method
• Array sort() Method
• Array shift() Method
• Array unshift() Method
• Array reverse() Method
• Array concat() Method
• Array slice() Method
• Array filter() Method
• Array find() Method
• Array forEach() Method
• Array map() Method
• Array reduce() Method
• Array some() Method
• Array every() Method

1. Array pop() Method

The “pop()” method is used when you want to remove the last element of an array.

The method returns the removed items value.

Ex

  var lang = ["Python", "Vuejs", "Nodejs", "javascript"];
  lang.pop();   

Result of the above example is:
Output

 // New array: Python,Vuejs,Nodejs

2. Array push() Method

The “push()” method is used to add a new element to the end of an array.

Ex:

   var lang = ["Python", "Vuejs", "Nodejs", "javascript"];
    lang.push("angular");   

Result of the above example is:

Output

 // New array: Python,Vuejs,Nodejs,javascript,angular

3. Array toString() Method

The “toString()” method is used to convert array to string.

Ex:-

    var lang = ["Python", "Vuejs", "Nodejs", "javascript"];
    lang.toString();    

Result of the above example is:

Python,Vuejs,Nodejs,javascript

Javascript – Remove Duplicates from Array

4. Array join() Method

The join() used to join the elements of an array into a string.
The “join()” method puts all the elements of the array into a string list. This method difference from “toString()” method.

Ex:

    var lang = ["Python", "Vuejs", "Nodejs", "javascript"];
     lang.join("-");

     var x = document.getElementById("demo");
     x.innerHTML = lang.join("-");

Result of the above example is:

// output

Python-Vuejs-Nodejs-javascript

5. Array splice() Method

The “splice()” method can add and remove items form an array.

syntax

array.splice(index, howMany, [element1][, …, elementN]);

• index − Index param specifies where a new item should be inserted.
• howMany − An integer indicating the number of old array elements to remove.
• If howMany set to 0, no items will be removed in array list.

Ex:

    var lang = ["Python", "Vuejs", "Nodejs", "javascript"];
    lang.splice(2, 0, "Mongodb", "Rust"); 

Result of the above example is:

// Output

new array: Python,Vuejs,Mongodb,Rust,Nodejs,javascript

6. Array sort() Method

This method either alphabetic or numeric sorts an array.

Ex:

    var lang = ["Python", "Vuejs", "Nodejs", "javascript"];
    lang.sort();

Result of the above example is:

// Outuput

array: Nodejs,Python,Vuejs,javascript

7. Array shift() Method

This method removes the first element of an array. like the “pop()” method, removes an element from an array.

Ex:-

  var lang = ["Python", "Vuejs", "Nodejs", "javascript"];
  lang.shift(); 

Result of the above example is:

// Output

new array: Vuejs,Nodejs,javascript

8. Array unshift() Method

The unshift() method adds a new element to the beginning of an array.

Ex:

    var lang = ["Python", "Vuejs", "Nodejs", "javascript"];
    lang.unshift("Rust");   

Result of the above example is:

//Output

New array: Rust,Python,Vuejs,Nodejs,javascript

9. Array reverse() Method

The method is used for reverses the order of the elements in an array.

Ex:

    var lang = ["Python", "Vuejs", "Nodejs", "javascript"];
    lang.reverse();    

Result of the above example is:

// Outuput

array: javascript,Nodejs,Vuejs,Python

10. Array concat() Method

The “concat()” method joins two or more arrays and makes a new one.

Ex:

    var lang = ["Python", "Vuejs", "Nodejs", "javascript"];
    var newlang = ["Angular", "Rust"];      
    var join = lang.concat(newlang);    

Result of the above example is:

// Output

New array: Python,Vuejs,Nodejs,javascript,Angular,Rust

11. Array slice() Method

The method is used to selected elements in an array and makes a new one. It can take one or two arguments.

Ex:

    var lang = ["Python", "Vuejs", "Nodejs", "javascript"];
    var cars = lang.slice(1, 4);  

Result of the above example is:

//Output

New Array : Vuejs,Nodejs,javascript

12. Array filter() Method

This filter method is used to filter the array, according our conditions.

Ex:

var number = [10, 5, 16, 4, 6, 7, 12, 18, 20];

function isCheck(value) {
  return value > 9;
}
 
var filter = number.filter(isCheck);
document.getElementById("demo").innerHTML = filter;

Result of the above example is:

Output

 //new array: 10,16,12,18,20

In this example the function filter() creates a new array. Those elements that satisfy the condition checked by isCheck() function.

13. Array find() Method

This find method is used find the first element of an array.

Ex:

var number = [10, 5, 16, 4, 6, 7, 12, 18, 20];

function isCheck(value) {
  return value >= 9;
}
 
var find = number.find(isCheck);
document.getElementById("demo").innerHTML = find;

Result of the above example is:

Output

// 10

14. Array forEach() Method

The JavaScript Array Method – forEach () imposes a specific function for each item in a particular array individually:

Ex:

var num = [10, 5, 16, 4, 6, 7, 12, 18, 20];
 num.forEach(function(item) {
    document.writeln(item);
 });

Result of the above example is:

Output

 // return 
10 5 16 4 6 7 12 18 20

15. Array map() Method

The map () method in JavaScript creates an array by calling a specific function on each element in the original array.

Ex:

var num = [4, 9, 16, 25];
var x = num.map(Math.sqrt);
document.write(x);

Result of the above example is:

Output

 // return   
 2,3,4,5 

16. Array reduce() Method

The javascript array reduce() method reduces the array to a single value.

Ex:

var numArr = [
        {  name: 'a', num: 50},
        {  name: 'b', num: 50},
        {  name: 'c', num: 75},
        {  name: 'd', num: 35},
        {  name: 'e', num: 25 },
        {  name: 'f', num: 40 },
    ];

    var sum = numArr.reduce(function (total, currentValue) {
        return total + currentValue.num;
    }, 0);

    document.write( "javascript- Sum of the array value is :- " + sum );

Result of the above example is:

Output

 // return  
 javascript- Sum of the array value is :- 275

17. Array some() Method

The javascript array some() method checks whether at least one element of the array matches the given predicate. if none of the array elements match the predicate, then it will return false

Ex:

var nums = [10, 12, 12, 20, 25];

function checkNumber(num) {
  return num >= 25;
}

document.write(nums.some(checkNumber));

Result of the above example is:

Output

 // return   
 True

18. Array every() Method

The javascript array every() method checks whether all elements of the array match the predicate:

Ex:

var nums = [10, 12, 12, 20, 25];

function checkNumber(num) {
  return num >= 3;
}

document.write(nums.every(checkNumber));

Result of the above example is:

 // return   
 true