As a JavaScript developer, you will frequently encounter arrays. Arrays are most familiar data structure in JavaScript, and its provide many functionality for data manipulation. In this article, we will discuss some of the most commonly used array methods in JavaScript and provide examples of how to use them.
1) push()
The push() method helps to adds one or more elements to the end of given array. It takes those elements as input arguments.
Here’s an example:
|
1 2 3 4 |
const fruits = ['apple', 'banana']; fruits.push('orange'); console.log(fruits); // Output: ['apple', 'banana', 'orange'] |
In this example, we have an array of fruits and we use the push method to add the string ‘orange’ to the end of the array.
2) pop()
The pop() method helps to delete the last index element from an array. Also it will return the deleted value. No input arguments required for this method.
Here’s an example:
|
1 2 3 4 |
const fruits = ['apple', 'banana', 'orange']; fruits.pop(); console.log(fruits); // Output: ['apple', 'banana'] |
In this example, we have an array of fruits and we use the pop method to remove the last element (‘orange’) from the array.
3) shift()
The shift() method helps to remove the first element from given array, and return it. It does not have any input arguments input.
Here’s an example:
|
1 2 3 4 |
const fruits = ['apple', 'banana', 'orange']; fruits.shift(); console.log(fruits); // Output: ['banana', 'orange'] |
In this example, we have an array of fruits and we use the shift method to remove the first element (‘apple’) from the array.
4) unshift()
The unshift() method helps to adds one or more elements to the starting index of given array. It takes one or more input arguments, which are the elements to be added to the starting of the given array.
Here’s an example:
|
1 2 3 4 5 |
const fruits = ['banana', 'orange']; fruits.unshift('apple'); console.log(fruits); // Output: ['apple', 'banana', 'orange'] |
In this example, we have an array of fruits and we use the unshift method to add the string ‘apple’ to the beginning of the array.
5) slice()
The slice() method is used to extract a particular section from given array and return a new array. It takes two input arguments: the index of the first element to be included, and the last one.
Here’s an example:
|
1 2 3 4 5 |
const numbers = [1, 2, 3, 4, 5]; const slicedNumbers = numbers.slice(1, 4); console.log(slicedNumbers); // Output: [2, 3, 4] |
In this example, we have an array of numbers and we use the slice method to extract a section of the array from index 1 to index 4 (exclusive).
6) splice()
The splice() method helps to add and delete elements from given array. It takes three input arguments: the starting index, the number of elements to remove (if any), and the elements to add (if any).
Here’s an example:
|
1 2 3 4 5 |
const fruits = ['apple', 'banana', 'orange', 'grape']; fruits.splice(1, 2, 'pineapple', 'kiwi'); console.log(fruits); // Output: ['apple', 'pineapple', 'kiwi', 'grape'] |
In this example, we have an array of fruits and we use the splice method to remove two elements (‘banana’ and ‘orange’) starting from index 1 and add two elements (‘pineapple’ and ‘kiwi’) in their place.
7) concat()
The concat() method is used to merge two or more arrays into a new array It takes one or more array variables as input arguments.
Here’s an example:
|
1 2 3 4 5 6 7 8 |
const fruits = ['apple', 'banana']; const vegetables = ['carrot', 'broccoli']; const fruitsAndVegetables = fruits.concat(vegetables); console.log(fruitsAndVegetables); // Output: ['apple', 'banana', 'carrot', 'broccoli'] |
In this example, we have two arrays (fruits and vegetables) and we use the concat method to merge them into a new array (fruitsAndVegetables).
8) indexOf()
The indexOf() method is used to find the index of an element in an array It requires one argument, which is the text you want to find..
Here’s an example:
|
1 2 3 4 5 |
const fruits = ['apple', 'banana', 'orange']; const index = fruits.indexOf('banana'); console.log(index); // Output: 1 |
In this example, we have an array of fruits and we use the indexOf method to find the index of the element ‘banana’.
9) forEach()
The forEach() method is used to loop through the elements of an array and perform a function on each element. It takes one argument, which is a function that takes the current element as an argument.
Here’s an example:
|
1 2 3 4 5 6 |
const numbers = [1, 2, 3, 4, 5]; numbers.forEach((number) => { console.log(number * 25); }); // Output: 25 50 75 100 125 |
In this example, we have an array of numbers and we use the forEach method to loop through each number and log its value multiplied by 2 to the console.
10) map()
The map() method is used to loop through the elements of an array and create a new array with the results of a function performed on each element. It takes one argument, which is a function that takes the current element as an argument.
Here’s an example:
|
1 2 3 4 5 6 |
const numbers = [1, 2, 3, 4, 5]; const doubledNumbers = numbers.map((number) => { return number * 25; }); console.log(doubledNumbers); // Output: [ 25, 50, 75, 100, 125 ] |
In this example, we have an array of numbers and we use the map method to loop through each number and create a new array with each number multiplied by 2.
Several array methods are commonly used in JavaScript. By mastering these methods, you will be able to manipulate arrays with ease and write more efficient and effective code.
