All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Map Values To Array

Last Updated : Mar 11, 2024

JavaScript Map Values To Array

In this article we will show you the solution of JavaScript map values to array, in JavaScript, the map () function is used to create a new array and holds key-value pairs.

While using this function the old array would be intact and not be modified. The new array is created by calling the function used.

We will see two different methods in this tutorial.

Step by step guide on JavaScript map values to array :-

Method 1

Let us see an example first on JavaScript map values.

<!DOCTYPE html>
<html lang = " en " >
<head>
    <meta charset = " UTF - 8" >
    <meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
    <meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
    <title> JavaScript map values to array </title>
    <style>
        h1 {
         font-size: larger;
         font-weight: bolder;
         color: lightgreen;
        }
    </style>
</head>
<body>
    <h1> TALKERSCODE </h1>
    <p> JavaScript map values to array</p>
    <script>
        const array1 = [1,-2,3,-4,5];
        const array2 = array1.filter(n => n<= 0);
        const item = array.map(n => {
        const obj = { value: n };
        return obj ;
    }) ;
    console.log(item)
    </script>
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  6. <h1> tag used to add heading here.
  7. to add JavaScript Create a <script> tag.
  8. Create an array named ‘array1’. And create another new array named ‘array2’ containing the filter element from ‘array1’.
  9. Create another constant to use the map() function.
  10. Using console.log() to display the result.

Method 2

Let us see an example first.

<!DOCTYPE html>
<html lang = " en " >
<head>
    <meta charset = " UTF - 8" >
    <meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
    <meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
    <title>javascript map values to array</title>
    <style>
        h1 {
         font-size: larger;
         font-weight: bolder;
         color: lightgreen;
        }
    </style>
</head>
<body>
    <h1> TALKERSCODE </h1>
    <p> javascript map values to array</p>
    <script>
        var array = [2,4,6,8];
        var X = array.map(add);
        function add (a) {
           return a+10 ;
        }
        document.write(X) ;
  </script>
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  6. <h1> tag used to add heading here.
  7. to add JavaScript, create a <script> tag.
  8. Create an array first
  9. Calling the map() function
  10. Now define the function with a return value of all the elements added with 10.
  11. Using document.write() to display the value.

Conclusion :-

At last here in conclusion, here we can say that with the help of this article we are able to map values to an array using JavaScript.

I hope this article on JavaScript map values to array helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