JavaScript offers a powerful set of built-in array methods that make working with data much easier.

In this post, we’ll explore four commonly used array methods: concat(), reverse(), fill(), and join().

Each of these methods is a valuable tool for manipulating arrays in different ways. Let’s dive in!

If you haven't read our previous post yet, be sure to check out Part 1 for more useful array techniques! This will give you a complete overview of even more powerful array methods.

1. concat()

The concat() method allows you to merge multiple arrays or values into a new array. It does not modify the original array but returns a new one with the combined contents.

Syntax:

arr.concat(value1, value2, ...);

• value1, value2, ... – Can be arrays or values to merge.

If the argument is an array, all elements from that array are copied; otherwise, the argument itself is copied.

Example:

const arr = [1, 2];

// Merging arr with another array [3, 4]
const arr1 = arr.concat([3, 4]);
console.log(arr1);  // Output: [1, 2, 3, 4]

// Merging arr with two arrays [3, 4] and [5, 6]
const arr2 = arr.concat([3, 4], [5, 6]);
console.log(arr2);  // Output: [1, 2, 3, 4, 5, 6]

// Merging arr with two arrays and additional values 5 and 6
const arr3 = arr.concat([3, 4], 5, 6);
console.log(arr3);  // Output: [1, 2, 3, 4, 5, 6]

2. reverse()

The reverse() method reverses the order of elements in the original array. Unlike other array methods, reverse() modifies the original array in-place and also returns it.

Syntax:

arr.reverse();

Example:

const arr = [1, 2, 3, 4, 5];

// Reverses the array in place and returns the reversed array
const reversedArr = arr.reverse();
console.log(reversedArr);  // Output: [5, 4, 3, 2, 1]

// Original array is also reversed
console.log(arr);  // Output: [5, 4, 3, 2, 1]

3. fill()

The fill() method fills all elements in an array with a specified value. It’s a mutator method, meaning it modifies the original array and returns the updated version.

Syntax:

arr.fill(value, start, end)

• value – The value to fill the array with.
• start (optional) – The starting index (default is 0).
• end (optional) – The ending index (default is arr.length).

Important: The end index is not included—it acts as an exclusive boundary. This means that the filling will stop right before the element at the end index.

Example:

const nums1 = [15, 27, 19, 2, 1];
const nums2 = [25, 28, 34, 49];
const nums3 = [8, 9, 3, 7];

// Fill all elements with 5
const newNums1 = nums1.fill(5);
console.log(nums1);  // Output: [5, 5, 5, 5, 5]
console.log(newNums1);  // Output: [5, 5, 5, 5, 5]

// Fill elements from index 1 to 3 with 25
nums2.fill(25, 1, 3);
console.log(nums2);  // Output: [25, 25, 25, 49]

// Fill elements from index -2 to end with 15 (negative index counts from the end)
nums3.fill(15, -2);
console.log(nums3);  // Output: [8, 9, 15, 15]

4. join()

The join() method joins all the elements of an array into a single string. By default, the elements are separated by a comma , but you can specify a custom separator.

Syntax:

arr.join(separator);

• separator (optional) – A string used to separate the array elements (default is ,).

Example:

const movies = ["Animal", "Jawan", "Pathaan"];

// Join elements with a custom separator " | "
const moviesStr = movies.join(" | ");
console.log(moviesStr);  // Output: "Animal | Jawan | Pathaan"

// The original array remains unchanged
console.log(movies);  // Output: ["Animal", "Jawan", "Pathaan"]

// Join elements with no separator
const arr = [2, 2, 1, ".", 4, 5];
console.log(arr.join(""));  // Output: "221.45"

// Join elements with a custom separator " and "
const random = [21, "xyz", undefined];
console.log(random.join(" and "));  // Output: "21 and xyz and "

Conclusion

The concat(), reverse(), fill(), and join() methods are powerful tools for working with arrays in JavaScript.

• concat() combines arrays and values into a new array.
• reverse() reverses the order of elements in place.
• fill() replaces array elements with a specified value.
• join() joins array elements into a string, with a customizable separator.

These methods are essential for effective array manipulation and can help make your code cleaner and more efficient.