DEV Community

Crosston J
Crosston J

Posted on

"Level Up Your JavaScript: Array Methods (Part 2)"

#programming #javascript #webdev #learning

Intro for Part 2 – Array Methods

In the previous post, we explored some essential JavaScript array methods and how they make working with data easier. Today, in Part 2, we’ll continue our journey by learning more powerful methods that can help us manipulate, search, and transform arrays with less code and more efficiency.

1. The concat function

  • creates a new array by combining two or more arrays. 
const a = [1, 2];
const b = [3, 4]; 
const result = a.concat(b); 
console.log(result); // [1, 2, 3, 4]
Enter fullscreen mode Exit fullscreen mode

2. copyWithin()

  • Copies a set of array elements to a different location within the same array. 
const arr = [1, 2, 3, 4, 5];
arr.copyWithin(1, 3);  
console.log(arr); // [1, 4, 5, 4, 5]
Enter fullscreen mode Exit fullscreen mode

3. Array slice()

The slice() method returns a shallow copy of a portion of an array into a new array object, selected from start to end
(end not included).

Note: It does not modify the original array.

let fruits = ["apple", "banana", "mango", "orange"];
let sliced = fruits.slice(1, 3);  
console.log(sliced); // Output: ["banana", "mango"]
Enter fullscreen mode Exit fullscreen mode

** Explanation:**

  • 1 is the start index → it includes the value at index 1 ("banana").
  • 3 is the end index → it excludes the value at index 3 ("orange" is not included).
  • So the result is from index 1 to 2 → ["banana", "mango"].

4. Array splice()

Adds/removes elements from a specified index. Modifies the original array.

let fruits = ["apple", "banana", "mango", "orange"];
fruits.splice(1, 2, "grape", "kiwi");
console.log(fruits); 
// Output: ["apple", "grape", "kiwi", "orange"]
Enter fullscreen mode Exit fullscreen mode

Explanation:

1 → start index (removal begins from index 1 → "banana")

2 → number of elements to remove ("banana" and "mango")

"grape", "kiwi" → elements to insert at that position
Enter fullscreen mode Exit fullscreen mode

After splice(), the original array is modified. It’s not like slice(), which returns a copy.

5. Array toSpliced()

Like splice() but returns a new array and does not modify the original.


let fruits = ["apple", "banana", "mango", "orange"];
let newFruits = fruits.toSpliced(1, 2, "grape", "kiwi");
console.log(newFruits); 
// Output: ["apple", "grape", "kiwi", "orange"]

console.log(fruits);  
// Output: ["apple", "banana", "mango", "orange"]
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • Works just like splice() (same arguments: start, deleteCount, and items to insert)
  • But instead of editing fruits, it returns a new modified array
  • Original array remains unchanged

toSpliced() is useful when you want to avoid mutating the original array, which is important in functional programming or React state updates.

Conclusion

That’s it for Part 2 of our Array Methods series! With these tools in your coding arsenal, you can handle data like a pro. Keep practicing, because the more you use them, the more natural they’ll feel.

Quotes Time :

Do something today that your future self will thank you for.

Top comments (0)