JavaScript array methods are built-in methods used to add, remove, search, sort, and transform array elements. They make it easier to work with collections of data without writing lengthy loops.
1. Array Properties and Conversion Methods
length
The length property returns the number of elements in an array.
let arr = [10, 20, 30, 40];
console.log(arr.length);
toString()
The toString() method converts an array into a comma-separated string.
let arr = [10, 20, 30];
console.log(arr.toString());
join()
The join() method combines array elements into a string using the specified separator.
let arr = ["HTML", "CSS", "JavaScript"];
console.log(arr.join(" - "));
2. Adding and Removing Elements
push()
The push() method adds one or more elements to the end of an array and returns its new length.
let arr = [10, 20];
arr.push(30);
console.log(arr);
pop()
The pop() method removes and returns the last element of an array.
let arr = [10, 20, 30];
console.log(arr.pop());
console.log(arr);
unshift()
The unshift() method adds one or more elements to the beginning of an array.
let arr = [20, 30];
arr.unshift(10);
console.log(arr);
shift()
The shift() method removes and returns the first element of an array.
let arr = [10, 20, 30];
console.log(arr.shift());
console.log(arr);
3. Combining and Extracting Arrays
concat()
The concat() method combines two or more arrays and returns a new array.
let a = [1, 2], b = [3, 4];
console.log(a.concat(b));
slice()
The slice() method returns a shallow copy of a selected portion of an array without modifying the original array.
let arr = [10, 20, 30, 40];
console.log(arr.slice(1, 3));
splice()
The splice() method adds, removes, or replaces elements in an array and modifies the original array.
let arr = [10, 20, 30];
arr.splice(1, 1, 25);
console.log(arr);
flat()
The flat() method creates a new array by flattening nested arrays to the specified depth. Its default depth is 1.
let arr = [1, [2, [3, 4]]];
console.log(arr.flat(2));
flatMap()
The flatMap() method maps each element and flattens the result by one level.
let arr = [1, 2, 3];
console.log(arr.flatMap(x => [x, x * 2]));
4. Transforming and Iterating Over Arrays
map()
The map() method creates a new array by applying a callback function to every element.
let arr = [1, 2, 3];
console.log(arr.map(x => x * 2));
forEach()
The forEach() method executes a callback function for each array element. It does not return a new array.
let arr = [10, 20, 30];
arr.forEach(x => console.log(x));
filter()
The filter() method creates a new array containing elements that satisfy a specified condition.
let arr = [10, 15, 20, 25];
console.log(arr.filter(x => x > 15));
5. Searching and Checking Elements
includes()
The includes() method checks whether an array contains a specified value and returns true or false.
let arr = [10, 20, 30];
console.log(arr.includes(20));
find()
The find() method returns the first element that satisfies a condition. It returns undefined if no element matches.
let arr = [10, 20, 30, 40];
console.log(arr.find(x => x > 20));
findIndex()
The findIndex() method returns the index of the first element that satisfies a condition, or -1 if none matches.
let arr = [10, 20, 30, 40];
console.log(arr.findIndex(x => x > 20));
some()
The some() method checks whether at least one array element satisfies a condition.
let arr = [10, 20, 30];
console.log(arr.some(x => x > 25));
every()
The every() method checks whether all array elements satisfy a condition.
let arr = [10, 20, 30];
console.log(arr.every(x => x > 5));
6. Processing and Modifying Arrays
reduce()
The reduce() method processes array elements to produce a single accumulated result.
let arr = [10, 20, 30];
console.log(arr.reduce((sum, x) => sum + x, 0));
fill()
The fill() method replaces array elements with a specified value within a selected range. It modifies the original array.
let arr = [1, 2, 3, 4];
arr.fill(0, 1, 3);
console.log(arr);
sort()
The sort() method sorts array elements in place. Use a comparison function to sort numbers numerically.
let arr = [30, 5, 20, 10];
arr.sort((a, b) => a - b);
console.log(arr);
reverse()
The reverse() method reverses the order of elements in an array and modifies the original array.
let arr = [10, 20, 30];
arr.reverse();
console.log(arr);
values()
The values() method returns an iterator containing the array's element values.
let arr = ["HTML", "CSS", "JavaScript"];
console.log([...arr.values()]);
7. The delete Operator
The delete operator is a JavaScript operator, not an array method. It removes an object's property, but using it on an array element leaves a hole without changing the array's length.
let arr = [10, 20, 30];
delete arr[1];
console.log(arr);
console.log(arr.length);
For removing array elements, splice() is generally more appropriate because it also shifts the remaining elements.
