JavaScript ES6 Arrays

Arrays in JavaScript act as a powerful structure for storing elements in a particular order. You can store strings, numbers, objects, or even other arrays within them, and they offer many built-in methods to efficiently handle data.

let names = ["Steve", "Bob", "Sam", "Erick"];
let firstName = names[0]; // Returns "Steve"
let thirdName = names[2]; // Returns "Sam"

Remember, arrays use zero-based indexing, so the first element is at index 0. For instance, names[0] retrieves the first element, "Steve", and names[2] retrieves "Sam".

Defining Arrays

You can create arrays in different ways. The most common is using the square brackets syntax:

let scores = [87, 43, 88, 99];

You can also use the Array constructor, but it's less common:

let scores = new Array(87, 43, 88, 99);

Accessing Array Elements

Access elements using their index:

let scores = [87, 43, 88, 99];

scores[0]; // Returns 87
scores[1]; // Returns 43
scores[2]; // Returns 88

Looping Through Array Elements

The forEach() method allows you to execute a provided function for each array element.

let scores = [87, 43, 88, 99];

scores.forEach((x) => {
   console.log(x);
});

// Logs 87, 43, 88, 99

Other Array Methods

JavaScript provides a wide array of built-in methods to manipulate arrays. Let's look at some key methods and their practical examples:

concat()

Combines two or more arrays.

let scores = [87, 43, 88, 99];
let moreScores = [100, 33, 78, 44];

let allScores = scores.concat(moreScores);
// Returns [87, 43, 88, 99, 100, 33, 78, 44]

every()

Checks if every element passes a test provided as a function.

let scores = [87, 43, 88, 99];

scores.every(x => x > 10); // Returns true

filter()

Creates a new array with elements passing a test.

let scores = [87, 43, 88, 99];

let filteredScores = scores.filter(x => x > 80);
// Returns [87, 88, 99]

indexOf()

Finds the first occurrence index of an element in the array. Returns -1 if not found.

let scores = [87, 43, 88, 99];

scores.indexOf(88); // Returns 2
scores.indexOf(103); // Returns -1

map()

Creates a new array with the results of calling a provided function on every element.

let scores = [87, 43, 88, 99];

let incrementedScores = scores.map(x => x + 10);
// Returns [97, 53, 98, 109]

reduce()

Executes a reducer function on each element, resulting in a single output value.

let count = [1, 2, 3, 4];

let sum = count.reduce((a, b) => a + b, 0);
// Returns 10

sort()

Sorts the elements of an array in place and returns the sorted array.

let scores = [87, 43, 88, 99];

scores.sort(); // Returns [43, 87, 88, 99]
scores.sort((a, b) => b - a); // Returns [99, 88, 87, 43]

splice()

Changes array content by removing, replacing, or adding new elements.

let scores = [87, 43, 88, 99];
scores.splice(2, 0, 95);
// Returns []
// scores now equals [87, 43, 95, 88, 99]

find()

Returns the first element in the array that satisfies the provided testing function.

let scores = [87, 43, 95, 88, 99];

let score = scores.find(x => x > 90);
// Returns 95

findIndex()

Returns the index of the first element in the array that satisfies the provided testing function.

let scores = [87, 43, 95, 88, 99];

let index = scores.findIndex(x => x > 90);
// Returns 2

entries()

Returns a new Array Iterator object that contains the key/value pairs for each index in the array.

let scores = [87, 43, 95, 88, 99];

let iterator = scores.entries();
console.log(iterator.next().value); // [0, 87]
console.log(iterator.next().value); // [1, 43]

from()

Creates a new Array instance from an array-like or iterable object.

let nameArray = Array.from('Sam');
// Logs ['S', 'a', 'm']

keys()

Returns a new array iterator containing the keys for each index in the array.

let scores = [87, 43, 95, 88, 99];
let iterator = scores.keys();

console.log(iterator.next());
// logs {value: 0, done: false}

Conclusion

Arrays in JavaScript are versatile and powerful. Use them to store ordered collections of elements where the sequence is important, and leverage the vast set of methods available to manipulate them.

Key Takeaways

• Arrays are zero-based indexed collections in JavaScript.
• You can define arrays using the bracket notation or with the Array constructor.
• JavaScript arrays provide numerous built-in methods for accessing, manipulating, and iterating through elements.
• Methods like map, filter, and reduce allow functional paradigms over array data structures.

FAQ

What is the best way to create an array in JavaScript?

Using bracket notation (e.g., let arr = [];) is the most common and recommended way to create an array.

Can arrays in JavaScript hold different data types?

Yes, arrays in JavaScript are untyped, meaning they can store data of different types, including numbers, strings, objects, and even other arrays.

What is the difference between map and forEach?

The map method returns a new array with the results of applying a given function to each element, whereas forEach simply executes a function for each element without returning a new array.

Are array methods like sort and reverse destructive?

Yes, methods like sort and reverse modify the original array, which is known as being "destructive."