JavaScript Arrays and Array Methods Tutorial

Introduction to JavaScript Arrays

An array is a collection of values stored as a list, and it can contain different data types.
Arrays are zero-indexed, meaning the first element is at index 0, the second at index 1, and so forth.

let namesArray = ["Alex", "Jack", "Stefan"];
console.log(namesArray); // Output: [ 'Alex', 'Jack', 'Stefan' ]

let scoresArray = [78, 79, 79]; 
console.log(scoresArray); // Output: [ 78, 79, 79 ]

let playerProfiles = [
{
    name:"Alex",
    score:78
},
{
    name:"Jack",
    score:79
}
]
console.log(playerProfiles); // Output: [ { name: 'Alex', score: 78 }, { name: 'Jack', score: 79 } ]

Creating Arrays

You can create arrays using square brackets [].
You can initialize an empty array or with values

let emptyArray = [];
let numbers = [1, 2, 3, 4, 5];

Accessing Array Elements

You can access array elements using their index. Remember that arrays are zero-indexed.

let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[0]); // Output: 'apple'
console.log(fruits[1]); // Output: 'banana'

Modifying Arrays

Arrays are mutable, so you can change their elements.

let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits); ///Output: [ 'apple', 'banana', 'cherry' ]

fruits[1] = 'grape'; // Modifying the second element
console.log(fruits); // Output: [ 'apple', 'grape', 'cherry' ]

Iterating Over Arrays

You can use loops, such as for, for of and forEach, to iterate over arrays.

let fruits = ['apple', 'banana', 'cherry'];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
/* Output:
apple
banana
cherry
*/

fruits.forEach(function(fruit) {
    console.log(fruit);
});
/* Output:
apple
banana
cherry
*/

for (let i of fruits) {
    console.log(i);
}
/* Output:
apple
banana
cherry
*/

The forEach method is called on the array, and a callback function is provided to execute for each element.

The callback function receives each element as a parameter and logs it.

for...of loop iterates over the values of the array directly, providing a simpler syntax.

It logs each element of the array.

If you not understand how loops works, don't worry we will talk about them later.

Array Methods

Array methods in JavaScript allow you to perform various operations on arrays, such as adding, removing, and searching for elements.
push(): Adds one or more elements to the end of an array.
pop(): Removes the last element from an array and returns it.
unshift(): Adds one or more elements to the beginning of an array.
shift(): Removes the first element from an array and returns it.
concat(): Merges two or more arrays into a new array.
slice(): Extracts a subarray from an array, starting at a specified index and ending at another specified index.
splice(): Removes or replaces elements from an array, and optionally adds new elements.
indexOf(): Returns the index of the first occurrence of an element in an array, or -1 if the element is not found.
lastIndexOf(): Returns the index of the last occurrence of an element in an array, or -1 if the element is not found.
includes(): Checks if an array contains a specified element.
filter(): Creates a new array containing all of the elements of the original array that pass a test.
map(): Creates a new array containing the results of calling a function on each element of the original array.
reduce(): Reduces the elements of an array to a single value.

const arr = [1, 2, 3, 4, 5];

// Add an element to the end of the array.
arr.push(6);

// Remove the last element from the array.
arr.pop();

// Add an element to the beginning of the array.
arr.unshift(0);

// Remove the first element from the array.
arr.shift();

// Merge the array with another array.
const arr2 = [7, 8, 9];
const mergedArr = arr.concat(arr2);

// Extract a subarray from the array.
const subArr = arr.slice(1, 3);

// Remove and replace elements from the array.
arr.splice(2, 1, 10);

// Check if the array contains a specified element.
const includes = arr.includes(10);

// Create a new array containing all of the elements of the original array that pass a test.
const evenArr = arr.filter((element) => element % 2 === 0);

// Create a new array containing the results of calling a function on each element of the original array.
const doubleArr = arr.map((element) => element * 2);

// Reduce the elements of the array to a single value.
const sum = arr.reduce((total, element) => total + element);

console.log(arr); // [0, 1, 10, 4, 5]
console.log(mergedArr); // [0, 1, 10, 4, 5, 7, 8, 9]
console.log(subArr); // [1, 10]
console.log(includes); // true
console.log(evenArr); // [0, 4, 10]
console.log(doubleArr); // [0, 2, 20, 8, 10]
console.log(sum); // 34

Previous Next