JavaScript - TypedArray map() Method

Quiz

The JavaScript TypedArray map() method creates a new typed array with the results of calling a function provided by the user on every element in the original typed array.

The map() method operates on a TypedArray (such as Uint8Array, Int16Array, etc.).
It accepts a testing function as a parameter.
The testing function is executed for each element in the TypedArray.
If an element satisfies the condition specified by the testing function (returns a true value).

Syntax

Following is the syntax of JavaScript TypedArray map() method −

map(callbackFn, thisArg)

Parameters

This method accepts two parameters named 'callbackFn' and 'thisArg', which are described below −

callbackFn − This parameter is a testing function that will be executed for each element in the TypedArray.

This function also takes three parameters named 'element', 'index', and 'array'. Here's the description for each parameter −

element − Represents the current element being processed in the TypedArray.
index − Indicates the index (position) of the current element within the TypedArray.
array − Refers to the entire TypedArray.

thisArg (optional) − This is an optional parameter that allows you to specify the value of this within the callbackFn.

Return value

This method returns a new typed array where each element is the output of a callback function.

Examples

Example 1

In the following program, we use the JavaScript TypedArray map() method to create a new typed array with the square roots of the numbers in the original typed array [16, 25, 36, 49]. We pass the Math.sqrt function as an argument to this method, which returns the square root of each element.

<html>
<head>
   <title>JavaScript TypedArray map() Method</title>
</head>
<body>
   <script>
      const T_array = new Uint8Array([16, 25, 36, 49]);
      document.write("Original typed array: ", T_array);
      
      //using map() function
      let new_arr = ([]);
      new_arr = T_array.map(Math.sqrt);
      document.write("<br>New typed array: ", new_arr);
   </script>    
</body>
</html>

Output

The above program returns a new typed array as −

Original typed array: 16,25,36,49
New typed array: 4,5,6,7

Example 2

The following is another example of the JavaScript TypedArray map() method. We use this method to create a new typed array with three times the value of each element in the original typed array ([1, 2, 3, 4, 5]). We pass an arrow function that multiplies each element by three.

<html>
<head>
   <title>JavaScript TypedArray map() Method</title>
</head>
<body>
   <script>
      const T_array = new Uint8Array([1, 2, 3, 4, 5]);
      document.write("Original typed array: ", T_array);
      
      //using map() function
      let new_arr = ([]);
      new_arr = T_array.map((a)=> a * 3);
      document.write("<br>New typed array: ", new_arr);
   </script>    
</body>
</html>

Output

After executing the above program, it will return a new typed array −

Original typed array: 1,2,3,4,5
New typed array: 3,6,9,12,15

Example 3

In the example below, the map() method creates a new typed array by executing a provided function to each element in the original typed array ([2, 4, 6, 8, 10]). We create a function named add() that returns the sum of each element with itself, and then we pass this function as an argument to the map() method.

<html>
<head>
   <title>JavaScript TypedArray map() Method</title>
</head>
<body>
   <script>
      function add(element, index, array){
         return element += element;
      }
      const T_array = new Uint8Array([2, 4, 6, 8, 10]);
      document.write("Original typed array: ", T_array);
      
      //using map() function
      let new_arr = ([]);
      new_arr = T_array.map(add);
      document.write("<br>New typed array: ", new_arr);
   </script>    
</body>
</html>

Output

After executing the program, a new typed array is returned containing the sum of each element with itself.

Original typed array: 2,4,6,8,10
New typed array: 4,8,12,16,20

Print Page