💯 Arrays in Javascript - Guide
shift(), unshift(), pop(), map(), filter(), it gets fancy
JavaScript Array Basics
1. Creating Arrays
There are several ways to create arrays in JavaScript:
// Empty array
const emptyArray = [];
// Array with values
const numbers = [1, 2, 3, 4, 5];
// Array with different data types
const mixedArray = [1, 'hello', true, null, { name: 'Alice' }];
2. Accessing array elements
The elements of an array can be accessed by their index. The index starts at 0.
const colors = ['red', 'green', 'blue'];
console.log(colors[0]); // "red"
console.log(colors[1]); // "green"
3. Array length
The length of an array can be determined using the length property.
const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.length); // 3
Commonly used array methods
1. Adding elements
push(): Adds one or more elements to the end of the array.
const numbers = [1, 2, 3];
numbers.push(4, 5); // [1, 2, 3, 4, 5]
unshift(): Adds one or more elements to the beginning of the array.
const numbers = [1, 2, 3];
numbers.unshift(0); // [0, 1, 2, 3]
2. Removing elements
pop(): Removes the last element of the array and returns it.
const numbers = [1, 2, 3];
const last = numbers.pop(); // last is 3, numbers is now [1, 2]
shift(): Removes the first element of the array and returns it.
const numbers = [1, 2, 3];
const first = numbers.shift(); // first is 1, numbers is now [2, 3]
3. Finding elements
indexOf(): Returns the index of the first occurrence of a given value, or -1 if the value was not found.
const fruits = ['apple', 'banana', 'orange'];
const index = fruits.indexOf('banana'); // 1
4. Iteration over arrays
forEach(): Executes a function for each element in the array.
const numbers = [1, 2, 3];
numbers.forEach(num => {
console.log(num * 2); // 2, 4, 6
});
map(): Creates a new array with the results of applying a function to each element.
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]
filter(): Creates a new array with all elements that pass the test of a function.
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0); // [2, 4]
Cool tricks with JavaScript arrays
1. Array combination
The spread operator can be used to combine two arrays.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
2. Array Duplication
An array can be duplicated in a number of ways, including the spread operator.
const original = [1, 2, 3];
const copy = [...original]; // [1, 2, 3]
3. Removing Duplicates
To remove duplicates from an array, the spread operator can be combined with a set.
const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)]; // [1, 2, 3, 4, 5]
4. Selecting a Random Element
To select a random element from an array, one can use the Math.random() function.
const colors = ['red', 'green', 'blue'];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
console.log(randomColor); // e.g. "green"
5. Array flattening
The flat() method can be used to merge nested arrays into a single array.
const nestedArray = [1, [2, 3], [4, 5]];
const flatArray = nestedArray.flat(); // [1, 2, 3, 4, 5]
6. Array reverse
The reverse() method can be used to reverse the order of the elements in an array.
const numbers = [1, 2, 3];
numbers.reverse(); // [3, 2, 1]
Summary
JavaScript arrays are a versatile and powerful data structure used in many programming scenarios. Using the various methods to manipulate and edit arrays can greatly increase the efficiency of your code. Using the tricks presented, you can extend the functionality of your arrays and perform various interesting operations.