JavaScript Arrays Explained: Basics, Operations, and Practical Examples

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction

What Are JavaScript Arrays and Why Are They Important?

JavaScript arrays are one of the essential elements for efficiently managing and manipulating data. By using arrays, you can store multiple values in a single variable and retrieve or modify them as needed.

For example, arrays are extremely useful when storing lists of user names, product catalogs, or calculation results. In web application development, arrays are frequently used when handling form data or data retrieved from APIs.

Practical Use Cases for Arrays

• List management: Managing shopping cart items or Todo lists.
• Data filtering: User searches and sorting functionality.
• Animation handling: Controlling element order and dynamic updates.

In this way, arrays are a fundamental structure for handling grouped data and an indispensable topic when learning JavaScript.

What You Will Learn in This Article

This article systematically explains JavaScript arrays with the following topics:

1. How to declare and initialize arrays
2. Adding, removing, and retrieving elements
3. Sorting and filtering techniques
4. Array merging and splitting methods
5. Practical application examples using arrays

The content is designed for both beginners and intermediate learners, carefully covering everything from basic operations to advanced techniques.

Target Audience

• Beginners: Those who are working with arrays for the first time.
• Intermediate developers: Those who want to learn more advanced and efficient array operations.

With code examples and practical use cases, even beginners can learn with confidence.

What You Can Achieve by Learning Arrays

By mastering JavaScript arrays, you will gain the following skills:

• Data management and manipulation: Easily add, remove, and sort data.
• API integration: Efficiently process and display data retrieved from web APIs.
• Application development: Build simple applications based on practical examples.

Use the knowledge you gain here to build more advanced programs with JavaScript.

2. Array Basics: Declaration and Initialization

2.1 Definition and Role of Arrays

In JavaScript, an array is a special object that allows you to manage multiple values at once. Each element has an order (index), making it easy to retrieve and manipulate data.

Main Roles of Arrays

1. List management: Organizing product lists or user information.
2. Data manipulation: Efficient processing such as sorting and searching.
3. Dynamic data handling: Transforming and processing data retrieved from APIs.

Characteristics of Arrays

• Indexes start from 0.
• Elements of different data types can coexist in the same array.

let mixedArray = [1, "hello", true];
console.log(mixedArray[1]); // "hello"

2.2 Declaring and Initializing Arrays

Basic Array Declaration

In JavaScript, arrays can be declared using the following two methods.

1. Using array literals (recommended)

let fruits = ["apple", "banana", "grape"];

2. Using the Array constructor

let fruits = new Array("apple", "banana", "grape");

Creating an Empty Array

let emptyArray = [];

2.3 Declaring Multidimensional Arrays

A multidimensional array stores arrays within an array. It is useful when managing hierarchical data structures.

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

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

2.4 Important Notes When Initializing Arrays

Mixing Data Types

Since JavaScript arrays can contain different data types, this may lead to unintended errors if not handled carefully.

let mixed = [1, "text", true];
console.log(typeof mixed[0]); // "number"
console.log(typeof mixed[1]); // "string"
console.log(typeof mixed[2]); // "boolean"

2.5 Basic Array Operation Examples

let animals = ["dog", "cat", "bird"];
console.log(animals[0]); // "dog"

animals.push("rabbit");
console.log(animals); // ["dog", "cat", "bird", "rabbit"]

animals[1] = "lion";
console.log(animals); // ["dog", "lion", "bird", "rabbit"]

Summary

In this section, we covered the following topics related to JavaScript arrays:

1. The definition and role of arrays
2. Basic syntax for declaration and initialization
3. Multidimensional arrays and indexing
4. Important considerations and practical code examples

By mastering these fundamentals, you will be able to smoothly move on to the next step: basic array operations.

3. Basic Array Operations: Add, Remove, and Retrieve

3.1 How to Add Elements

Add an Element to the End – push()

let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]

Add an Element to the Beginning – unshift()

let animals = ["cat", "dog"];
animals.unshift("rabbit");
console.log(animals); // ["rabbit", "cat", "dog"]

3.2 How to Remove Elements

Remove an Element from the End – pop()

let colors = ["red", "blue", "green"];
let removed = colors.pop();
console.log(colors); // ["red", "blue"]
console.log(removed); // "green"

Remove an Element from the Beginning – shift()

let numbers = [1, 2, 3, 4];
let removedNumber = numbers.shift();
console.log(numbers); // [2, 3, 4]
console.log(removedNumber); // 1

Remove Elements from Any Position – splice()

let sports = ["soccer", "baseball", "basketball", "tennis"];
sports.splice(1, 2);
console.log(sports); // ["soccer", "tennis"]

3.3 How to Retrieve Elements

Retrieve by Index

