Array Methods You Must Know

Hey there , in this article we would be get to know about some array methods in the javascript, how we can take use of these functions and try to learn about these with the help of basic examples.
Methods to be covered in this article -
1. push() and pop()
2. shift() and unshift()
3. map()
4. filter()
5. reduce()
6. foreach()

What is Array?

The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name.

• JavaScript arrays are resizable and can contain a mix of different data types.

• JavaScript array-copy operations create shallow copies. (All standard built-in copy operations with any JavaScript objects create shallow copies, rather than deep copies).

1. Array.prototype.push()

The push() method of Array instances adds the specified elements to the end of an array and returns the new length of the array.

The push() method appends values to an array.

Array.prototype.unshift() has similar behavior to push(), but applied to the start of an array.

The push() method is a mutating method. It changes the length and the content of this.

2. Array.prototype.pop()

The pop() method of Array instances removes the last element from an array and returns that element. This method changes the length of the array.

If you call pop() on an empty array, it returns undefined.

Array.prototype.shift() has similar behavior to pop(), but applied to the first element in an array.

3. Array.prototype.shift()

The shift() method of Array instances removes the first element from an array and returns that removed element. This method changes the length of the array.

The shift() method shifts all values to the left by 1 and decrements the length by 1, resulting in the first element being removed.

4. Array.prototype.unshift()

The unshift() method of Array instances adds the specified elements to the beginning of an array and returns the new length of the array.

The unshift() method inserts the given values to the beginning of an array-like object.

5. Array.prototype.map()

The map() method of Array instances creates a new array populated with the results of calling a provided function on every element in the calling array.

It takes the callback function as the parameter . A function to execute for each element of the array and then the returned value is added as a single element in the new array.

The callback function can take three parameters -
1. element :- The current element being processed in the array.

2. index :- he index of the current element being processed in the array.

3. array :- The array map() was called upon.

It returns the new array with each element being the result of the callback function.

6. Array.prototype.filter()

The filter() method creates a new array with all elements that pass the test implemented by a provided function. It does not modify the given array .

In the given example , we have the array named words with some strings in it. After that we use the filter function, which is the high order function which takes some other function as the input and returns the new array which satisfy the given condition.
Here in this example, all the string having the length > 6 will return true and stored in the new array which is return by the filter function after the loop completion.

7. Array.prototype.reduce()

The reduce() function in JavaScript is a higher-order method that iloop over an array to reduce it to a single value.

It applies a callback function to each element, using the return value from the previous iteration as the accumulator for the next. The final accumulated value is returned.

It takes two values as the parameter , callback fnc and the result initial value. With the help of the above example we can se that initialvalue of the accumulator is 10. The function loop over the array sum the accumulator and currentValue and finally return the final value.

8. Array.prototype.forEach()

The forEach() method of Array instances executes a provided function once for each array element.

Note : There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behavior, the forEach() method is the wrong tool.

Conclusion - With this article, we get to know about some of the important function to use with or loop over the array.

Refer the mdn docs for more depper explaination ablout these functions. This article is about to give the basic overview about these functions.