Home » JavaScript Arrays and Basic Operations: A Complete Tutorial with Examples

JavaScript Arrays and Basic Operations: A Complete Tutorial with Examples

In JavaScript, arrays are versatile data structures used to store multiple values in a single variable.

Arrays can contain a mix of different data types, including numbers, strings, objects, other arrays, and more.

This tutorial covers the basics of creating and manipulating arrays in JavaScript, including some of the most commonly used array operations.

1. Creating Arrays

Example 1: Creating an Array Using Literal Notation

// Creating an array using literal notation
let fruits = ['Apple', 'Banana', 'Cherry'];

console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']

Explanation

fruits is an array containing three elements: ‘Apple', ‘Banana', and ‘Cherry'.
This is the most common way to create an array in JavaScript.

Example 2: Creating an Array Using the Array Constructor

let numbers = new Array(1, 2, 3, 4, 5);

console.log(numbers); // Output: [1, 2, 3, 4, 5]

Explanation

new Array(1, 2, 3, 4, 5) creates an array containing the numbers 1 to 5.
However, using the array literal ([]) is generally preferred for simplicity.

2. Accessing Array Elements

Array elements are accessed using index positions, starting from 0.

Example 3: Accessing Elements

let fruits = ['Apple', 'Banana', 'Cherry'];

console.log(fruits[0]); // Output: 'Apple'
console.log(fruits[2]); // Output: 'Cherry'

Explanation

fruits[0] accesses the first element (‘Apple').
fruits[2] accesses the third element (‘Cherry').

3. Modifying Array Elements

You can change an element in the array by assigning a new value to a specific index.

Example 4: Modifying Elements

let fruits = ['Apple', 'Banana', 'Cherry'];

fruits[1] = 'Blueberry';
console.log(fruits); // Output: ['Apple', 'Blueberry', 'Cherry']

Explanation

fruits[1] = ‘Blueberry' changes the second element of the array from ‘Banana' to ‘Blueberry'.

4. Common Array Operations

4.1. Finding the Length of an Array

The .length property returns the number of elements in the array.

let fruits = ['Apple', 'Banana', 'Cherry'];

console.log(fruits.length); // Output: 3

4.2. Adding Elements to an Array

Example 5: Using push() to Add Elements to the End

let fruits = ['Apple', 'Banana'];
fruits.push('Cherry');

console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']

Explanation


push(‘Cherry') adds ‘Cherry' to the end of the fruits array.

Example 6: Using unshift() to Add Elements to the Beginning

let fruits = ['Banana', 'Cherry'];
fruits.unshift('Apple');

console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']

Explanation

unshift(‘Apple') adds ‘Apple' to the beginning of the fruits array.

4.3. Removing Elements from an Array

Example 7: Using pop() to Remove the Last Element

let fruits = ['Apple', 'Banana', 'Cherry'];
let removedFruit = fruits.pop();

console.log(fruits); // Output: ['Apple', 'Banana']
console.log(removedFruit); // Output: 'Cherry'

Explanation

pop() removes and returns the last element of the array (‘Cherry').

Example 8: Using shift() to Remove the First Element

let fruits = ['Apple', 'Banana', 'Cherry'];
let removedFruit = fruits.shift();

console.log(fruits); // Output: ['Banana', 'Cherry']
console.log(removedFruit); // Output: 'Apple'

Explanation

shift() removes and returns the first element of the array (‘Apple').

4.4. Finding the Index of an Element

Example 9: Using indexOf() to Find an Element’s Index

let fruits = ['Apple', 'Banana', 'Cherry'];
let index = fruits.indexOf('Banana');

console.log(index); // Output: 1

Explanation

indexOf(‘Banana') returns the index of the first occurrence of ‘Banana', which is 1.

4.5. Removing Elements by Index Using splice()

Example 10: Removing Elements Using splice()

let fruits = ['Apple', 'Banana', 'Cherry'];
let removed = fruits.splice(1, 1); // Remove 1 element at index 1

console.log(fruits); // Output: ['Apple', 'Cherry']
console.log(removed); // Output: ['Banana']

Explanation

splice(1, 1) removes 1 element starting from index 1.
The method returns the removed elements as an array.

4.6. Slicing an Array Using slice()

Example 11: Using slice() to Create a Subarray

let fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
let slicedFruits = fruits.slice(1, 3);

console.log(slicedFruits); // Output: ['Banana', 'Cherry']

Explanation

slice(1, 3) creates a new array containing elements from index 1 to 3 (excluding the element at index 3).

4.7. Concatenating Arrays Using concat()

Example 12: Combining Arrays with concat()

let fruits = ['Apple', 'Banana'];
let moreFruits = ['Cherry', 'Date'];
let combinedFruits = fruits.concat(moreFruits);

console.log(combinedFruits); // Output: ['Apple', 'Banana', 'Cherry', 'Date']

Explanation

concat(moreFruits) combines fruits and moreFruits into a new array.

4.8. Looping Through Arrays

Example 13: Using forEach() to Loop Through an Array

let fruits = ['Apple', 'Banana', 'Cherry'];

fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`);
});

Output

0: Apple
1: Banana
2: Cherry

Explanation

forEach() loops through each element in the array, executing the provided function.
5. Multidimensional Arrays (Arrays of Arrays)
Example 14: Creating and Accessing a Multidimensional Array

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

console.log(matrix[1][2]); // Output: 6

Explanation

matrix is a 2D array (array of arrays).
matrix[1][2] accesses the element in the second row and third column (6).

Summary

JavaScript arrays are flexible and provide a variety of methods for adding, removing, and manipulating data.

Here’s a quick overview of some key operations:

Create an Array: Use [] or new Array().
Access Elements: Use array[index].
Modify Elements: Assign a new value using array[index] = value.
Add Elements: Use push(), unshift().
Remove Elements: Use pop(), shift(), splice().
Find Elements: Use indexOf().
Slice Arrays: Use slice() to create subarrays.
Loop Through: Use forEach() to iterate over elements.

Arrays are one of the most fundamental data structures in JavaScript, and mastering these operations is crucial for effective programming. Feel free to experiment with these examples and apply them in your projects!

You may also like