let drinks = ["water", "tea", "coffee"];
console.log(drinks[0]); // "water"
console.log(drinks[2]); // "coffee"

Get the Last Element in an Array

let cities = ["Tokyo", "Osaka", "Kyoto"];
console.log(cities[cities.length - 1]); // "Kyoto"

Retrieve an Element That Matches a Condition – find()

let numbers = [10, 20, 30, 40];
let result = numbers.find(num => num > 25);
console.log(result); // 30

Summary

In this section, we covered the following key points about JavaScript array operations:

1. How to add elements (push() and unshift())
2. How to remove elements (pop(), shift(), and splice())
3. How to retrieve elements (index access, find(), and includes())

By combining these basic operations, you can manipulate arrays freely and effectively.

4. Sorting and Filtering Arrays

4.1 How to Sort Arrays

Sort in Ascending/Descending Order – sort()

let numbers = [40, 10, 30, 20];
numbers.sort((a, b) => a - b);
console.log(numbers); // [10, 20, 30, 40]

Reverse the Order – reverse()

let letters = ["a", "b", "c", "d"];
letters.reverse();
console.log(letters); // ["d", "c", "b", "a"]

4.2 How to Filter Arrays

Extract Elements That Match a Condition – filter()

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

Get the First Element That Matches a Condition – find()

let ages = [15, 20, 25, 30];
let firstAdult = ages.find(age => age >= 20);
console.log(firstAdult); // 20

Get the Index of the First Matching Element – findIndex()

let scores = [50, 70, 85, 40];
let highScoreIndex = scores.findIndex(score => score > 80);
console.log(highScoreIndex); // 2

Summary

In this section, we explained how to sort and filter JavaScript arrays in detail.

1. Sorting: Control order using sort() and reverse().
2. Filtering: Use filter() to extract only elements that meet a condition.
3. Searching: Find specific elements with find() and findIndex().

5. Merging, Splitting, and Transforming Arrays

5.1 How to Merge Arrays

Merge Arrays – concat()

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = fruits.concat(vegetables);
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

Merging with the Spread Syntax

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = [...fruits, ...vegetables];
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

5.2 How to Split Arrays

Extract a Portion – slice()

let colors = ["red", "blue", "green", "yellow", "purple"];
let selectedColors = colors.slice(1, 4);
console.log(selectedColors); // ["blue", "green", "yellow"]

Remove or Replace Elements – splice()

let languages = ["JavaScript", "Python", "Ruby", "Java"];
languages.splice(1, 2);
console.log(languages); // ["JavaScript", "Java"]

5.3 How to Transform Arrays

Convert an Array to a String – join()

let items = ["apple", "banana", "grape"];
let result = items.join(", ");
console.log(result); // "apple, banana, grape"

Convert a String to an Array – split()

let str = "apple,banana,grape";
let arr = str.split(",");
console.log(arr); // ["apple", "banana", "grape"]

Flatten a Multidimensional Array – flat()

let numbers = [1, [2, 3], [4, [5, 6]]];
let flatNumbers = numbers.flat(2);
console.log(flatNumbers); // [1, 2, 3, 4, 5, 6]

Summary

In this section, we explored methods for merging, splitting, and transforming JavaScript arrays.

1. Merging arrays using concat() and the spread syntax.
2. Splitting arrays with slice() and modifying them using splice().
3. Transforming arrays and strings with join() and split().
4. Flattening nested arrays using flat().

6. Looping Through Arrays and Advanced Techniques

6.1 Array Looping Methods

Basic Looping with a for Statement

let fruits = ["apple", "banana", "grape"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// Output: apple, banana, grape

Concise Looping with for...of

let colors = ["red", "blue", "green"];
for (let color of colors) {
  console.log(color);
}
// Output: red, blue, green

Looping with forEach()

let animals = ["cat", "dog", "bird"];
animals.forEach((animal, index) => {
  console.log(`${index}: ${animal}`);
});
// Output: 0: cat, 1: dog, 2: bird

Generating a New Array with map()

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

6.2 Advanced Techniques

Removing Duplicate Elements

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Flattening an Array – flat()

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]

Summary

In this section, we covered looping techniques and advanced array usage.

1. Basic loops using for and for...of.
2. Efficient processing and array creation with forEach() and map().
3. Advanced techniques such as removing duplicates and flattening arrays.

7. Practical Example: Building a Simple Application Using Arrays

7.1 Creating a Todo List Application

Feature Overview

This application is a simple Todo list with the following features:

1. Add new tasks.
2. Remove completed tasks.
3. Display the current list of tasks.

Code Example

let tasks = [];

// Function to add a new task
function addTask(task) {
  tasks.push(task);
  console.log(`Added: ${task}`);
  displayTasks();
}

