Understanding JavaScript `Array` Methods — A Practical Guide

Arrays are one of the most-used built-in objects in JavaScript. Below I walk through many of the Array static and instance methods with short explanations and runnable examples.

Static methods (called on `Array`)

`Array.from()`

Creates an array from an iterable or array-like object. You can also pass a mapping function as the second argument.

// Example: convert a NodeList-like object to array and double numbers const nodeLike = {0: 'a', 1: 'b', length: 2}; const arr = Array.from(nodeLike); console.log(arr); // ['a', 'b']


const doubled = Array.from([1,2,3], x => x * 2);
console.log(doubled); // [2,4,6]

`Array.fromAsync()`

Creates an array from an async iterable (or normal iterable/array-like). Useful when you need to consume async generators.

// Example async generator and Array.fromAsync async function* asyncNumbers() { yield 1; yield Promise.resolve(2); yield 3; }

(async () => {
const result = await Array.fromAsync(asyncNumbers());
console.log(result); // [1,2,3]
})();
// Note: Node and browsers may vary by version; ensure your runtime supports Array.fromAsync.

`Array.isArray()`

Checks if a value is an array.

console.log(Array.isArray([1,2])); // true console.log(Array.isArray('not an array')); // false console.log(Array.isArray({length:0})); // false

`Array.of()`

Creates a new array from arguments — different from the Array constructor when a single numeric argument is provided.

console.log(Array.of(7)); // [7] console.log(Array(7)); // creates empty array with length 7 (sparse) — not same as Array.of

Instance / prototype methods (call on an array)

`at()`

Gets element at index; supports negative indices.

const a = ['x','y','z']; console.log(a.at(1)); // 'y' console.log(a.at(-1)); // 'z' (from the end)

`concat()`

Returns a new array combining given arrays/values.

const a1 = [1,2]; const a2 = [3,4]; console.log(a1.concat(a2, 5)); // [1,2,3,4,5]

`copyWithin()`

Copies part of the array to another location in the same array (mutates).

const arrCW = [0,1,2,3,4]; arrCW.copyWithin(0, 3); // copy elements starting at index 3 to index 0 console.log(arrCW); // [3,4,2,3,4]

`entries()`

Returns iterator of [index, value] pairs.

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

`every()`

Checks if all elements pass test.

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

const allEven = [2,4,5].every(x => x % 2 === 0);
console.log(allEven); // false

`fill()`

Fills array elements with a static value (mutates).

const f = new Array(5).fill(0); console.log(f); // [0,0,0,0,0]

const f2 = [1,2,3,4].fill('x', 1, 3);
console.log(f2); // [1, 'x', 'x', 4]

`filter()`

Returns a new array containing only elements that pass the test.

const evens = [1,2,3,4].filter(x => x % 2 === 0); console.log(evens); // [2,4]

`find()` and `findIndex()`

find returns the first value that matches; findIndex returns its index.

const items = [{id:1},{id:2},{id:3}]; console.log(items.find(o => o.id === 2)); // {id:2} console.log(items.findIndex(o => o.id === 2)); // 1

`findLast()` and `findLastIndex()`

Similar to find/findIndex but search from the end.

const arr = [1,2,3,2,1]; console.log(arr.findLast(x => x < 3)); // 2 (the last element < 3) console.log(arr.findLastIndex(x => x < 3)); // 3

`flat()` and `flatMap()`

flat flattens nested arrays; flatMap maps then flattens one level.

console.log([1,[2,3],[4,[5]]].flat()); // [1,2,3,4,[5]] console.log([1,2,3].flatMap(x => [x, x * 2])); // [1,2,2,4,3,6]

`forEach()`

Runs a function for each element — returns undefined (use map for transformed arrays).

['a','b','c'].forEach((v,i) => console.log(i, v));

`includes()`, `indexOf()`, `lastIndexOf()`

Search helpers.

const names = ['tom','jerry','tom']; console.log(names.includes('tom')); // true console.log(names.indexOf('tom')); // 0 console.log(names.lastIndexOf('tom')); // 2

`join()`

Join elements into a string.

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

`keys()` and `values()`

Iterators of indices and values.

for(const k of [10,20,30].keys()) console.log(k); // 0,1,2 for(const v of [10,20,30].values()) console.log(v); // 10,20,30

`map()`

Transforms each element into a new array.

const squared = [1,2,3].map(x => x*x); console.log(squared); // [1,4,9]

`pop()`, `push()`, `shift()`, `unshift()`

Stack/queue style mutating operations.

const stack = [1,2,3]; console.log(stack.pop()); // 3, stack now [1,2] stack.push(4); // stack [1,2,4]

const q = [1,2,3];
console.log(q.shift()); // 1, q now [2,3]
q.unshift(0); // q now [0,2,3]

`reduce()` and `reduceRight()`

Reduce values to a single result.

const sum = [1,2,3,4].reduce((acc, v) => acc + v, 0); console.log(sum); // 10

// reduceRight example (string concatenation)
console.log(['a','b','c'].reduceRight((acc, v) => acc + v)); // "cba"

`reverse()`

Reverses array in-place (mutates).

const r = [1,2,3]; r.reverse(); console.log(r); // [3,2,1]

`slice()`

Non-mutating subarray extraction.

const s = [0,1,2,3,4]; console.log(s.slice(1,4)); // [1,2,3] console.log(s); // original unchanged

`some()`

Checks if at least one element passes the test.

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

`sort()`

Sorts in-place. Beware: default sorts strings; provide comparator for numbers.

const nums = [10,2,33]; nums.sort(); // lexicographic sort console.log(nums); // [10,2,33] — surprising sometimes

nums.sort((a,b) => a - b);
console.log(nums); // [2,10,33]

`splice()`

Adds/removes elements (mutates).

const sp = [1,2,3,4]; const removed = sp.splice(1,2, 'a','b'); // at index 1 remove 2 items and insert 'a','b' console.log(removed); // [2,3] console.log(sp); // [1,'a','b',4]

`toLocaleString()`, `toString()`

String representations (locale-aware and default).

console.log([1,2,3].toString()); // "1,2,3" console.log([1000].toLocaleString('de-DE')); // "1.000" (locale example)

`toReversed(), toSorted(), toSpliced()`

Non-mutating newer helpers that return modified copies (instead of changing original). Handy for immutable patterns.

const base = [3,1,2]; console.log(base.toSorted()); // [1,2,3] (base unchanged) console.log(base); // [3,1,2]

console.log([1,2,3].toReversed()); // [3,2,1] (non-mutating)

console.log([1,2,3,4].toSpliced(1,2, 'x')); // returns [1, 'x', 4] original stays same

`with()`

Return new array with value replaced at index (doesn't mutate original).

const old = [0,1,2]; const replaced = old.with(1, 'one'); console.log(replaced); // [0,'one',2] console.log(old); // [0,1,2]

`[Symbol.iterator]()`

Arrays are iterable — this method returns the default iterator (values).

const it = [10,20,30][Symbol.iterator](); console.log(it.next()); // { value: 10, done: false }

Practical mini-project: small demo that uses many methods

Below is a function that simulates a tiny "user list" pipeline: fetch (simulated), map, filter, reduce, and demonstrates mutation vs non-mutation.

async function demoPipeline() { // simulate async iterable of user scores async function* gen() { yield {name: 'alice', score: 10}; yield {name: 'bob', score: 20}; yield Promise.resolve({name: 'carol', score: 15}); }

// collect using Array.fromAsync
const users = await Array.fromAsync(gen());
console.log('users from async iterable:', users);

// map to scores and create a new array
const scores = users.map(u => u.score);
console.log('scores:', scores);

// filter good scorers
const good = users.filter(u => u.score >= 15);
console.log('good scorers:', good);

// total score using reduce
const total = scores.reduce((a,b) => a + b, 0);
console.log('total score:', total);

// immutably sort the users by score
const sorted = users.toSorted((a,b) => b.score - a.score);
console.log('sorted copy:', sorted);
console.log('original users still:', users);

// show using with() to change a name immutably
const changed = users.with(0, {...users[0], name: 'ally'});
console.log('changed copy:', changed);
}

demoPipeline();

Conclusion

Working with arrays in JavaScript becomes much easier when you understand these methods. Try practicing each method with different examples to get more comfortable. Remember, the more you code, the better you get!

What's Next?

If you found this guide helpful, share it with friends or bookmark it for later. You can also check out other JavaScript tutorials to keep improving your skills.

Created by PageEngineer.com

Understanding JavaScript Array Methods — A Practical Guide

Static methods (called on Array)

Array.from()

Array.fromAsync()

Array.isArray()

Array.of()

Instance / prototype methods (call on an array)

at()

concat()

copyWithin()

entries()

every()

fill()

filter()

find() and findIndex()

findLast() and findLastIndex()

flat() and flatMap()

forEach()

includes(), indexOf(), lastIndexOf()

join()

keys() and values()

map()

pop(), push(), shift(), unshift()

reduce() and reduceRight()

reverse()

slice()

some()

sort()

splice()

toLocaleString(), toString()

toReversed(), toSorted(), toSpliced()

with()

[Symbol.iterator]()