Javascript Nuggets

Every Developer should know this.

Map method:

1. The map method returns a new array.

2. It does not modify the size of the original array. The opposite of this is done in the filter method.

3. it uses the value from the original array when making a new one.

where can we use the Map method?

one of the examples, where we use map method is :

whenever the array is in one format and you need it in another, use the map.

/*please note this , all the operations will be done on this array of objects(course) only. */
const course = [
{
objectId:1,
name:'javascript',
mentor:'Deshmukh Somesh',
experience:4,
},
{
objectId:2,
name:'Python',
mentor:'raj patil',
experience:34,
},
{
objectId:3,
name:'Java',
mentor:'Shivkumar D',
experience:39,
}
];

const names = course.map((item)=>{
console.log(item);
});

\=> you can think about what might be the output of the above [console.log(item)].

\=> tell me in the comment section.

output :
[
  {
    objectId: 1,
    name: 'javascript',
    mentor: 'Deshmukh Somesh',
    experience: 4
  },
  { objectId: 2, name: 'Python', mentor: 'raj patil', experience: 34 }, 
  { objectId: 3, name: 'Java', mentor: 'Shivkumar D', experience: 39 }  
]

the course variable in the program is an array of objects, when we pass a parameter let us say 'item' in the map method, the item now contains the array (course) and its contents, and now with this parameter item we can access every object and the contents of the object.

now let's think what if we want the name of the mentors? How can we get them using map method?

const names = course.map((item)=>{
return item.mentor;
});
console.log(names);

Note: you need to use the return keyword so that the values accessed using item.mentor can be stored in the names variable.

if you don't want to use the return keyword you can do 2 things to print the names of mentors to the console.

Note :1. this code will return an array of required parameters, but 2. will give us the required parameters but not in the array form.

1.
const names = course.map((item)=> item.mentor);
console.log(names);

                OR    
2.
const names = course.map((item)=>{
console.log(item.mentor);
});

output:
1.
Deshmukh Somesh
raj patil
Shivkumar D

2.
[ 'Deshmukh Somesh', 'raj patil', 'Shivkumar D' ]

One more point to be discussed, till now we were constructing our own custom function( using arrow notation).

Now let's use a function that already exists and let's pass that function as a parameter to the map method.

// lets pass getExperience function as paramter to map method.
const getExperience = (course) => course.experience*2;

// getExperience is being passed as parameter to map method.
const  Experience = course.map(getExperience);
console.log(Experience);

you can write output for this code in the comment section.

output:
[ 8, 68, 78 ]

Now with this much knowledge about the map method let's play with it.

till now we learned that map will return a new array. Now let's see how a map could be used in making a new array using the original array. you also need to focus on what we are returning.

const mentorsList = course.map((item)=>{
return {
mentorName: item.mentor.lowerCase(),
experience:item.experience-2,
name:item.name,
}
})
console.log(mentorsList);

You might have noticed that we are returning objects, in the output you would observe that we would get a new array containing these objects.

output:
[
  { mentorName: 'deshmukh somesh', experience: 2, name: 'javascript' }, 
  { mentorName: 'raj patil', experience: 32, name: 'Python' },
  { mentorName: 'shivkumar d', experience: 37, name: 'Java' }
]

Now let's extend the knowledge of map method with the following example:

let's say we have two array items and their prices.

const items = ["pen", "pencil"];
const prices = [5,10];

now we want to combine these array's and how do we do that? for that, we will have to correlate elements in items with elements in prices according to their index.

const bag = items.map((x,i)=>{
return {
name:x,
price:prices[i],
}
})

console.log(bag);

x points to elements of the items array and I point to elements of the price array.

output:
[ { name: 'pen', price: 5 }, { name: 'pencil', price: 10 } ]

Now let's go for some advanced stuff like using an HTML page for rendering our arrays created using the map method.

Playing with Html and Js

create a file named index.html and a js file named map.js and attach the js file to html file.

<!DOCTYPE html>
<html>
<body>

    <div id="course-list">

    </div>
    <script src="map.js"></script>
</body>
</html>

and js file should contain

const course = [
    {
    objectId:1,
    name:'javascript',
    mentor:'Deshmukh Somesh',
    experience:4,
    },
    {
    objectId:2,
    name:'Python',
    mentor:'raj patil',
    experience:34,
    },
    {
    objectId:3,
    name:'Java',
    mentor:'Shivkumar D',
    experience:39,
    }
    ];

    const courseList = document.getElementById('course-list');
console.log(courseList)
   const names = course.map((person)=>{
   return `<h2>${person.name}</h2>`
   })
//    console.log(names)

  courseList.innerHTML = names.join('');

you can use vs code, and run the index.html file using the live server extension.

you would find the following output:

let's do some more practice with the map method:

Practice

Q1. We are given an array arr as shown below :

const arr= [5,7,5,6,1];

now I want you to get the output as follows:

output:
// Double - [10,14,10,12,1]
// Triple - [15,21,15,18,1]
// binary - ["101","111","101","110","1"]

if you got the output congratulations, if not please check out the below video solution:

^{please like , share and comment on the blog . Thank you !! 😎}