JavaScript (ES6+) Array Functions with Examples

Below is a detailed, up-to-date list of all standard JavaScript array methods and properties introduced up to ES6 and beyond, along with simple explanations and code examples for each. This is ideal for a technical blog post targeting developers. Array Creation & Identification Array.isArray() Checks if a value is an array. Array.isArray([1, 2, 3]); // true Array.from() Creates a new array from an array-like or iterable object. Array.from('hello'); // ['h', 'e', 'l', 'l', 'o'] Array.of() Creates a new array from arguments. Array.of(1, 2, 3); // [1, 2, 3] Accessing Elements at(index) Returns the element at the given index (supports negative indices). ['a', 'b', 'c'].at(-1); // 'c' Adding/Removing Elements push(element1, ..., elementN) Adds elements to the end, returns new length. const arr = [1, 2]; arr.push(3); // arr: [1, 2, 3] pop() Removes and returns the last element. const arr = [1, 2, 3]; arr.pop(); // 3, arr: [1, 2] unshift(element1, ..., elementN) Adds elements to the start, returns new length. const arr = [2, 3]; arr.unshift(1); // arr: [1, 2, 3] shift() Removes and returns the first element. const arr = [1, 2, 3]; arr.shift(); // 1, arr: [2, 3] splice(start, deleteCount, ...items) Adds/removes/replaces elements at any position. const arr = [1, 2, 3]; arr.splice(1, 1, 9); // arr: [1, 9, 3] copyWithin(target, start, end) Copies part of array to another location in the same array. [1, 2, 3, 4].copyWithin(1, 2); // [1, 3, 4, 4] fill(value, start, end) Fills elements with a static value. [1, 2, 3].fill(0, 1); // [1, 0, 0] with(index, value) Returns a new array with the value at the given index replaced (immutable). [1, 2, 3].with(1, 9); // [1, 9, 3] Combining & Slicing concat(...arrays) Merges arrays and/or values into a new array. [1, 2].concat([3, 4]); // [1, 2, 3, 4] slice(start, end) Returns a shallow copy of a portion of an array. [1, 2, 3].slice(1, 3); // [2, 3] Iteration & Transformation forEach(callback) Executes a function for each element. [1, 2, 3].forEach(x => console.log(x)); map(callback) Creates a new array by transforming each element. [1, 2, 3].map(x => x * 2); // [2, 4, 6] filter(callback) Creates a new array with elements that pass the test. [1, 2, 3].filter(x => x > 1); // [2, 3] reduce(callback, initialValue) Reduces array to a single value (left-to-right). [1, 2, 3].reduce((a, b) => a + b, 0); // 6 reduceRight(callback, initialValue) Reduces array to a single value (right-to-left). [1, 2, 3].reduceRight((a, b) => a - b); // 0 (3-2-1) flat(depth = 1) Flattens nested arrays up to specified depth. [1, [2, [3]]].flat(2); // [1, 2, 3] flatMap(callback) Maps and flattens the result into a new array. [1, 2].flatMap(x => [x, x * 2]); // [1, 2, 2, 4] Searching & Testing find(callback) Returns the first element matching a condition. [1, 2, 3].find(x => x > 1); // 2 findIndex(callback) Returns the index of the first element matching a condition. [1, 2, 3].findIndex(x => x > 1); // 1 findLast(callback) Returns the last element matching a condition. [1, 2, 3, 2].findLast(x => x === 2); // 2 findLastIndex(callback) Returns the index of the last element matching a condition. [1, 2, 3, 2].findLastIndex(x => x === 2); // 3 includes(value, fromIndex) Checks if array contains a value. [1, 2, 3].includes(2); // true indexOf(value, fromIndex) Returns the first index of a value, or -1 if not found. [1, 2, 3].indexOf(2); // 1 lastIndexOf(value, fromIndex) Returns the last index of a value, or -1 if not found. [1, 2, 3, 2].lastIndexOf(2); // 3 some(callback) Checks if at least one element passes the test. [1, 2, 3].some(x => x > 2); // true every(callback) Checks if all elements pass the test. [1, 2, 3].every(x => x > 0); // true Sorting & Reversing sort(compareFunction) Sorts array in place. [3, 1, 2].sort(); // [1, 2, 3] toSorted(compareFunction) Returns a sorted copy (does not modify original). [3, 1, 2].toSorted(); // [1, 2, 3] reverse() Reverses array in place. [1, 2, 3].reverse(); // [3, 2, 1] toReversed() Returns a reversed copy (does not modify original). [1, 2, 3].toReversed(); // [3, 2, 1] String Conversion join(separator) Joins all elements into a string. [1, 2, 3].join('-'); // '1-2-3' toString() Converts array to a comma-separated string. [1, 2, 3].toString(); // '1,2,3' Iterators entries() Returns an iterator of [index, value] pairs. for (const [i, v] of ['a', 'b'

May 1, 2025 - 17:03

JavaScript (ES6+) Array Functions with Examples

Below is a detailed, up-to-date list of all standard JavaScript array methods and properties introduced up to ES6 and beyond, along with simple explanations and code examples for each. This is ideal for a technical blog post targeting developers.

Array Creation & Identification

Array.isArray() Checks if a value is an array.

  Array.isArray([1, 2, 3]); // true

Array.from() Creates a new array from an array-like or iterable object.

  Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']

Array.of() Creates a new array from arguments.

  Array.of(1, 2, 3); // [1, 2, 3]

Accessing Elements

at(index) Returns the element at the given index (supports negative indices).

  ['a', 'b', 'c'].at(-1); // 'c'

