Lecture Notes Of Day 8: Arrays in JavaScript

 

Lecture Notes Of Day 8

 Arrays in JavaScript

Objective:

By the end of this lesson, students will be able to understand and work with arrays in JavaScript. They will learn how to create arrays, access elements, modify arrays using array methods, and iterate over arrays using loops.

---

What is an Array in JavaScript?

An array in JavaScript is a special variable that can hold multiple values, even values of different types. Arrays allow you to store lists of data and are essential for organizing and working with data collections.

Example:

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

In this example, fruits is an array that contains three elements: 'Apple', 'Banana', and 'Cherry'. Arrays are indexed starting from 0.

---

Creating Arrays

Arrays can be created in several ways:

1.  Using Array Literal Syntax: This is the most common way to create an array.

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

2.  Using the Array Constructor: You can also create an array using the Array() constructor.

let fruits = new Array('Apple', 'Banana', 'Cherry');

3.  Creating an Empty Array: You can create an empty array by leaving the brackets empty.

let fruits = [];

4.  Creating an Array with a Specific Length: If you know the number of elements you want, you can initialize an array with a specific length.

let numbers = new Array(5); // Creates an array with 5 empty slots

---

Accessing Array Elements

Each item in an array has an index, starting at 0 for the first element. You can access an array element by referring to its index.

Example:

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

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

console.log(fruits[1]); // Output: Banana

In the above example, fruits[0] accesses the first element, 'Apple', and fruits[1] accesses 'Banana'.

Array Length:

To find the number of elements in an array, use the length property.

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

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

---

Array Methods

JavaScript provides several built-in methods to work with arrays. Below are some commonly used array methods:

1.  push()

Adds one or more elements to the end of an array and returns the new length of the array.

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

fruits.push('Cherry');

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

2.  pop()

Removes the last element from an array and returns that element.

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

let lastFruit = fruits.pop();

console.log(lastFruit); // Output: Cherry

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

3.  shift()

Removes the first element from an array and returns that element.

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

let firstFruit = fruits.shift();

console.log(firstFruit); // Output: Apple

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

4.  unshift()

Adds one or more elements to the beginning of an array and returns the new length of the array.

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

fruits.unshift('Apple');

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

5.  splice()

Adds or removes elements from an array at a specified position.

The syntax is array.splice(start, deleteCount, item1, item2, ...).

o    start: Index at which to start changing the array.

o    deleteCount: The number of items to remove.

o    item1, item2, ...: Items to add to the array.

Example:

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

fruits.splice(1, 1, 'Orange', 'Mango'); // Removes 1 element at index 1, adds 'Orange' and 'Mango'

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

6.  slice()

Returns a shallow copy of a portion of an array into a new array object. The syntax is array.slice(start, end).

o    start: Index at which to start extraction (inclusive).

o    end: Index at which to end extraction (exclusive).

Example:

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

let slicedFruits = fruits.slice(1, 3);

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

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

---

Iterating Over Arrays Using Loops

You can iterate over an array using loops to perform actions on each element. JavaScript offers several ways to loop through arrays:

1.  Using a for loop

This is the most common loop used for iterating over arrays.

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

for (let i = 0; i < fruits.length; i++) {

    console.log(fruits[i]);

}

// Output:

// Apple

// Banana

// Cherry

2.  Using a forEach() loop

The forEach() method executes a provided function once for each array element.

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

fruits.forEach(function(fruit) {

    console.log(fruit);

});

// Output:

// Apple

// Banana

// Cherry

3.  Using for...of loop

The for...of loop is used to iterate over the values of the array directly.

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

for (let fruit of fruits) {

    console.log(fruit);

}

// Output:

// Apple

// Banana

// Cherry

---

Summary

In this lesson, we have learned the basics of arrays in JavaScript:

1.  Creating Arrays: Using array literals or the Array constructor.

2.  Accessing Array Elements: Using indices to access array values.

3.  Array Methods: Common methods like push(), pop(), shift(), unshift(), splice(), and slice() to modify arrays.

4.  Iterating Over Arrays: Using loops like for, forEach(), and for...of to iterate through arrays.

Understanding arrays and their methods is fundamental for managing collections of data and performing operations on them in JavaScript.

---