Some useful array methods in JavaScript

Samiul Lesum — Fri, 04 Oct 2019 14:47:46 +0000

The JavaScript Array object is a global object; which are high-level, list-like objects. The following array methods are essential to know to work as a javascript developer.

Array.concat(): The concat() method is used to join two or more arrays.

const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const numbers = num1.concat(num1, num2);
console.log(numbers);
// results in [1, 2, 3, 4, 5, 6]

Array.map(): The map() method creates a new array with the results of calling a provided function on every element in the calling array.
Syntax: array.map(function(currentValue, index, arr), thisValue)
currentValue (required): The value of the current element.
index (optional): The array index of the current element.
arr (optional): The array object the current element belongs to.
thisValue (optional): A value to be passed to the function to be used as its "this" value. If this parameter is empty, the value "undefined" will be passed as its "this" value.

var array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]

Array.reduce(): The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in single output value.
Syntax: arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]).
callback: A function to execute on each element in the array (except for the first, if no initialValue is supplied), taking four arguments:
accumulator: The accumulator accumulates the callback's return values.
currentValue: The current element being processed in the array.
index (optional): The index of the current element being processed in the array.
array (optional): The array reduce() was called upon.
initialValue (optional): A value to use as the first argument to the first call of the callback. If no initialValue is supplied, the first element in the array will be used and skipped.

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
// sum is 6

Array.slice(): The slice() method returns the selected elements in an array, as a new array object. The slice() method selects the elements starting at the given start argument, and ends at, but does not include, the given end argument.
Note: The original array will not be changed.

var arr = [1, 2, 3, 4, 5];
console.log(arr.slice(2));
// expected output: Array [3, 4, 5]
console.log(arr.slice(2, 4));
// expected output: Array [3, 4]

Array.splice(): The splice() method adds/removes items to/from an array, and returns the removed item(s).
Note: This method changes the original array.

var arr = [1, 3, 4, 6];
arr.splice(1, 0, 2);
// inserts at index 1
console.log(arr);
// expected output: Array [1, 2, 3, 4, 6]
arr.splice(4, 1, 6);
// replaces 1 element at index 4
console.log(arr);
// expected output: Array [1, 2, 3, 4, 5]

Array.shift(): The shift() method removes the first item of an array.
Note: This method changes the length of the array.

var arr = [0, 1, 2, 3, 4, 5];
console.log(arr.shift());
// expected output: Array [1, 2, 3, 4, 5]

Array.unshift(): The unshift() method adds new items to the beginning of an array and returns the new length.
Note: This method changes the length of an array.

var arr = [2, 3, 4, 5];
console.log(arr.unshift(1));
// expected output: Array [1, 2, 3, 4, 5]

Array.push(): The push() method adds new items to the end of an array and returns the new length.
Note: This method changes the length of the array.

var arr = [1, 2, 3, 4];
console.log(arr.push(5));
// expected output: Array [1, 2, 3, 4, 5]

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

var arr = [1, 2, 3, 4];
console.log(arr.pop());
// expected output: Array [1, 2, 3, 4]

DEV Community: Samiul Lesum

Some useful array methods in JavaScript