// Function to remove a task
function removeTask(index) {
  if (index >= 0 && index < tasks.length) {
    let removed = tasks.splice(index, 1);
    console.log(`Removed: ${removed[0]}`);
    displayTasks();
  } else {
    console.log("Invalid index");
  }
}

// Function to display current tasks
function displayTasks() {
  console.log("Current Tasks:");
  tasks.forEach((task, index) => {
    console.log(`${index + 1}: ${task}`);
  });
}

// Test execution
addTask("Study JavaScript");
addTask("Create a shopping list");
addTask("Check emails");

removeTask(1); // Remove the second task

Sample Output

Added: Study JavaScript
Added: Create a shopping list
Added: Check emails
Current Tasks:
1: Study JavaScript
2: Create a shopping list
3: Check emails
Removed: Create a shopping list
Current Tasks:
1: Study JavaScript
2: Check emails

Summary

In this section, we introduced a practical application that leverages array operations.

1. Todo List Application: Practiced adding, removing, and displaying elements using arrays.
2. Search and Data Aggregation: Demonstrated flexible data handling through array manipulation.

8. Conclusion: Mastering Array Operations

JavaScript arrays are powerful tools for efficiently managing and manipulating data. This article comprehensively covered everything from basic operations to advanced techniques and practical examples.

8.1 Article Recap

1. Basic Array Operations

• Declaration and initialization: Learned how to create arrays and work with multidimensional structures.
• Adding, removing, and retrieving elements: Practiced dynamic data manipulation using methods such as push() and pop().

2. Sorting and Filtering Arrays

• Sorting: Explained how to change element order using sort() and reverse().
• Filtering: Demonstrated how to extract data that meets specific conditions using filter() and find().

3. Merging, Splitting, and Transforming Arrays

• Merging: Mastered flexible merging using concat() and the spread syntax.
• Splitting and transforming: Manipulated data using slice(), splice(), join(), and split().

4. Looping and Advanced Techniques

• Looping: Improved efficiency with for, forEach(), and map().
• Advanced techniques: Learned duplicate removal and array flattening.

5. Practical Example

• Todo List Application: Experienced how array operations are applied in real-world applications.
• Search and data aggregation: Implemented flexible searching and data processing.

8.2 Why Array Operations Matter

Why Are Array Operations Important?

Array operations are essential skills for organizing, analyzing, and displaying data. They are frequently used in the following scenarios:

1. Data management and presentation: Filtering API data and displaying it in tables.
2. Form and user input handling: Dynamically managing lists and processing inputs.
3. Search and sorting features: Efficiently handling large datasets.
4. Application development fundamentals: Building UI components such as shopping carts and task management systems.

8.3 Next Steps in Learning

1. Further Use of Array Methods

• Suggested challenge: Build an application that displays and filters API data using array operations.

2. Comparing and Choosing Other Data Structures

• Learn Objects, Set, and Map to choose the right structure for each use case.

3. Practical Use in JavaScript Frameworks

• Apply these skills in frameworks such as React or Vue.js.

8.4 Reference Links and Resources

• MDN Web Docs: Array Object https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
• JavaScript.info: Arrays and Methods https://javascript.info/

8.5 Final Advice for Readers

JavaScript array operations are crucial for building a solid programming foundation. This article guided you through both fundamental and advanced techniques.

Advice

1. Practice hands-on: Write and test code to reinforce your understanding.
2. Develop problem-solving skills: Translate real-world problems into code.
3. Commit to continuous learning: Keep up with modern techniques and frameworks.

Move on to the Next Step!

Use this article as a foundation and continue toward building more advanced applications and learning modern frameworks.

FAQ: Frequently Asked Questions

Q1. What Is the Difference Between map() and forEach()?

• map(): Returns a new array. It applies a transformation to each element and collects the results.
• forEach(): Does not return a new array and simply executes a function for each element.

Example:

let numbers = [1, 2, 3];

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

// forEach()
numbers.forEach(num => console.log(num * 2));
// Output: 2, 4, 6

Q2. How Can I Sort Numbers Correctly?

The sort() method compares elements as strings by default. To sort numbers properly, you must provide a comparison function.

Example:

let numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 25, 40, 100]

Q3. How Can I Remove Duplicate Elements from an Array?

You can easily remove duplicates by using the Set object.

Example:

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Q4. How Can I Check If an Element Exists in an Array?

Use the includes() method to determine whether a specific element exists in an array.

Example:

let fruits = ["apple", "banana", "grape"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("melon")); // false

Q5. How Can I Convert a Multidimensional Array into a One-Dimensional Array?

Use the flat() method to flatten nested arrays.

Example:

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]