The Project | About Us | Contribute | Donations | License

HOME

Introduction

Arrays are a fundamental part of JavaScript and are used to store multiple values in a single variable. This section will cover the basics of arrays, how to create them, and the various methods available to manipulate array data.

What is an Array?

An array is a special variable, which can hold more than one value at a time. Instead of declaring separate variables for each value, you can store all the values in a single array.

Example:

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

Creating Arrays

There are multiple ways to create arrays in JavaScript:

Using Array Literals

This is the most common way to create arrays.

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

Using the Array Constructor

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

Empty Arrays

You can also create an empty array and add elements later.

let fruits = [];
fruits[0] = "Apple";
fruits[1] = "Banana";

Accessing Array Elements

Array elements are accessed using their index number, starting from 0.

Example:

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Output: Apple
console.log(fruits[1]); // Output: Banana

Array Properties and Methods

Length Property

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

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits.length); // Output: 3

Common Array Methods

`push()`

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

let fruits = ["Apple", "Banana"];
fruits.push("Cherry");
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

`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"]

`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"]

`unshift()`

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

let fruits = ["Banana", "Cherry"];
fruits.unshift("Apple");
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

`indexOf()`

Returns the first index at which a given element can be found in the array, or -1 if it is not present.

let fruits = ["Apple", "Banana", "Cherry"];
let index = fruits.indexOf("Banana");
console.log(index); // Output: 1

`splice()`

Adds/removes elements from an array.

let fruits = ["Apple", "Banana", "Cherry"];
// Remove 1 element at index 1
fruits.splice(1, 1);
console.log(fruits); // Output: ["Apple", "Cherry"]

// Add 2 elements at index 1
fruits.splice(1, 0, "Banana", "Grapes");
console.log(fruits); // Output: ["Apple", "Banana", "Grapes", "Cherry"]

`slice()`

Returns a shallow copy of a portion of an array into a new array object.

let fruits = ["Apple", "Banana", "Cherry", "Grapes"];
let citrus = fruits.slice(1, 3);
console.log(citrus); // Output: ["Banana", "Cherry"]

`concat()`

Merges two or more arrays.

let fruits = ["Apple", "Banana"];
let moreFruits = ["Cherry", "Grapes"];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits); // Output: ["Apple", "Banana", "Cherry", "Grapes"]

Practical Exercises

Exercise 1: Array Manipulation

Create an array of your favorite fruits. Perform the following operations:

Add a new fruit to the end of the array.
Remove the first fruit from the array.
Find the index of a specific fruit.
Remove one fruit from the middle of the array.
Create a new array that contains a portion of the original array.

Solution:

let favoriteFruits = ["Mango", "Pineapple", "Strawberry", "Blueberry"];

// 1. Add a new fruit to the end of the array
favoriteFruits.push("Kiwi");
console.log(favoriteFruits); // Output: ["Mango", "Pineapple", "Strawberry", "Blueberry", "Kiwi"]

// 2. Remove the first fruit from the array
favoriteFruits.shift();
console.log(favoriteFruits); // Output: ["Pineapple", "Strawberry", "Blueberry", "Kiwi"]

// 3. Find the index of a specific fruit
let index = favoriteFruits.indexOf("Strawberry");
console.log(index); // Output: 1

// 4. Remove one fruit from the middle of the array
favoriteFruits.splice(1, 1);
console.log(favoriteFruits); // Output: ["Pineapple", "Blueberry", "Kiwi"]

// 5. Create a new array that contains a portion of the original array
let someFruits = favoriteFruits.slice(1, 3);
console.log(someFruits); // Output: ["Blueberry", "Kiwi"]

Conclusion

In this section, we covered the basics of arrays in JavaScript, including how to create arrays, access their elements, and use various array methods. Arrays are a powerful tool for managing collections of data, and understanding how to manipulate them is essential for any JavaScript programmer. In the next section, we will delve deeper into iterating over arrays and more advanced array methods.

Arrays: Basics and Methods

Introduction

What is an Array?

Example:

Creating Arrays

Using Array Literals

Using the Array Constructor

Empty Arrays

Accessing Array Elements

Example:

Array Properties and Methods

Length Property

Common Array Methods

`push()`

`pop()`

`shift()`

`unshift()`

`indexOf()`

`splice()`

`slice()`

`concat()`

Practical Exercises

Exercise 1: Array Manipulation

Solution:

Conclusion

JavaScript: From Beginner to Advanced

Module 1: Introduction to JavaScript

Module 2: Control Structures

Module 3: Functions

Module 4: Objects and Arrays

Module 5: Advanced Objects and Functions

Module 6: The Document Object Model (DOM)

Module 7: Browser APIs and Advanced Topics

Module 8: Testing and Debugging

Module 9: Performance and Optimization

Module 10: JavaScript Frameworks and Libraries

Module 11: Final Project