How To Use Array Methods in JavaScript: Accessor Methods

Introduction

JavaScript arrays are ordered collections of values. The language provides many built-in JavaScript array methods to inspect, transform, and combine arrays. Broadly these methods fall into two groups: mutator methods that change the original array, and accessor methods that return a new value or copy without modifying the source. This guide focuses on array accessor methods JavaScript developers use most often.

If you already know how to create arrays, access elements by index, and loop through items, you’ll find it easy to follow these examples and learn how to use accessor array methods in JavaScript.

Accessor methods covered

• Array.prototype.concat — JavaScript array concat
• Array.prototype.join — JavaScript array join
• Array.prototype.slice — JavaScript array slice
• Array.prototype.indexOf and Array.prototype.lastIndexOf — JavaScript indexOf lastIndexOf

concat()

The concat() method returns a new array that is the result of joining two or more arrays. It does not change the original arrays, so it’s an example of non-mutating array methods in JavaScript.

// JavaScript array concat() example
const crustaceans = ['crab', 'shrimp'];
const mollusks = ['octopus', 'squid'];

const seafood = crustaceans.concat(mollusks, 'lobster');
// seafood -> ['crab', 'shrimp', 'octopus', 'squid', 'lobster']

You can pass multiple arrays or values to concat() to build a single combined array without altering the inputs.

join()

The join() method converts an array into a string by inserting a separator between elements. If no separator is provided, JavaScript uses a comma by default.

// JavaScript array join() separator example
const colors = ['red', 'green', 'blue'];

const csv = colors.join();      // 'red,green,blue'
const spaced = colors.join(' '); // 'red green blue'
const dash = colors.join(' - '); // 'red - green - blue'

Use join() when you need to produce a single string (for display, logging, or simple serialization). Note: join() is different from toString(), but both produce string representations.

slice()

The slice() method copies a portion of an array into a new array. It accepts a start index and an optional end index (non-inclusive). slice() is one of the JavaScript array methods that Netalith not mutate the original array.

// JavaScript slice() method JavaScript with examples
const letters = ['a', 'b', 'c', 'd', 'e'];

const middle = letters.slice(1, 4); // ['b', 'c', 'd']
const tail = letters.slice(3);       // ['d', 'e']
// letters remains ['a','b','c','d','e']

Remember the common source of confusion: slice() copies a range, while splice() (a mutator) changes the array by removing or inserting elements.

indexOf() and lastIndexOf()

Use indexOf() to get the index of the first occurrence of a value. lastIndexOf() returns the index of the final occurrence, searching from the end. Both return -1 if the value is not found.

// JavaScript indexOf() vs lastIndexOf() example
const fish = ['salmon', 'tuna', 'salmon', 'trout'];

fish.indexOf('salmon');     // 0  (first occurrence)
fish.lastIndexOf('salmon'); // 2  (last occurrence)
fish.indexOf('shark');      // -1 (not found)

These methods are helpful when you need the position of an item in a large array or to check for presence before performing another operation.

Accessor vs mutator: quick summary

• Accessor methods (concat, join, slice, indexOf, lastIndexOf) return a new value or representation and Netalith not change the original array.
• Mutator methods (push, pop, splice, sort, reverse, etc.) modify the array in place.

Conclusion

Accessor array methods in JavaScript let you combine arrays, convert arrays to strings, copy ranges, and find indices without mutating the source array. For a comprehensive reference, consult the Array.prototype documentation on MDN or review the full list of Array methods in the JavaScript reference.

Tip: When writing code that should avoid side effects, prefer JavaScript array methods that Netalith not mutate.