JavaScript Basic Array Functions

Introduction

Here are some of the most fundamental JS array functions.

Assume the code below is declared at the top level in the following examples.

var arr = [1, 2, 3, 4, 5];

Add or Remove items

pop()/push()

pop(): Removes the last element of an array, and returns that element.
push(): Adds new elements to the end of an array, and returns the new length.

arr.push(6);
console.log(arr); //=> [1, 2, 3, 4, 5, 6]

arr.pop(6);
console.log(arr); //=>  [1, 2, 3, 4, 5]

shift()/unshift()

shift(): Removes the first element of an array, and returns that element.
unshift(): Adds new elements to the beginning of an array, and returns the new length.

arr.unshift(0);
console.log(arr); //=> [0, 1, 2, 3, 4, 5]

arr.shift();
console.log(arr); //=>  [1, 2, 3, 4, 5]

slice()

Selects a part of an array, and returns the new array.

let a4 = arr.slice(0, 3);
console.log(a4); //=>  [1, 2, 3]

splice()

Adds/Removes elements from an array.

var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at 1st index position
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

months.splice(4, 1, 'May');
// replaces 1 element at 4th index
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'May']

• JavaScript - Array splice() Method - Tutorialspoint

concat()

Joins two or more arrays, and returns a copy of the joined arrays.

let a1 = arr.concat([6, 7]);
console.log(a1); //=> [1, 2, 3, 4, 5, 6, 7]

Iterate items

forEach()

Calls a function for each array element.

function repeat(ele) {
  console.log(ele);
}
arr.forEach(repeat); //=> 1 2 3 4 5

Search in array

indexOf()

Looks for item starting from index from, and returns the index where it was found, otherwise -1.

console.log(arr.indexOf(0)) //=> 1
console.log(arr.indexOf(10)) //=> -1

find()/findIndex()

Returns the value of the first element in an array that pass a test.

console.log(arr.find(num => num > 2)); //=> 3
console.log(arr.findIndex(num => num > 2)); //=> 2

includes()

Check if an array contains the specified element.

console.log(arr.includes(2)); //=> true

filter()

Creates a new array with every element in an array that pass a test.

let a2 = arr.filter(num => num > 3);
console.log(a2); //=> [4, 5]

Transform array

map()

Creates a new array with the result of calling a function for each array element.

a3 = arr.map(ele => ele - 1);
console.log(a3); //=> [0, 1, 2, 3, 4]

sort()

Sorts the elements of an array.

let array = [4, 2, 3, 4, 5, 6, 7];
console.log(array.sort()); //=> [2, 3, 4, 4, 5, 6, 7]

reverse()

The method arr.reverse reverses the order of elements in arr.

console.log(arr.reverse()) //=> [5, 4, 3, 2, 1];

reduce()

The reduce() method reduces the array to a single value.

The reduce() method executes a provided function for each value of the array (from left-to-right).

Here is the basic syntax.

let value = arr.reduce(function(previousValue, item, index, array) {
  // ...
}, initial);

• item – is the current array item.
• index – is its position.
• array – is the array.
• previousValue – is the result of the previous function call, initial for the first call.

let result = arr.reduce((sum, current) => sum + current, 0);

console.log(result); //=> 15

references

• w3schools.com
• javascript.info

Comments

[Babak Painex]

This article is a great resource for anyone considering solar-powered surveillance options. The guide on Solar Mobile Surveillance Trailers in Indio explains the benefits of these mobile units and how they offer flexible, eco-friendly security solutions. If you're looking to enhance your security while keeping things green, this is a must-read!

[markhalland]

thankyou for your amazing content and likes it ,well if any one looking for the good services for take my course then click here for it.

[Lerenjack]

This is definitely useful information if you want to keep your contacts update and organized. Thank you! Squid Game 2021 Green Jacket

[Akala Emmanuel]

Your article contains information that is not available anyplace else. It is my sincere wish that you persist to write such wonderful posts Luke Cage Mike Colter Jacket

[Lerenjack]

Lerenjack gets your hands on the most exclusive piece by Jackets, and Leather Jackets Apparel with an amazing discount. Mogul Moves Mint Hoodie

[totogorae]

I have to thank you for the efforts you’ve put in writing this blog. I’m hoping to check out the same high-grade blog posts by you later on as well. 토토사이트

[Black Jacket]

Great overview of basic JavaScript array functions! Your examples clearly demonstrate how to manipulate arrays with methods like pop(), push(), shift(), and unshift(). For anyone looking to dive deeper into programming or fashion, don’t miss checking out my website for the latest trends in Black leather Jacket

[Fisher Lam]

This place has been incredibly helpful and has taught me so much! I'm genuinely excited to delve deeper into these ideas and see where they take me. Thank you for sharing your knowledge.
Purple Moto Leather Jacket

[totogorae]

I have to thank you for the efforts you’ve put in writing this blog. I’m hoping to check out the same high-grade blog posts by you later on as well. 토토사이트

[Real USAJacket]

I am looking for some good blog sites for studying. I was searching over search engines and found your blog site. Well i like your high quality blog site design plus your posting abilities. Keep doing it. Washington Commanders Jacket