Useful JavaScript Array methods you should know – Part I

An Array is used to create a collection of similar items or store multiple values of the same data type, but in JavaScript, we can store different data types in a single array and you probably know it so let’s not talk about that and continue with JavaScript Array methods.

In this we will talk about following methods,

push() & pop()

push() is used to insert value at the last index and pop() is used to remove the value at last index, it is also logic behind Stack Data Structure.

Parameters,
pop() doesn’t take any parameters,
push() takes minimum 1 parameter, you can insert multiple values at once

Return value,
push() return new length of Array,
pop() returns removed element.

Let’s see some example

// we will initialize a empty array
const bookStack = [];
// push book into array
bookStack.push('A');    // 1
bookStack.push('B', 'C');    // 3
// check array
console.log(bookStack);    // ['A', 'B', 'C']

// using pop method, book C will be removed first
bookStack.pop(); //    "C"
bookStack.pop(); //    "B"
bookStack.pop(); //    "A"

console.log(bookStack);    // []

as we can see in the example, push() inserts value at last index and pop() removes the last index, they both change the length of Array.

shift() & unshift()

shift() is opposite of pop(), it removes the element at the first index and unshift() insert the element at first index unlike push(), they both change the length of Array.

Parameters,
shift() doesn’t take any parameters,
unshift() takes minimum 1 parameter, you can insert multiple values at once

Return value,
unshift() return new length of Array,
shift() returns removed element.

Let’s see some example,

// shift () example
const exampleArray = [1, 2, 3];
const firstElement = exampleArray.shift();
console.log(exampleArray);
// expected output: [2, 3]
console.log(firstElement);
// expected output: 1
// unshift () example
const exampleArray = [2, 3];
const newLength = exampleArray.unshift(0, 1);
console.log(exampleArray);
// expected output: [0, 1, 2, 3]
console.log(newLength);
// expected output: 4

includes()

includes() is used to check if a value exists in array or not, it returns true or false,

Parameters,
valueToFind: first parameter, the value we want to search. It’s case-sensitive for finding strings and characters.
fromIndex (optional): we can pass an index, it will start searching from that index till the end.

Return value,
returns a boolean value true if the element is present else false.

Let’s see example,

const exampleArray = [1, 2, 4, 6];

const isTwoIsAvailable = exampleArray.includes(2);

console.log(isTwoIsAvailable); // expected true

const isFiveIsAvailable = exampleArray.includes(5, 2);

console.log(isFiveIsAvailable); // expected false

map()

map() loops through on every element and executes the provided function on each iteration which we pass and gives us a new populated Array.

Parameters,
callback function: a function which will be called on every iteration and its return value will be added to the new array which will be returned after iteration ends, callback function accepts 3 parameters currentValue, index, and array we will understand this in the example below.

thisArg (optional): value to use as this when executing the callback function.

Return value,
a new array with the return value of the callback function of each iteration.

Let’s see example,

const exampleArray = [1, 2, 3, 4];

// currentValue is the value which is being processed by map() example, 1, 2,...4
// index, it's the index of element which is being processed, example, 0, 1 ...3
// array, it's the actual array which is being processed, in our case it's exampleArray
const result = exampleArray.map((currentValue, index, array) => {
    return currentValue + 1 + index; // add into currentValue and return
}); 
console.log(result); // expected output [2, 4, 6, 8]

You can see more example’s on MDN Docs.

filter()

Just like the name suggest filter() method is used to filter out or remove elements from the array which don’t satisfy our condition, if the element satisfies the condition it will be added into our new array which will be returned by filter() after iteration ends.

Parameters,
callback function: just like map(), a function which will be called on every iteration and its return value will be added to the new array which will be returned after iteration ends, callback function accepts 3 parameters currentValue, index, and array we will understand this in the example below.

thisArg (optional): value to use as this when executing the callback function.

Return value,
a new array with the return value of the callback function of each iteration.

Let’s see example,

const exampleArray = [1, 2, 3, 4];

// currentValue is the value which is being processed by map() example, 1, 2,...4
// index, it's the index of element which is being processed, example, 0, 1 ...3
// array, it's the actual array which is being processed, in our case it's exampleArray
const result = exampleArray.filter((currentValue, index, array) => {
    return currentValue > 2; // return element which is greater than 2
}); 
console.log(result); // expected output [3, 4]

You can see more example’s on MDN Docs.

Leave a Reply

Your email address will not be published. Required fields are marked *