Adding/Removing Elements

push(element1, ..., elementN) Adds elements to the end, returns new length.

  const arr = [1, 2]; arr.push(3); // arr: [1, 2, 3]

pop() Removes and returns the last element.

  const arr = [1, 2, 3]; arr.pop(); // 3, arr: [1, 2]

unshift(element1, ..., elementN) Adds elements to the start, returns new length.

  const arr = [2, 3]; arr.unshift(1); // arr: [1, 2, 3]

shift() Removes and returns the first element.

  const arr = [1, 2, 3]; arr.shift(); // 1, arr: [2, 3]

splice(start, deleteCount, ...items) Adds/removes/replaces elements at any position.

  const arr = [1, 2, 3]; arr.splice(1, 1, 9); // arr: [1, 9, 3]

copyWithin(target, start, end) Copies part of array to another location in the same array.

  [1, 2, 3, 4].copyWithin(1, 2); // [1, 3, 4, 4]

fill(value, start, end) Fills elements with a static value.

  [1, 2, 3].fill(0, 1); // [1, 0, 0]

with(index, value) Returns a new array with the value at the given index replaced (immutable).

  [1, 2, 3].with(1, 9); // [1, 9, 3]

Combining & Slicing

concat(...arrays) Merges arrays and/or values into a new array.

  [1, 2].concat([3, 4]); // [1, 2, 3, 4]

slice(start, end) Returns a shallow copy of a portion of an array.

  [1, 2, 3].slice(1, 3); // [2, 3]

Iteration & Transformation

forEach(callback) Executes a function for each element.

  [1, 2, 3].forEach(x => console.log(x));

map(callback) Creates a new array by transforming each element.

  [1, 2, 3].map(x => x * 2); // [2, 4, 6]

filter(callback) Creates a new array with elements that pass the test.

  [1, 2, 3].filter(x => x > 1); // [2, 3]

reduce(callback, initialValue) Reduces array to a single value (left-to-right).

  [1, 2, 3].reduce((a, b) => a + b, 0); // 6

reduceRight(callback, initialValue) Reduces array to a single value (right-to-left).

  [1, 2, 3].reduceRight((a, b) => a - b); // 0 (3-2-1)

flat(depth = 1) Flattens nested arrays up to specified depth.

  [1, [2, [3]]].flat(2); // [1, 2, 3]

flatMap(callback) Maps and flattens the result into a new array.

  [1, 2].flatMap(x => [x, x * 2]); // [1, 2, 2, 4]

Searching & Testing

find(callback) Returns the first element matching a condition.

  [1, 2, 3].find(x => x > 1); // 2

findIndex(callback) Returns the index of the first element matching a condition.

  [1, 2, 3].findIndex(x => x > 1); // 1

findLast(callback) Returns the last element matching a condition.

  [1, 2, 3, 2].findLast(x => x === 2); // 2

findLastIndex(callback) Returns the index of the last element matching a condition.

  [1, 2, 3, 2].findLastIndex(x => x === 2); // 3

includes(value, fromIndex) Checks if array contains a value.

  [1, 2, 3].includes(2); // true

indexOf(value, fromIndex) Returns the first index of a value, or -1 if not found.

  [1, 2, 3].indexOf(2); // 1

lastIndexOf(value, fromIndex) Returns the last index of a value, or -1 if not found.

  [1, 2, 3, 2].lastIndexOf(2); // 3

some(callback) Checks if at least one element passes the test.

  [1, 2, 3].some(x => x > 2); // true

every(callback) Checks if all elements pass the test.

  [1, 2, 3].every(x => x > 0); // true

Sorting & Reversing

sort(compareFunction) Sorts array in place.

  [3, 1, 2].sort(); // [1, 2, 3]

toSorted(compareFunction) Returns a sorted copy (does not modify original).

  [3, 1, 2].toSorted(); // [1, 2, 3]

reverse() Reverses array in place.

  [1, 2, 3].reverse(); // [3, 2, 1]

toReversed() Returns a reversed copy (does not modify original).

  [1, 2, 3].toReversed(); // [3, 2, 1]

String Conversion

join(separator) Joins all elements into a string.

  [1, 2, 3].join('-'); // '1-2-3'

toString() Converts array to a comma-separated string.

  [1, 2, 3].toString(); // '1,2,3'

Iterators

entries() Returns an iterator of [index, value] pairs.

  for (const [i, v] of ['a', 'b'].entries()) { console.log(i, v); }
  // 0 'a', 1 'b'

keys() Returns an iterator of keys (indices).

  for (const k of ['a', 'b'].keys()) { console.log(k); }
  // 0, 1

values() Returns an iterator of values.

  for (const v of ['a', 'b'].values()) { console.log(v); }
  // 'a', 'b'

Immutable Array Methods (ES2023+)

toSpliced(start, deleteCount, ...items) Returns a copy with elements added/removed (original unchanged).

  [1, 2, 3].toSpliced(1, 1, 9); // [1, 9, 3]

Miscellaneous

length Returns or sets the number of elements.

  const arr = [1, 2, 3]; arr.length; // 3

valueOf() Returns the array itself (default behavior).

  [1, 2, 3].valueOf(); // [1, 2, 3]

constructor Returns the function that created the Array prototype.

  [].constructor === Array; // true

prototype Allows adding properties/methods to Array objects (advanced use).

  Array.prototype.sum = function() { return this.reduce((a, b) => a + b, 0); }
  [1, 2, 3].sum(); // 6