This content originally appeared on DEV Community and was authored by Crosston J
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]
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]
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"]
** 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"]
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
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"]
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.
This content originally appeared on DEV Community and was authored by Crosston J