TypeScript Array map()

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

In this chapter, we will explore the map() method for arrays in TypeScript. This method is a built-in function that creates a new array populated with the results of calling a provided function on every element in the calling array. Understanding how to use map() is useful for transforming arrays based on specific criteria.

Definition
Syntax
Examples
Conclusion

1. Definition

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array. This method does not change the original array.

2. Syntax

array.map(callback(element, index, array), thisArg?);

Parameters

callback: A function that is called for every element in the array, taking three arguments:
- element: The current element being processed in the array.
- index (optional): The index of the current element being processed in the array.
- array (optional): The array map was called upon.
thisArg (optional): Value to use as this when executing callback.

Return Value

The method returns a new array with each element being the result of the callback function.

3. Examples

Let's look at some examples to understand how map() works in TypeScript.

Example 1: Basic Usage

In this example, we use map() to create a new array by multiplying each element by 2.

let numbers: number[] = [1, 2, 3, 4, 5];
let result = numbers.map((num) => num * 2);
console.log(result); // Output: [2, 4, 6, 8, 10]

Example 2: Using Index in Callback

In this example, we use the index parameter to create a new array of strings that include the index of each element.

let fruits: string[] = ["apple", "banana", "mango"];
let result = fruits.map((fruit, index) => `Fruit ${index + 1}: ${fruit}`);
console.log(result); // Output: ["Fruit 1: apple", "Fruit 2: banana", "Fruit 3: mango"]

Example 3: Using Array in Callback

In this example, we use the array parameter within the callback function to create a new array that includes the original array.

let letters: string[] = ["a", "b", "c"];
let result = letters.map((letter, index, arr) => `${letter} in ${arr}`);
console.log(result); // Output: ["a in a,b,c", "b in a,b,c", "c in a,b,c"]

Example 4: Transforming Objects

In this example, we use map() to transform an array of objects.

interface Person {
  name: string;
  age: number;
}

let people: Person[] = [
  { name: "Ravi", age: 25 },
  { name: "Ankit", age: 30 },
  { name: "Priya", age: 28 },
];

let result = people.map((person) => ({ ...person, age: person.age + 1 }));
console.log(result);
// Output:
// [ { name: 'Ravi', age: 26 },
//   { name: 'Ankit', age: 31 },
//   { name: 'Priya', age: 29 } ]

Example 5: Converting Data Types

In this example, we use map() to convert an array of strings to an array of numbers.

let strings: string[] = ["1", "2", "3"];
let result = strings.map((str) => parseInt(str));
console.log(result); // Output: [1, 2, 3]

Example 6: Flattening an Array of Arrays

In this example, we use map() to flatten an array of arrays. Note that for deep flattening, other methods like flatMap() might be more appropriate.

let arrays: number[][] = [[1, 2], [3, 4], [5, 6]];
let result = arrays.map((arr) => arr.join(",")).join(",");
console.log(result); // Output: "1,2,3,4,5,6"

4. Conclusion

In this chapter, we explored the map() method for arrays in TypeScript, which is used to create a new array populated with the results of calling a provided function on every element in the calling array. We covered its definition, syntax, parameters, return value, and provided several examples to demonstrate its usage. Understanding how to use map() effectively can help in various array manipulation tasks in TypeScript, especially when transforming arrays based on specific criteria.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog