When working with JavaScript—whether on the frontend with frameworks like React or on the backend with NestJS—one of the most common data structures is the array. Arrays allow us to store collections of data and offer a wide range of operators and methods to manipulate them efficiently.
In this article, we'll explore the main operators and methods you can use with arrays to transform, filter, combine, and analyze information.
📌 What Is an Array?
An array in JavaScript is an ordered collection of items. It can contain any type of data: numbers, strings, objects, or even other arrays.
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, 'text', true, null, [6, 7]];
🧹 Useful Operators for Arrays
1. Spread Operator (...)
Allows cloning or combining arrays in a very readable way.
const a = [1, 2];
const b = [3, 4];
const combined = [...a, ...b]; // [1, 2, 3, 4]
2. Destructuring
Extracts individual elements from an array easily.
const [first, second] = [10, 20, 30]; // first = 10, second = 20
🔄 Common Methods to Manipulate Arrays
🔹 Mutation Methods (modify the original array)
| Method | Description |
|---|---|
push() |
Adds elements to the end. |
pop() |
Removes the last element. |
shift() |
Removes the first element. |
unshift() |
Adds elements to the beginning. |
splice() |
Adds/removes elements at a position. |
sort() |
Sorts the array. |
reverse() |
Reverses the array order. |
const fruits = ['apple', 'banana'];
fruits.push('orange'); // ['apple', 'banana', 'orange']
fruits.splice(1, 1, 'pear'); // ['apple', 'pear', 'orange']
🔹 Iteration & Transformation Methods
| Method | Primary Use |
|---|---|
forEach() |
Executes a function for each element. |
map() |
Transforms elements and returns a new array. |
filter() |
Returns elements that meet a condition. |
reduce() |
Reduces array to a single value. |
find() |
Returns the first matching element. |
some() |
Checks if some elements match a condition. |
every() |
Checks if all elements match a condition. |
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8, 10]
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]
const total = numbers.reduce((acc, n) => acc + n, 0); // 15
🔹 Search Methods
const letters = ['a', 'b', 'c'];
letters.includes('b'); // true
letters.indexOf('c'); // 2
🔹 Conversion Methods
const words = ['hello', 'world'];
words.join(' '); // 'hello world'
🧠 Tip: Non-Destructive vs Destructive Methods
-
Non-destructive:
map(),filter(),slice(),concat(), etc. -
Destructive:
push(),pop(),splice(),sort(), etc.
Prefer non-destructive methods when aiming for immutability—a key principle in functional programming and modern frameworks.
🔪 Bonus: Advanced Methods
flat() and flatMap()
const nested = [1, [2, 3], [4, 5]];
nested.flat(); // [1, 2, 3, 4, 5]
const duplicated = [1, 2, 3].flatMap(n => [n, n]); // [1, 1, 2, 2, 3, 3]
🚀 Conclusion
Mastering array manipulation is essential for any JavaScript developer. Whether you're building APIs with NestJS or transforming data in the frontend, understanding these operators and methods will help you write cleaner, more efficient code.
Do you have a favorite array method or a cool tip? Let me know in the comments!
Top comments (0)