DEV Community

loading...
Cover image for Javascript array methods part 2

Javascript array methods part 2

Ahmed Ibrahim
Frontend Engineer
・3 min read

1_AoOWn4UdPyuixXtkLQsQXA.png

Hello everyone in this article, we will know some of Javascript Array Methods.

Before, we learned about push, unshift, splice.

Javascript array methods part 1

slice method

slice method is used for get some elements form an array,
but not remove any item from the old array.

For example:

let arr = ["a", "b", "c", "d"];

alert( arr.slice(1, 3) ); // b,c (copy from 1 to 3)

alert( arr.slice(-2) ); // c,d (copy from -2 till the end)
Enter fullscreen mode Exit fullscreen mode

negative values that get values from the end.

concat method

The method arr.concat creates a new array that includes values from other arrays and additional items.

arr.concat(arg1, arg2...)
Enter fullscreen mode Exit fullscreen mode

For Example:

let arr = ['a', 'b'];

// create an array from: arr and ['c','d']
alert( arr.concat(['c', 'd']) ); // a,b,c,d

// create an array from: arr and ['c','d'] and ['e','f']
alert( arr.concat(['c','d'],  ['e','f']) ); // a,b,c,d,e,f

// create an array from: arr and ['c','d'], then add values 'e' and 'f'
alert( arr.concat(['c','d'], 'e', 'f') ); // a,b,c,d,e,f

Enter fullscreen mode Exit fullscreen mode

Iterate forEach method

The arr.forEach method that executes a function for every item in arr.

The Syntax:

arr.forEach(function(item, index, array) {
  // ... do something with item
});
Enter fullscreen mode Exit fullscreen mode

For Example, we can alert every item in an array.

let arr = [1,2,3];
arr.forEach(function(item){
alert(item); // 1 , 2 , 3
});

Enter fullscreen mode Exit fullscreen mode

You can do anything with item. For example, you can make a filter for array elements.

let arr = [1,2,3],
secondArr = [];
arr.forEach(function(item){
if(item >= 2){
secondArr.push(item);
}
});
alert(secondArr); // 2,3

Enter fullscreen mode Exit fullscreen mode

Searching in array

let's cover all method that search in an array.

indexOf, lastIndexOf and includes

The methods arr.indexOf, arr.lastIndexOf and arr.includes have the same syntax.

The Syntax:

  • arr.indexOf(item, from); find item starting from the index from;
  • arr.lastIndexOf(item, from) – same, but looks for from right to left.
  • arr.includes(item, from) – looks for item starting from index from, returns true if found.
let arr = [1,2,3,4,5];

arr.indexOf(4, 1); // returns 3 is the index of number 4
arr.lastIndexOf(2) // returns 1 is the index of number 2
arr.includes(5) // returns true
arr.includes(10) // returns false
Enter fullscreen mode Exit fullscreen mode

find and findIndex

If we have an array and we need to find any item with the specific condition.

For Example:
we have an array like this

let arr = [
{
name: 'Ahmed',
age: 21
},
{
name: 'Mohamed',
age: 25
},
{
name: 'Mahmoud',
age: 23
}
];
Enter fullscreen mode Exit fullscreen mode

and, we need to get the object have an age equal 21.

let theObject = arr.find(function(item){
return item.age === 21;
});
console.log(theObject); // {name:'Ahmed', age:21}

Enter fullscreen mode Exit fullscreen mode

The arr.findIndex method is essentially the same, but it returns the index where the element was found instead of the element itself and -1 is returned when nothing is found.

filter method

we use arr.filter method to get an array from another array with specific condition.

let arr = [
{
name: 'Ahmed',
age: 21
},
{
name: 'Mohamed',
age: 25
},
{
name: 'Mahmoud',
age: 23
}
];

let newArr = arr.filter(function(item){
return item.age >= 23;
});
console.log(newArr ) // [{name:'Mahmoud', age:23}, {name:'Mohamed', age:25}];
Enter fullscreen mode Exit fullscreen mode


If you need to read the other parts of this article follow us:

Facebook Page :
Semantic Code

Hashnode :
Semantic Code

Dev.to :
Ahmed Ibrahim

Discussion (0)