JavaScript: Map an Array to a New Array

Introduction

In JavaScript, you can transform the elements of an array into a new array using the map() method. This method applies a given function to each element of the array and returns a new array with the results. The map() method is useful when you want to perform some operation on each element, such as modifying, formatting, or transforming the data.

Problem Statement

Create a JavaScript program that:

• Accepts an array of elements.
• Maps the array to a new array by applying a transformation (e.g., doubling the numbers or converting to uppercase).
• Returns and displays the new array.

Example:

• Input: [1, 2, 3, 4, 5] (double each number)

• Output: [2, 4, 6, 8, 10]

• Input: ["apple", "banana", "cherry"] (convert to uppercase)

• Output: ["APPLE", "BANANA", "CHERRY"]

Solution Steps

1. Read the Input Array: Provide an array of elements either as user input or directly in the code.
2. Map the Array: Use the map() method to apply a function to each element of the array and create a new array.
3. Display the Result: Print the new array.

JavaScript Program

Example 1: Double the Numbers in an Array

// JavaScript Program to Double the Numbers in an Array
// Author: https://www.javaguides.net/

function doubleNumbers(arr) {
    // Step 1: Use map() to create a new array with doubled values
    return arr.map(num => num * 2);
}

// Example input
let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = doubleNumbers(numbers);
console.log(`Doubled Numbers: [${doubledNumbers}]`);

Output

Doubled Numbers: [2, 4, 6, 8, 10]

Example 2: Convert Strings to Uppercase

// JavaScript Program to Convert Strings to Uppercase
// Author: https://www.javaguides.net/

function toUpperCaseArray(arr) {
    // Step 1: Use map() to convert each string to uppercase
    return arr.map(str => str.toUpperCase());
}

// Example input
let fruits = ["apple", "banana", "cherry"];
let uppercasedFruits = toUpperCaseArray(fruits);
console.log(`Uppercased Strings: [${uppercasedFruits}]`);

Output

Uppercased Strings: [APPLE, BANANA, CHERRY]

Explanation

Step 1: Use the map() Method

• The map() method creates a new array by applying a transformation to each element of the original array.
  • In the first example, the transformation is num * 2, which doubles each number.
  • In the second example, the transformation is str.toUpperCase(), which converts each string to uppercase.

Step 2: Return and Display the Mapped Array

• The transformed array is returned by the function and printed using console.log().

Customizing the Transformation

You can customize the transformation function based on your requirements. For example, to square the numbers in the array:

function squareNumbers(arr) {
    return arr.map(num => num * num);
}

Conclusion

This JavaScript program demonstrates how to map an array to a new array using the map() method. The map() method is a powerful and versatile tool for transforming arrays by applying a function to each element. This approach can be used for various transformations, including numerical operations, string manipulations, and more complex data processing tasks.