Hi guys! In this article, I’ll be explaining Javascript array methods. Before going in, let's look at what an array is. What is an Array? An array is a data structure that allows you to store multiple values together in one variable. These values may include: String Boolean Null Number Below is an example of an array: const flowers = [ 'Lily', 'Rose', 'Orchids', 'Hibiscus']; Accessing Array Elements An array is enclosed using brackets, and each element is separated by a comma. The index number of each element in an array is used to access it. The first index of an array is zero (0). Using our previous example, let us retrieve the element using its index: [ ] Rose const flowers = [ 'Lily', 'Rose', 'Orchids', 'Hibiscus'];

console.log(flowers[1]); //returns Rose We got our element by using the brackets that hold its index number. Now let's dive into array methods. Rose [] Array Methods There are several JavaScript array methods, but we will go over a few. concat() As the name implies, this method links two or more arrays and then returns the result: const firstName = ['Sam', 'Tobi'];
const lastName = ['Smith','Johnson'];

//using the concat method
let fullName = firstName.concat(lastName);
console.log(fullName); Output: ['Sam', 'Tobi', 'Smith','Johnson']; sort() This method sorts the elements of an array in place and returns the sorted array. The default sort order is ascending and it is built upon converting the elements into a string: let classNumber = [12, 4, 34, 1, 9];
classNumber.sort();

console.log(classNumber); Output: [1, 4, 9, 12, 34]; indexOf() This method searches for an element in an array and returns its index: const candyBar = ['Twix',' Snickers',' Kit Kat'];

console.log(candyBar.indexOf('Snickers')); Note: If the element is not in the array, it returns -1 Output: 1 //returns the index 1 push() The method adds an element at the end of the array and returns the new length: push() const candyBar = ['Twix',' Snickers',' Kit Kat'];
candyBar.push('Milky way');

console.log(candyBar); Output: ['Twix',' Snickers',' Kit Kat', 'Milky way']; unshift() This method adds an element to the beginning of the array: const candyBar = ['Twix',' Snickers',' Kit Kat', 'Milky Way'];
candyBar.unshift('Toblerone');

console.log(candyBar); Output: ['Toblerone', 'Twix',' Snickers',' Kit Kat', 'Milky way']; pop() The method removes the last element in the array and returns the removed element: pop() const candyBar = ['Toblerone','Twix',' Snickers',' Kit Kat', 'Milky Way'];
candyBar.pop();

console.log(candyBar); Output: Milky Way shift() The method is the opposite of . This method removes an element from the beginning of the array and returns it: shift() unshift() const candyBar = ['Toblerone','Twix',' Snickers',' Kit Kat', 'Milky Way'];
candyBar.pop();

console.log(candyBar); Output: Toblerone slice() This method cuts out a specified part of an array using its index and returns the result. The slice() method takes in two parameters: and . The array is sliced from the index and the index. The index is excluded. The array remains unchanged. start end start end end Using the method, let us take out the string : slice() Kit Kat const candyBar = ['Twix',' Snickers',' Kit Kat', 'Milky Way', 'Bounty'];

console.log(candyBar.slice(4, 5)); Output: ['Bounty']; Also published here.

This story contains new, firsthand information uncovered by the writer.

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How to Utilize Javascript Array Methods

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Deep Dive Into the JavaScript Some() Method

Array Filter vs Array Reduce vs For Loop

Array Manipulation: Understanding JavaScript Array Methods

Demystifying Javascript Array Methods with Practical Examples

Learn JavaScript Array Methods in just 8 Minutes!!

A Deep Dive Into the JavaScript Some() Method

Array Filter vs Array Reduce vs For Loop

Array Manipulation: Understanding JavaScript Array Methods

Demystifying Javascript Array Methods with Practical Examples

Learn JavaScript Array Methods in just 8 Minutes!!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps