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() methodto 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() methodto 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() methodto 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() methodto 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() methodto reverse the order of the elements in the array
numbers.reverse();
console.log(numbers); // output: [1, 4, 7, 9, 3, 5]
- Use the
sort() methodto 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() methodto create a new array with the square of each elementUsing 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() methodto compute the sum of the elementsUsing 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
| 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
Top comments (2)
Excellent post! Code samples makes it really easy to understand and see how to use it directly
sure .THank you