DEV Community

K-Sato
K-Sato

Posted on • Updated on

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];
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

slice()

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

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

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']
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

Iterate items

forEach()

Calls a function for each array element.

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

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

includes()

Check if an array contains the specified element.

console.log(arr.includes(2)); //=> true
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

reverse()

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

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

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);
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

references

Top comments (18)

Collapse
 
onlinecoursesexpert profile image
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.

Collapse
 
akalaemmanuel3 profile image
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

Collapse
 
jackleren profile image
Lerenjack

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

Collapse
 
suri profile image
Surijulia

Thanks for your post, it's very helpful I hope in the future you will provide more information. I will visit and support the article for you
Click on drift hunters to play the hot game

Collapse
 
haadi profile image
haadi muhammed

As businesses undergo continuous evolution, the demand for advanced tools becomes increasingly apparent. Delve into the transformative journey of Inventory Management Software, witnessing its progression from conventional approaches to cutting-edge digital solutions. Explore how these systems, including Ebrsoftware's Inventory Software transcend traditional manual processes, ushering in a new era of unparalleled efficiency for businesses navigating the complexities of modern operations.

Collapse
 
totogorae profile image
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. 토토사이트

Collapse
 
rusajacket profile image
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

Collapse
 
nestorr profile image
Carl Eliezer

I wanted to take a moment to let you know how much I appreciate the amazing stuff you have been sharing. Your writings are consistently very perceptive and jam-packed with useful knowledge. I am a small business owner, and I have found your techniques and recommendations to be of great assistance in navigating the tricky world of SEO. Your commitment to offering insightful counsel is clear, and it's having a significant impact on how I manage my internet presence. Checking out the best SEO Services for small business you offer is highly recommended for anyone trying to improve their SEO efforts. Maintain the great work; your knowledge and enthusiasm are evident in each and every post!

Collapse
 
louis_barry profile image
Louis Barry

Your writing is brilliant in so many ways. It's instructive as well as hospitable. I have so many more ideas now that I've read your blog. I sincerely appreciate it. Lana Del Rey Ferrari Jacket

Collapse
 
kylangentry profile image
Fisher Lam • Edited

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

Collapse
 
totogorae profile image
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. 토토사이트

Collapse
 
black_leatherjackets_f0b profile image
Black Leather Jackets

Great intro to JavaScript array basics! Concise and clear explanations helped me understand quickly. Plus, check out black leather jackets for stylish attire to complement your coding skills!

Collapse
 
anahataorganic profile image
Anahata Organic

Hey i just got this site from google and wl use for blog post. I m going to post relate dhoop sticks

Collapse
 
totogorae profile image
totogorae

Can you tell us more about this? I’d want to find out some additional information. 토토사이트

Collapse
 
totogorae profile image
totogorae

I needed to thank you for this wonderful read!! I absolutely loved every little bit of it. 먹튀검증

Collapse
 
totogorae profile image
totogorae

I really admire your writing! 토토사이트