JAVASCRIPT ARRAY.MAP() METHOD

#webdev #javascript #beginners #programming

For me, I believe Javascript Array.map() method is one of the most important array methods to understand especially if you are a frontend developer.

So quickly I am going to explain the concept of the Array.map() method and highlight couple of scenerios where it can be useful.

REQUIREMENT

Knowledge of basic javascript

What are JavaScript Arrays?

JavaScript arrays allows storing a collection of multiple items under a single variable name.

in simple terms, think of this like a high school with 30 students, and the school needs to convey the entire students to a location, the bus the school use in convening the entire students can be equated to a javascript array.

For example,

const array = []

This is the syntax for writing a javascript array,

An opening square bracket and a closing square bracket, the contents will be between as illustrated using the students example below

const students = ['josh', 'steph', 'segun', 'femi', 'adeola']

using this format, it is very easy for us to perform operations on the 5 students in the students array,
for instance if the school wants the total number of students in the school, that is very easy to get by just calling the array.length property

const students = ['josh', 'steph', 'segun', 'femi', 'adeola']
const totalStudents = students.length

// output = 5

So basically javascript arrays makes it easy for developers to manage/query/manipulate simple and complex data to achieve a particular aim.

for instance, if steph in the students array was expelled, and need to be eliminated from the students array, calling the array.splice method achieves that with just 1 line of code

const students = ['josh', 'steph', 'segun', 'femi', 'adeola']
students.splice(1, 1)
console.log(students)

// output = ['josh', 'segun', 'femi', 'adeola']

So understanding Javascript array concept as a developer is a must, because it will make your life and work a lot easier.

Array.map() Concept

The javascript Array.map() method creates or returns a new array after performing an action on each element of the array.

For example, the students array, I want to add more information about the students other than just their name,

I want to add the student age and birth year,

Below contains two array elements containing both the students age and birth year.

const studentAge = [18, 22, 19, 17]
const studentBirthYear = [2005, 2001, 2004, 2006]

_Worthy of note that each array element have an index property to locate and identify each element in the array, _

we will be using the index of the element to properly map these data together

const studentAge = [18, 22, 19, 17]
const studentBirthYear = [2005, 2001, 2004, 2006]
const students = ['josh', 'segun', 'femi', 'adeola']

Now let's call the map method on the student array and properly and dynamically map age and year to each students

const studentAge = [18, 22, 19, 17]
const studentBirthYear = [2005, 2001, 2004, 2006]
const students = ['josh', 'segun', 'femi', 'adeola']

const mappedStudents = students.map((student, i)=> {
   return {
        name: student,
        age: studentAge[i],
        birthYear: studentBirthYear[i]
     }
   }
 )

console.log(mappedStudents)
// output = [
    {name: 'josh', age: 18, birthYear: 2005}
    {name: 'segun', age: 22, birthYear: 2001}
    {name: 'femi', age: 19, birthYear: 2004}
    {name: 'adeola', age: 17, birthYear: 2006}
]

We can still go further and conditionally manipulate this data by add an adult tag for student 18years and above, and adding an child tag to students less than 18years old;

const studentAge = [18, 22, 19, 17]
const studentBirthYear = [2005, 2001, 2004, 2006]
const students = ['josh', 'segun', 'femi', 'adeola']

const mappedStudents = students.map((student, i)=> {
   return {
        name: student,
        age: studentAge[i],
        birthYear: studentBirthYear[i]
     }
   }
 )

const newMappedStudents = mappedStudents.map((student, i)=>{
   return {
       name: student.name,
       age: student.age,
       birthYear: student.birthYear,
       status: student.age >= 18 ? 'adult' : 'child'
     }
   }
)

// output = [
    {name: 'josh', age: 18, birthYear: 2005, status: 'adult'} 
    {name: 'segun', age: 22, birthYear: 2001, status: 'adult'} 
    {name: 'femi', age: 19, birthYear: 2004, status: 'adult'} 
    {name: 'adeola', age: 17, birthYear: 2006, status: 'child'}
]

Looking at the lines of codes we've been writing, the use for the Array.map() method is limitless, especially when working with Javascript frameworks like React.js,

The Array.map() method is mostly used when there is a new to output multiple list of a particular item.

Some important points to note about the Array.map() method

_1. Array.map() creates a new array from calling a function for every array element