avaScript Array Methods Every Developer Should Master (Part 2)

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.

The above is the detailed content of avaScript Array Methods Every Developer Should Master (Part 2). For more information, please follow other related articles on the PHP Chinese website!