All About JavaScript Array

4 min readNov 4, 2020

Arrays are among the oldest and most important data structures and are used by almost every program. In the JavaScript world, it’s more likely an object. Which is also known as non-primitive or reference data-type. The Array object lets us store multiple values in a single variable. An array is used to store a collection of data, but it is often more useful to think of an array as a collection of variables of the same type.

Declare an Array:

There have 2 ways to declare an array. On is var arr = new Array() & another is var arr = [].

push() , pop(), unshift() & shift():

These methods are used to insert/delete elements to/from an array.

push(): Inserting element in the last direction. Complexity O(1).
pop(): Removing an element from the last direction. Complexity O(1).
unshift(): Inserting element in the starting point. Complexity O(n).
shift(): Removing an element from the starting point. Complexity O(n).

const animals = ["pigs","goats", "sheep"];
animals.push('cows'); // ["pigs", "goats", "sheep", "cows"]
animals.unshift('dog'); // ["dog", "pigs", "goats", "sheep", "cows"]
animals.push(); // ["dog", "pigs", "goats", "sheep"]
animals.shift(); // ["pigs", "goats", "sheep"]

sort():

This method either alphabetic or numeric sorts an array.

var country = ["Nepal", "India", "Bangladesh", "Vutan"];
country.sort(); // ["Bangladesh", "India", "Nepal", "Vutan"]

concat()

concat() method joins two or more arrays and makes a new one.

var country1 = ["Bangladesh", "Pakistan", "India"];
var country2 = ["Nepal", "Afganistan"];
nar newCountry = country1.concat(country2)
// ["Bangladesh", "Pakistan", "India", "Nepal", "Afganistan"]

splice() & slice():

These two keywords are little bit confusing. So we should careful about their specificity.

splice() method can add and remove items form an array where as the slice() method is used to selected elements in an array and makes a new one.

splice() is invoked with the following arguments:

index — An integer that specifies at what position to add/remove elements, You can use negative values to specify the position from the end of the array
howManyToRemove (Optional) — The number of elements to be removed. If set to 0, no elements will be removed
item1, … , itemX (Optional) — The new elements to be added to the array

const fruits1 = ["Banana", "Peach", "Apple", "Mango", "Orange"];// At position 2, add the new elements, and remove 1 itemfruits1.splice(2, 1, "Lemon", "Kiwi");
console.log(fruits1)
// [ 'Banana', 'Peach', 'Lemon', 'Kiwi', 'Mango', 'Orange' ]// At position 1, remove 2 elementsconst fruits2 = ["Banana", "Peach", "Apple", "Mango", "Orange"];
fruits2.splice(1, 2);
console.log(fruits2)
// [ 'Banana', 'Mango', 'Orange' ]

The slice() method returns the selected elements in a new array. slice() is invoked with the following 2 arguments:

startIndex (Optional) — An integer that specifies where to start the selection. You can use negative numbers to select from the end of an array. If ignored, it acts like “0”
endIndex (Optional) — An integer that specifies where to end the selection. If ignored, all elements from the start position and to the end of the array will be selected. You can use negative numbers to select from the end of an array

const fruits = ["Banana", "Peach", "Apple", "Mango", "Orange"];
console.log(fruits.slice(2, 4));
// [ 'Apple', 'Mango' ]
console.log(fruits.slice(3));
// ['Mango', 'Orange']

join():

join() method returns the array as a string. The elements will be separated by a specified separator. The default separator is a comma (,).

var lang = ["Python", "Vuejs", "Nodejs", "javascript"];
lang.join("-");
// "Python-Vuejs-Nodejs-javascript"

High Order Array Method:

JavaScript is a very powerful programming language and softly coded. It gives us many handy and useful functionality. This high level language is also very flexible to work with so many things such as the array one. Let’s discuss about some high order array method.

map():

The map () method in JavaScript firstly creates a new array by calling a specific function on each element in the original array then return the array

const number = [1, 4, 9, 16];
const squareNumber = number.map(x => x ** 2);
console.log(squareNumber);
// [1, 16, 81, 256]

filter():

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

const number = [15, 17, 5, 20, 56, 90, 11, 13, 25];
const divisorFive = number.filter(x => x % 5 == 0);
console.log(divisorFive);
// [15, 5, 20, 90, 25]

find():

find() method is used find the first element of an array.

var number = [5, 12, 8, 130, 44];
const found = number.find(element => element > 10);
console.log(found);
// 12

reduce():

reduce() method executes a reducer function on each element of the array (from left-to-right), resulting in single output value.

const array = [1, 2, 3, 4];
const sum = array.reduce((acc, item) => acc + item , 0);
console.log(sum);
// 10

every():

every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a boolean value.

const isBelowThreshold = (currentValue) => currentValue < 40;
const array = [1, 30, 39, 29, 10, 13];
console.log(array.every(isBelowThreshold));
// true

References:
https://developer.mozilla.org/en-US/docs/Web/JavaScript
https://morioh.com/
https://www.w3schools.com/js/