DEV Community

Mark Tony
Mark Tony

Posted on

JS - Array Methods

An array method is simply a function that:

  1. Is called on an array (using dot notation: array.methodName())
  2. Does something with the array's elements
  3. Returns a result — either a new array, a single value, or undefined

JavaScript Array Methods:

1. Adding / Removing Elements (mutate the array):

let Actors = ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

1. push - Actors.push("Brad Fitt"); 

// add to the End -[ 'Surya', 'Vikram', 'Karthi', 'Chillian', 'Leo', 'Brad Fitt' ]

2.pop -  Actors.pop()  

// removes the last element - [ 'Surya', 'Vikram', 'Karthi', 'Chillian' ]

3.shift - Actors.shift() 

// removes the first element - [ 'Vikram', 'Karthi', 'Chillian', 'Leo' ]

4. unshift - Actors.unshift("Surya") 

// adds element at the beginning - ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

5. splice - Actors.splice(1,1,"Rio") 

// removes one element index and adds Rio - [ 'Surya', 'Rio', 'Karthi', 'Chillian', 'Leo' ]

Enter fullscreen mode Exit fullscreen mode

2. Copying / Extracting (do NOT mutate)

let Actors = ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

1. slice- const sliced = Actors.slice(1,3); 

// portion copy [ 'Vikram', 'Karthi' ]

2. concat - const add =Actors.concat(["Chadwik", "Jordan"]); 

// joins array 

[
  'Surya',  'Vikram',
  'Karthi', 'Chillian',
  'Leo',    'Chadwik',
  'Jordan'
]


Enter fullscreen mode Exit fullscreen mode

3. Searching / Checking

let Actors = ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

1. indexof - console.log(Actors.indexOf("Leo")); 

// finds the position/index of value - 4

2.includes - console.log(Actors.find(x=> x = "Leo")); 

// checks whether the particular element is in the array - true

3.find - Actors.find(x => x.startsWith("K")) 

// The first match as a value (not index) -  Karthi


Enter fullscreen mode Exit fullscreen mode

4. Looping / Transforming (very important, used constantly)

let Actors = ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

1. forEach - Actors.forEach(Actors => console.log(Actors));

// Just to loop and do something (no new array)
Surya
Vikram
Karthi
Chillian
Leo

2.map - It runs a function on every element, and returns a new array with the results (same length as original).

const upper = Actors.map(Actors => Actors.toUpperCase());
console.log(upper);

[ 'SURYA', 'VIKRAM', 'KARTHI', 'CHILLIAN', 'LEO' ]

3. filter - filter() goes through every element and keeps only the ones where your function returns true. It builds a new array with just the matches  the original array stays unchanged, same rule as slice(), map(), and concat().

const longNames= Actors.filter(x=> x.length >3);
console.log(longNames);

[ 'Surya', 'Vikram', 'Karthi', 'Chillian' ]

const endwith = Actors.filter(x=> x.endsWith("o"))
console.log(endwith);

[ 'Leo' ]


4. reduce - reduce() goes through every element and combines them all into a single value (not an array). You control what that final value looks like. 

const joined = Actors.reduce((acc,ce) => acc + " " + ce, "")
console.log(joined);

 Surya Vikram Karthi Chillian Leo


Enter fullscreen mode Exit fullscreen mode

5. Sorting / Reversing (mutate the array)

let Actors = ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

1. Sort: (default: sorts as strings!)
Actors.sort()
console.log(Actors);

[ 'Chillian', 'Karthi', 'Leo', 'Surya', 'Vikram' ]

let arr = [3, 1, 2];
arr.sort((a,b) => a - b);  // → [1,2,3]  (correct numeric sort)

2. reverse - reversing the index of the array.
Actors.reverse()
console.log(Actors);

[ 'Leo', 'Chillian', 'Karthi', 'Vikram', 'Surya' ]

Enter fullscreen mode Exit fullscreen mode

6. Joining / Converting

let Actors = ["Surya", "Vikram", "Karthi","Chillian", "Leo"]

1.join - const join = Actors.join("-")
console.log(join);

Surya-Vikram-Karthi-Chillian-Leo

2.tostring - console.log(Actors.toString());

"Surya,Vikram,Karthi,Chillian,Leo"

Enter fullscreen mode Exit fullscreen mode

Top comments (0)