Arrays

An array is a global object that can hold a list of elements of any data type and access them by a single variable.

Array Declaration

There are basically two ways to declare an array.

  • With the literal notation [ ]
let myHobbies = ["Dancing","Singing","Programming","Cooking","Writing"]
  • With the array constructor
let shirtSize = new Array(34,36,38,40,42,44,46)

Array Methods

push()

This method will mutate the array. It inserts an element at the end of the array and returns the length of the array

shirtSize.push(48) // 8 (length of the array)
console.log(shirtSize) // [34,36,38,40,42,44,46,48]

pop()

This method removes the last element from the array and returns that element

shirtSize.pop() // 48
console.log(shirtSize) // [34,36,38,40,42,44,46]

shift()

This method removes the first element of the array and returns the removed element

shirtSize.shift() // 34
console.log(shirtSize) // [36,38,40,42,44,46]

unshift()

This method will add the elements at the beginning of the array and returns the length of the new array.

Note: You can pass in as many elements as you like to the function.

shirtSize.unshift(32,34) // 8
console.log(shirtSize) // [32,34,36,38,40,42,44,46]

reverse()

This method is used for reversing the elements of an array in place.

shirtSize.reverse()
console.log(shirtSize) // [46,44,42,40,38,36,34,32]

find()

It is used to create a new object based on the condition you set. On the surface, it looks like filter() but they’re not the same. filter() returns an array of matched objects while find() will return the first matched object.

let foodItems = [
    { name: "Apple",type:"veg"},
    { name: "Banana",type:"veg"},
    { name: "Chicken Fry",type:"nonveg"}
]
let vegFood = foodItems.find(foodItem => foodItem.type==="veg")
console.log(vegFood) // {name:"Apple",type:"veg"}

concat()

concat method will create a new array containing all the elements in the original array followed by the each of the arrays that are passed in. This method will not mutate the original array. Any number of arrays can be passed as arguments.

let availableShirtSize = shirtSize.concat([30,28,26])
console.log(availableShirtSize) // [46,44,42,40,38,36,34,32,30,28,26]
console.log(shirtSize) // [46,44,42,40,38,36,34,32]

slice()

In this method we specify the start index and the end index which gives us a new array. The original array isn’t mutated. End index is exclusive which means that the element at that end index isn’t included in the new array

let slicedArray = shirtSize.slice(0,3)
console.log(slicedArray) // [46,44,42]
console.log(shirtSize) // [46,44,42,40,38,36,34,32]

splice()

This method is used to modify the contents of an array by removing the existing elements and/or by adding new elements.

  • The first argument should be an integer and mandatory that specifies at what position to add/remove items.
  • The second and third arguments are optional where second argument specifies the no. of items to be removed.
  • If second arguemnt is set to (0) no items will be removed. If not set, all the items from provided index will be removed.
  • The thirs argument specifies the new items to be added to the array.
let shirtSize = [46,44,42,40,38,36,34,32]
shirtSize.splice(2,1,30)
console.log(shirtSize) // [46,44,30,40,38,36,34,32]

filter()

It is a method that lets you create a new array based on conditions that evaluate to true from an existing array.

const marks = [85,76,93,88,95,79]
const filteredMarks = marks.filter(mark =>{
    return mark>80
})
console.log(filteredMarks) // [85,93,88,95]

every()

Returns a true or false value based on the condition set. It works in a similar fashion as filter() but instead of returning an object or value, every() returns back a boolean.

This is useful when checking whether everything inside an array meets the conditions set

let marks = [85,76,93,88,95,79]
let topMarks = marks.every(mark => return mark > 90)
console.log(topMarks) // false

map()

This method will create a new array of elements where each element is a value returned from the function provided. Just like filter method, map will not mutate the original array since it will create a new array.

let shistSize = [46,44,42,40,38,36,34,32]
let newShirtSize = shirtSize.map(size => size-1)
console.log(newShirtSize) // [45,43,29,39,37,35,33,31]
console.log(shirtSize) // [46,44,30,40,38,36,34,32]

reduce()

This method executes a reducer function that we provide on each element of the array, which results in a single output value.

Syntax

arr.reduce(callback(accumulator, currentValue, index, array), initialValue)

  • The callback function accepts two arguments: the accumulator, which is the current combined value, and the currentValue is the current item in the loop.
  • The returned value is used as the accumulator for the next item in the loop.
  • In the very first loop, that starting value is used instead.
  • Index is the array index of the current element and this is optional, array is the array object the current element belongs to. This is also optional argument.
let marks = [85,76,93,88,95,79]
const totalMarks = marks.reduce((accumulator,currentValue) => accumulator + currentValue)
console.log(totalMarks) // 516

Summary of commonly used array methods

MethodDescription
push(...items)Inserts an element at the end and returns the length of the array
pop()Removes an element at the end and returns it
shift()Removes the first element
unshift(..items)Inserts an element at the beginning
forEach(func)Calls a function for each element in the array
filter(func)Creates a new array based on conditions that evaluate to true from an exisiting array
map(func)Creates a new array with the results of calling a provided function on every element in this array
reduce(func,initial)Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value
concat(...items)Creates a new array containing all the elements in the original array followed by the each of the arrays that are passed in
slice(start,end)Extracts a section of an array and returns a new array excluding the end position
splice(pos,n,...items)At index pos, delete 'n' elements and insert items
find(func)Returns the first matched object
every(func)Returns a boolean value true or false value based on the conditions set
some(func)Returns true if at least one of the condition evaluates to true
reverse()Reverses the array in-place and returns it
join(optional seperator)Concatenates all the members of an array into a string, along with a separator
toString()Joins an array together into a string by comma separator

For more details on Javascript array methods visit MDN Docs

← Var, Let and Const