DEV Community

  Isaiah   Clifford Opoku
Isaiah Clifford Opoku

Posted on

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']
Enter fullscreen mode Exit fullscreen mode
  • Array of numbers with 4 elements
const arrayObject = [1, 2, 3, 4];
console.log(arrayObject); // output: [1, 2, 3, 4]
Enter fullscreen mode Exit fullscreen mode
  • Array of strings with 3 elements
const arrayString = ["Hello", "World", "JavaScript"];
console.log(arrayString); // output: ['Hello', 'World', 'JavaScript']
Enter fullscreen mode Exit fullscreen mode
  • Array of booleans with 2 elements
const arrayBoolean = [{ name: "John" }, { name: "Doe" }];
console.log(arrayBoolean); // output: [{ name: 'John' }, { name: 'Doe' }]
Enter fullscreen mode Exit fullscreen mode
  • Array of objects with 2 elements
const  arrayObjects = [
    [1, 2, 3],
    [4, 5, 6],
]; console.log(t  arrayObjects);[4, 5, 6]
Enter fullscreen mode Exit fullscreen mode
  • 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]]
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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' ]
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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];
Enter fullscreen mode Exit fullscreen mode
  • 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]

Enter fullscreen mode Exit fullscreen mode
  • 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]

Enter fullscreen mode Exit fullscreen mode
  • 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]
Enter fullscreen mode Exit fullscreen mode
  • 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"

Enter fullscreen mode Exit fullscreen mode
  • 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]
Enter fullscreen mode Exit fullscreen mode
  • Use the sort() method to sort the elements of the array

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

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];

Enter fullscreen mode Exit fullscreen mode
  • 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 
Enter fullscreen mode Exit fullscreen mode
  • 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
}
Enter fullscreen mode Exit fullscreen mode
  • 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 
});


Enter fullscreen mode Exit fullscreen mode
  • 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);

Enter fullscreen mode Exit fullscreen mode
  • 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

Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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],
];

Enter fullscreen mode Exit fullscreen mode
  • 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
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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

Method Description
concat() Joins two or more arrays and returns a resulting array
indexOf() Searches an element of an array and returns its position
find() Returns the first value of an array element that passes a test
findIndex() Returns the first index of an array element that passes a test
forEach() Calls a function for each element
includes() Checks if an array contains a specified element
push() Adds a new element to the end of an array and returns the new length of an array
unshift() adds a new element to the beginning of an array and returns the new length of an array
pop() removes the last element of an array and returns the removed element
shift() emoves the first element of an array and returns the removed element
sort() sorts the elements alphabetically in strings and in ascending order
slice() selects the part of an array and returns the new array

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

Top comments (2)

Collapse
 
mxglt profile image
Maxime Guilbert

Excellent post! Code samples makes it really easy to understand and see how to use it directly

Collapse
 
clifftech123 profile image
Isaiah Clifford Opoku

sure .THank you