Topic 4524 min readStructured Tutorial

JavaScript Arrays - Practice Examples for Beginners

Quick Answer

JavaScript arrays are ordered collections used to store multiple values. Practicing with examples helps you understand array creation, accessing elements, looping, and common methods like push, pop, and map, which are essential for effective JavaScript programming.

Learning Objectives

Explain the purpose of Array Practice Examples in a practical learning context.
Identify the main ideas, terms, and decisions involved in Array Practice Examples.
Apply Array Practice Examples in a simple real-world scenario or practice task.

Introduction to JavaScript Arrays

Arrays in JavaScript are used to store multiple values in a single variable. They are fundamental for managing collections of data.

This tutorial focuses on practical examples to help you understand how to work with arrays effectively.

Arrays are the building blocks for managing collections of data in JavaScript.

Creating and Accessing Arrays

You can create arrays using square brackets []. Elements are accessed by their index, starting at 0.

Create an array: let fruits = ['apple', 'banana', 'cherry'];
Access first element: fruits[0] // 'apple'
Access last element: fruits[fruits.length - 1] // 'cherry'

Common Array Methods

JavaScript arrays come with many built-in methods to manipulate data efficiently.

push(): Adds an element to the end.
pop(): Removes the last element.
shift(): Removes the first element.
unshift(): Adds an element to the beginning.
map(): Creates a new array by applying a function to each element.
filter(): Creates a new array with elements that pass a test.

Iterating Over Arrays

Looping through arrays is essential for processing each element.

for loop: for(let i = 0; i < arr.length; i++) {}
for...of loop: for(let item of arr) {}
forEach method: arr.forEach(item => {})

Practical Examples

Let's explore some practical examples to solidify your understanding.

Example 1: Adding and Removing Elements

This example demonstrates how to add and remove elements from an array.

Example 2: Using map() to Transform Arrays

Here we use the map() method to create a new array with modified elements.

Example 3: Filtering Arrays

This example shows how to filter elements based on a condition.

Practical Example

This example shows how to add an element to the end of the array with push() and remove the last element with pop().

The map() method creates a new array by doubling each number in the original array.

The filter() method creates a new array containing only ages 18 or older.

Examples

Example 1: Adding and Removing Elements

let colors = ['red', 'green', 'blue'];
colors.push('yellow'); // Adds 'yellow'
colors.pop(); // Removes 'yellow'
console.log(colors); // ['red', 'green', 'blue']

This example shows how to add an element to the end of the array with push() and remove the last element with pop().

Example 2: Using map() to Transform Arrays

let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

The map() method creates a new array by doubling each number in the original array.

Example 3: Filtering Arrays

let ages = [18, 21, 16, 25];
let adults = ages.filter(age => age >= 18);
console.log(adults); // [18, 21, 25]

The filter() method creates a new array containing only ages 18 or older.

Best Practices

Use descriptive variable names for arrays.
Prefer array methods like map, filter, and reduce over loops for cleaner code.
Avoid mutating arrays unless necessary to prevent bugs.
Use const for arrays that won't be reassigned to ensure immutability of the reference.

Common Mistakes

Accessing array elements with incorrect indices (off-by-one errors).
Mutating arrays unintentionally causing side effects.
Using for loops instead of more readable array methods.
Confusing array length with the last index (length - 1).

Hands-on Exercise

Practice Array Manipulation

Create an array of your favorite fruits. Add a new fruit, remove the last fruit, and then print the updated array.

Expected output: An array showing the fruits after adding and removing elements.

Hint: Use push() to add and pop() to remove elements.

Transform Array Elements

Given an array of numbers, use map() to create a new array with each number squared.

Expected output: A new array with squared numbers.

Hint: Use the map() method with a function that returns the square of each number.

Filter Array Elements

From an array of ages, create a new array that only includes ages 21 and older.

Expected output: An array containing only ages 21 or older.

Hint: Use the filter() method with a condition checking age >= 21.

Interview Questions

How do you add an element to the end of a JavaScript array?

Interview

You use the push() method to add an element to the end of an array.

What is the difference between map() and forEach()?

Interview

map() returns a new array with the results of applying a function to each element, while forEach() executes a function on each element but returns undefined.

How can you create a new array with only certain elements from an existing array?

Interview

You can use the filter() method to create a new array containing elements that meet a specified condition.