Part 5: Mastering JavaScript Arrays

Welcome to the beginner to advanced series on JavaScript! In this part, we'll dive into the world of arrays. You'll learn what arrays are, how to create them, how to access their elements, how to modify their values, and more.

What are arrays?

In JavaScript, an array is a collection of elements, such as values or variables, stored in a single variable. Arrays are a special type of object that have a length property and a set of numbered properties that can hold values.

Why use arrays?

Arrays in JavaScript can hold any type of value, including strings, numbers, objects, and even other arrays. The elements of an array are indexed starting at 0, so the first element of an array is at index 0, the second element is at index 1, and so on.

How to create arrays?

To create an array in JavaScript, you can use square brackets [] with a list of values or variables separated by commas.
For Example:

• Array of alphabet with 3 elements

const Array = ["a", "b", "c"];
console.log(Array); // output: ['a', 'b', 'c']

• Array of numbers with 4 elements

const arrayObject = [1, 2, 3, 4];
console.log(arrayObject); // output: [1, 2, 3, 4]

• Array of strings with 3 elements

const arrayString = ["Hello", "World", "JavaScript"];
console.log(arrayString); // output: ['Hello', 'World', 'JavaScript']

• Array of booleans with 2 elements

const arrayBoolean = [{ name: "John" }, { name: "Doe" }];
console.log(arrayBoolean); // output: [{ name: 'John' }, { name: 'Doe' }]

• Array of objects with 2 elements

const  arrayObjects = [
    [1, 2, 3],
    [4, 5, 6],
]; console.log(t  arrayObjects);[4, 5, 6]

• array of mixed types with 4 elements

const arrayMixed = ["Hello", 10, { name: "John" }, [1, 2, 3]];
console.log(arrayMixed); // output: ['Hello', 10, { name: 'John' }, [1, 2, 3]]

Creating an empty array

You can also create an empty array and add elements to it later using the push() method:

// creating an empty array and adding elements to it later
const emptyArray = [];
emptyArray.push("Isaiah");
emptyArray.push("Clifford");
emptyArray.push("Opoku");

console.log(emptyArray) // output: ['Isaiah', 'Clifford', 'Opoku']

How to access array elements?

You can access the elements of an array using square bracket notation with the index of the element you want to access.
For example

// using square bracket notation to access the elements of an array
const   accessArray   = ["Hello", "World", "JavaScript"];
const accessArray = ["Hello", "World", "JavaScript"];
console.log(accessArray[0]); // Hello
console.log(accessArray[1]); // World
console.log(accessArray[2]); // JavaScript

How to modify array elements?

You can also modify the values of an array by assigning new values to its elements.
For example

//modifying the values of an array
const modifyArray = ["Hello", "World", "JavaScript"];

modifyArray[0] = "javascript";
modifyArray[1] = "world";
modifyArray[2] = "hello";

console.log(modifyArray); // [ 'javascript', 'world', 'hello' ]

How to add elements to an array?

• Arrays are dynamic: Unlike some other programming languages, arrays in JavaScript are dynamic, which means their length can be changed at any time by adding or removing elements.

  • Array are dynamic example

let myArray = ["Hello", "World", "JavaScript"];

myArray.push("!"); // add an element to the end of the array

console.log(myArray); // output: ['Hello', 'World', 'JavaScript', '!']
// myArray now has 4 elements we have added something  to the end of the array which changed the length of the array.

Stack and Queue

• Arrays can be used as stacks and queues: Arrays can be used as both stacks (last-in, first-out) and queues (first-in, first-out) by using the push(), pop(), shift(), and unshift() methods.

LIFO (Stack):

// LIFO (Stack) example

// Create a new stack (empty array)
const  stack = [];

// Add elements to the top of the stack using push()
stack.push("apple");
stack.push("banana");
stack.push("cherry");

