8 Useful Javascript Array Methods✨

Hello guys, today we're going to explore the most used array methods with javascript

Such as (push, shift, filter, reduce, and more..)

I assume you know that array is a data type used for storing lists of almost any other data types such as(Objects, Strings, Numbers, etc...)

So let's begin with the first method

1-Push()

push is straightforward it used to add a new element to the end of the array.

Let's give it a try.

Start with declaring the array:

let arr = [  1,  2,  3  ];

here we got an array with numbers, now let's add another element to the end of the array with push

then print to the console to see what happened.

arry.push(4)

console.log(arry)

if you following along with me you're going to see the output

 //[  1,  2,  3,  4  ]

easy right?

Now let's move to the second method.

2-Pop()

pop is easy also, it removes the last element in the array.

with the same array, we declared before, after adding the new element, let's remove it.

you remember that push added the element at end of the array ha!

then with pop() as we said it removes the last element which is at the end of the array.

let arr = [ 1,  2,  3,  4 ];

arry.pop()

console.log(arry)

// output [ 1, 2, 3 ];

3- shift()

Shift is the opposite of pop, it removes the first element in the array.

let arr = [ 1,  2,  3,  4 ];

arry.shift()

console.log(arry)

// [  2,   3,  4 ];

4 - unshift()

it adds new element at the beginning of array.

let arr = [ 1,  2,  3, ];

arry.unshift(4)

console.log(arry)

// [  4,  1,   2,   3  ];

now let's move to another set of methods which so useful for work with javascript arrays.

5-filter()

filter loops through the array and return another array with one or many elements match the criteria.

what does this mean!

let me tell you an example

imagine you got an array of users,

and function responsible to find and return users that have the same name passed to it.

let users = [ { name: 'ahmed',  age: 20 },  { name: 'khalid',  age: 27}];

function getUsers(name){
//find the users with name
}

so you got variable with requested name,

now we can use filter to find these user/s :

let users = [ { name: 'ahmed',  age: 20 },  { name: 'khalid',  age: 27}];

function getUsers( name ){
  let requestedUsers = users.filter((user) => { 
     return user.name === name
  })
console.log(requestedUsers) 
// output  [ { name: 'ahmed',  age: 20 } ]
}

what is going on here is we use filter to loop throughout the whole array and find any user got name equal to the name passed to the function then return an array with element/s that match the criteria.

if you got this function the next two functions the almost the same.

6-find()

The one and the only difference between this and filter() is instead of looping through the whole array and return an array with requested element/s,

it loops until it finds the first element matched the criteria then it stops the loop and returns the element only
-not inside an array.-

7-findIndex()

Same as find(), loop until it found the first element matched the criteria but instead of returning the element itself returns the index of the element.

I'm not laying at you as I said they almost the same right?😉

8-map()

It loops through the array but here it returns a new array with the needed value only from the old one.

hold one and let me explain.

Again with our user's array but here I added id fields to each user for the sake of example:

let users = [  { id: 1,  name: 'ahmed',  age: 20 },   { id: 2, name: 'khalid',  age: 27}  ];

Imagine you need to send this array to users but you don't want to expose the ids and ages of users or the users interested only in names.
so desired output would be [ "ahmed", "khalid" ].

here come the main roles of the map function:

  let names = users.map( ( user )=>{ 
     return user.name 
  })
console.log( names ) 
// output  [ " ahmed ",   "khalid"  ]

Got it?

it returns a new array from the original one -without touch the original-, but it only returns the desired fields from the original array.
you need names of users so got the names only in a new array

9-reduce()

reduce is different from anyone, it comes with terminology such as reducer & accumulator.

-The reducer is what action or the operation will perform in order to get to one value at the end.

-The accumulator is the value that we end with, in other words, it's what we depend on for the next iteration.

please don't give that face and let's talk code instead.🙃

imagine you have this array of books with names and the total sold items of each one and you need to get the total sold items overall.

const books = [
   {title:'awesome book', sold:8},
   {title:'new book', sold:12},
   {title:'great book', sold:4},
]

let me write the function and I will describe it to you

 const totalSold = books.reduce((accu, book) => { return accu + book.sold}, 0)

the accu parameter changes to the returned value of the previous iteration, but when we start the function there's no previous iteration,
do you notice the 0, its the initial value for first execution -it's not a must -

So the returned value from the first iteration would be 8

0 + 8 The initial value + sold items for awesome book

In the next iteration, the accu parameter changed to the returned value from the previous iteration which is 8
so the result of the iteration going to be 20

8 + 12 the accu parameter + sold items for new book

In the last iteration, the accu changed to 20 which is the returned value from the previous iteration,
so the result of the last iteration going to be 24

20 + 4 the accu parameter + sold items for great book.

Finally, there's no iteration so the returned value from the reduce function would be the last returned value which is 24.

I hope that was good enough to wrap your head about reduce.

that's was a summary for most used javascript array methods
if you want an advanced article please let me know in the comments.

Thank you, and have a productive day❤️