Different Ways To Manipulate an Array in JavaScript (Adding and Removing Elements)

JavaScript Array Manipulation | Hinancier.blogspot.com

JavaScript Arrays

In the JavaScript programming language, arrays are a type of datatype used to store and manipulate values. It can be declared as a single variable that stores multiple values. Each value of data stored in an array is indexed from the 0 start.

This means, the next value will be of index 1...and so on. Indexing of array's elements makes it easier in retrieving and manipulating the array values.

Arrays posses certain attributes that include:

Ordered Collection - elements stored in an array are stored in an ordered fashion with the first element having an index of 0. The next has 1 and so on.
Holding Multiple Values - arrays store multiple values within a single array variable.
Dynamic - when dealing with an array, it is easy to add or remove elements making it dynamic.
Flexible Data Types - arrays do not restrict the type of data that can be stored in them. Strings, Objects, Arrays, Numbers, and Boolean values can all be stored in an array.

Declaring a JavaScript Array

To declare a JavaScript Array, the const, let, or var keyword is used followed by the declaration of the array values.

Note: Arrays can also be declared using the keyword new Array( ).

Declaring a JavaScript Array - Hinancier.blogspot.com

Array.push( ) JavaScript Array Method

The push( ) method is a method used to modify an array by adding elements at the end of the array. It returns the new length of an array instead of the individual elements within the array.

Array.push( ) JS method | Hinancier

Note: In the push( ) method, any number of elements that can be added to the array are passed as arguments to the push method.

The array length is updated with each push of a new element and the final return value is the length of the new array formed.

JavaScript Arrays | Hinancier

Array.pop( ) JavaScript Method

The pop( ) method is used to remove the last element of an array which it returns. It mutates the array by directly modifying it by removing an element.

Note: it takes no parameter and changes the length of the array as well as its content. If the array is empty, the pop( ) method returns undefined.

Example

Array.pop( ) example | Hinancier.blogspot.com

Explanation

In this example, pop() removes 'orange' from the fruits array and assigns it to removedFruit. The fruits array is then left with 'apple' and 'banana'.

Array.filter( ) JavaScript Method

Array.filter method is very useful when elements within an array need to satisfy a certain condition.

Take for example an array of numbers from 1 to 10. If we want to extract only the even numbers then the filter function would come in handy.

const numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

To use the filter function, we have to understand the following:
The filter function accepts a callBackFunction.
The callBackFunction tests each elements in the array returning truthy or falsy values.

Now, let us define our callBackFunction - we will call it filterNumbers.

function filterNumbers(arrayValues){

return arrayValues % 2 == 0; //will return true if the array element is divisible by 2

};

Finally, when you console.log(numbers.filter(filterNumbers)); you will get [ 2, 4, 6, 8, 10 ];

Further Example

In the example in the image above, filter function is used on an array of objects. The elements of the object are accessed using the dot notation. In this case, if a condition is satisfied, an array of object is returned.

Array.splice( ) JavaScript Method

The splice( ) method changes the contents of an array by adding or removing elements at specific indexes.

Different Ways To Manipulate an Array in JavaScript (Adding and Removing Elements)