Updated July 6, 2023
Introduction to TypeScript map
map function in TypeScript is used to get the new array from the existing calling array. Using the map function, we can perform any operation on the array elements and create a new array. This newly created array can be with or without the key-value pair. If we want to assign a key for the array elements, we can do this by using the map function in TypeScript; also, the map is an inbuild function available in TypeScript, so we do not require to include some other library in the application. In short, it will contain all the result elements from the calling array. In the coming section, we will discuss the map function in detail to understand it better.
Syntax:
As we have already discussed, it is an inbuild function available in TypeScript; it also takes some parameters as the input param, which is used to perform further action. Let’s see its syntax to understand better the function and how to use it while programming.
your_arrray_variable.map(callback[, thisObject])In the above lines of syntax, we can see we are passing two parameters inside this function, and also, we can call this map function on any array we have created. This callback function will return us the new array elements. Let’s see one practice syntax for beginners. For a better understanding of this function, see below.
Example:
myarr.map(value);We can see it is easy to use in the above lines of code. In the coming section, we will see its working in detail and how to implement this in programming.
How Does the map Function Work in TypeScript?
And now we know that the map function always returns us the new array after the operations are performed. The map function takes two parameters as the input. We can also perform operations in the calling array element. Then this function will return the new array containing the result. We can also make them a key-value pair. This section will see the map function signature in detail, what parameters it takes as input, and what value it returns.
Method Signature
your_arrray_variable.map(callback[, thisObject]): Here, we assign two values as the parameters. One is the callback function, and the other is thisObject.
- callback: This callback function is responsible for generating the newly created array. Every time the current time iterates, it creates a new value for the array.
- thisObject: This parameter is the object parameter.
- Return type: The map function will always return the newly created array. This array will contain all the elements from the current array. If we perform any function, it will calculate the new value accordingly and return it to us.
Now we will see one sample example to understand the internal working of the map function. This sample example helps us understand it better and gives us a view of how to use it while programming.
Example:
const myarr = [100, 200, 300, 400];
const mymap = myarr.map(x => x);
console.log(mymap);As you can see in the above lines of code, we are trying to use the map function from TypeScript. As we already know, it is an inbuild function available in TypeScript, so we do not require including any library for this. Also, in the above code, we have not included any library. Firstly, we create one array, a type integer, and we assign them some value to print. After this, we are immediately calling the map function from TypeScript. This function will take two arguments one is the object, and the second one is the callback function. This callback function will prepare the result with the new object in the array, and the object will point to the current element from the array being iterated. We can also use this function to print and view the array values. Also, using this function, we can create a map of key and value pairs. We have given them a name as ‘x’; this ‘x’ will point to the current value from the array. After this map function will create a new array and hold them inside this. We have created a new array named ‘mymap’; this will only contain the same element as the above array.
Points to be remembered while working with the map function in TypeScript:
- This function takes two arguments.
- It can be called on the array.
- It will always return us a newly created array.
- We can perform operations on each array element using the map function form TypeScript.
Example of TypeScript map
In this example, we are trying to use the map function from Typescript. Here we have created multiple arrays then we are trying to create a new array from the map function and print the values inside them on console logs. This is a sample example for beginners.
Code:
console.log("sample example to show map function in Typescript");
let myarr1 = [100, 200, 300, 400];
let myarr2= [100, 200, 300, 400];
let myarr3= [100, 200, 300, 400];
let myarr4 = [100, 200, 300, 400];
let myarr5 = [100, 200, 300, 400];
let mymap1 = myarr1.map(x => x);
let mymap2 = myarr2.map(x => x);
let mymap3 = myarr3.map(x => x);
let mymap4 = myarr4.map(x => x);
let mymap5 = myarr5.map(x => x);
console.log("value inside first map is ::");
console.log (mymap1);
console.log("value inside second map is ::");
console.log (mymap2);
console.log("value inside third map is ::");
console.log (mymap3);
console.log("value inside fourth map is ::");
console.log (mymap4);
console.log("value inside five map is ::");
console.log (mymap5);Output:
Conclusion
Using the map function from TypeScript, we can create a new array from the existing array by making some modifications to each array element. It will also iterate the array and help us view the array’s element like the foreach loop in TypeScript.
Recommended Articles
We hope that this EDUCBA information on “TypeScript map” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