// Remove the top element of the stack using pop()
let lastItem = stack.pop();
console.log(lastItem); // output : "cherry"
console.log(stack); // output: ["apple", "banana"]

In this example, the push() method is used to add elements to the top of the stack, and the pop() method is used to remove the top element of the stack (i.e., the last item that was added).

• FIFO (Queue)

// FIFO (Queue) example

// Create a new queue (empty array)
const queue = [];

// Add elements to the end of the queue using push()
queue.push("apple");
queue.push("banana");
queue.push("cherry");

// Remove the first element of the queue using shift()
let firstItem = queue.shift();
console.log(firstItem); // output: "apple"
console.log(queue); // output: ["banana", "cherry"]

In this example, the push() method is used to add elements to the end of the queue, and the shift() method is used to remove the first element of the queue (i.e., the item that was added first).

Built-in methods for arrays

• Arrays have many built-in methods: In addition to the push(), pop(), shift(), and unshift() methods, arrays in JavaScript have many other built-in methods, such as slice(), splice(), concat(), join(), reverse(), sort(), and more. These methods can be used to manipulate arrays in various ways.

Array built-in methods example

• Define an array of numbers

const numbers = [5, 3, 8, 2, 4, 1];

• Use the slice() method to create a new array with a subset of the original array

const  slicedNumbers = numbers.slice(1, 4);
console.log(slicedNumbers); // output: [3, 8, 2]

• Use the splice() method to remove elements from the array and add new elements in their place

numbers.splice(2, 2, 9, 7); 
console.log(numbers); // output: [5, 3, 9, 7, 4, 1]

• Use the concat() method to combine two arrays into a new array

const moreNumbers = [6, 0];
const  combinedNumbers = numbers.concat(moreNumbers); 
console.log(combinedNumbers); // output: [5, 3, 9, 7, 4, 1, 6, 0]

• Use the join() method to create a string from the elements of the array

const  numberString = numbers.join(" - "); 
console.log(numberString); // output: "5 - 3 - 9 - 7 - 4 - 1"

• Use the reverse() method to reverse the order of the elements in the array

numbers.reverse();
console.log(numbers);  // output: [1, 4, 7, 9, 3, 5]

• Use the sort() method to sort the elements of the array

numbers.sort(); 
console.log(numbers);  // [ 1, 2, 3, 4, 5, 7, 8, 9 ]

In this example, the slice() method is used to create a new array with a subset of the original array, the splice() method is used to remove elements from the array and add new elements in their place, the concat() method is used to combine two arrays into a new array, the join() method is used to create a string from the elements of the array, the reverse() method is used to reverse the order of the elements in the array, and the sort() method is used to sort the elements of the array. These are just a few examples of the many built-in array methods available in JavaScript.

How to iterate over an array?

Arrays can be iterated using loops: You can iterate over the elements of an array using loops, such as for loops and while loops, or using array-specific methods, such as forEach(), map(), filter(), reduce(), and others.

Array iteration example

• Define an array of numbers

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

• Iterate over the elements of the array using a for loop

for (let i = 0; i < numbersTwo.length; i++)
    console.log(numbersTwo[i]); // 1 2 3 4 5 

• Iterate over the elements of the array using a while loop

for (let i = 0; i < numbersTwo.length; i++) {
  console.log(numbersTwo[i]); // output: 1, 2, 3, 4, 5
}

• Iterate over the elements of the array using the forEach() method

numbersTwo.forEach(function (numbersTwo) {
  console.log(numbersTwo);   // output: 1, 2, 3, 4, 5,6 
});

• Use the map() method to create a new array with the square of each element Using the map() method;

const  squaredNumbers = numbers.map(function (number) {
  return number * number; // output: 1, 4, 9, 16, 25
});
console.log(squaredNumbers);

• Use the filter() method to create a new array with only the even elements Using the filter() method;

const  evenNumbers = numbers.filter(function (number) {
  return number % 2 === 0;
});
console.log(evenNumbers); // output 2, 4

• Use the reduce() method to compute the sum of the elements Using the reduce() method;

const  sum = numbers.reduce(function (accumulator, number) {
  return accumulator + number;
}, 0);
console.log(sum); // output: 15

In this example, we defined an array of numbers and demonstrated several ways to iterate over the elements of the array:

Using a for loop
Using a while loop
Using the forEach() method
We also used several array-specific methods to manipulate the array:

Using the map() method to create a new array with the square of each element
Using the filter() method to create a new array with only the even elements
Using the reduce() method to compute the sum of the elements

Nested Arrays

• Arrays can be nested: You can nest arrays inside other arrays to create multi-dimensional arrays, which can be useful for storing complex data structures. For example, you could create a 2D array to represent a matrix, or a 3D array to represent a cube.

Nested arrays example

• Define a 2D array to represent a matrix

const  matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

• Iterate over the elements of the 2D array using nested for loops

console.log("Iterating over the 2D array:");
for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    console.log(matrix[i][j]); // output: 1, 2, 3, 4, 5, 6, 7, 8, 9
  }
}
``
// Define a 3D array to represent a cube
let cube = [
  [
    [0, 0, 0],
    [0, 0, 1],
    [0, 0, 2],
  ],
  [
    [0, 1, 0],
    [0, 1, 1],
    [0, 1, 2],
  ],
  [
    [0, 2, 0],
    [0, 2, 1],
    [0, 2, 2],
  ],
];

// Iterate over the elements of the 3D array using nested for loops
console.log("Iterating over the 3D array:");
for (let i = 0; i < cube.length; i++) {
  for (let j = 0; j < cube[i].length; j++) {
    for (let k = 0; k < cube[i][j].length; k++) {
      console.log(cube[i][j][k]); // output: 0, 0, 0, 0, 0, 1, 0, 0, 2, 0, 1, 0, 0, 1, 1, 0, 1, 2, 0, 2, 0, 0, 2, 1, 0, 2, 2
    }
  }
}

Array methods

• Arrays can be copied by value or by reference: When you copy an array in JavaScript, you can do it either by value or by reference. Copying by value creates a new array with the same elements as the original array, while copying by reference creates a new variable that points to the same array as the original variable. This can have some unexpected consequences when working with arrays, so it's important to understand how copying works in JavaScript.

// Array copying example
// Define an array
let originalArray = [1, 2, 3];

// Copy the array by value using the slice() method
let copyByValue = originalArray.slice();

// Modify the copy by value
copyByValue.push(4);

// Modify the original array
originalArray.push(5);

// Print the results
console.log("Copy by value:", copyByValue); // Output: [1, 2, 3, 4]
console.log("Original array:", originalArray); // Output: [1, 2, 3, 5]

// Define an array
let anotherArray = [4, 5, 6];

// Copy the array by reference
let copyByReference = anotherArray;

// Modify the copy by reference
copyByReference.push(7);

// Modify the original array
anotherArray.push(8);

// Print the results
console.log("Copy by reference:", copyByReference); // Output: [4, 5, 6, 7, 8]
console.log("Original array:", anotherArray); // Output: [4, 5, 6, 7, 8]

In this example, we first defined an array and then created a copy of it by value using the slice() method. We also created another array and copied it by reference. We then modified both the copies and the originals to see how the changes propagate.

When we modified the copy by value, the original array was not affected. This is because the slice() method creates a new array with the same elements as the original array. When we modified the copy by reference, the original array was also affected. This is because the copy by reference is just a new variable that points to the same array as the original variable. When we modify the copy by reference, we are actually modifying the original array.

Array Methods

Conclusion

So far we have cover some the coempts of arrays in javascript. Arrays are important when your dealing with data in javascript.
take them and practices you can do a further reading to get more information on arrays in javascript.
you find all the code example been used this blog here

author

• github
• Linkedin