can anybody explain me the work of the .map() method here

Question

explain the use of the arrow function inside the .map() method here.

let mFunc= function(fname, data) {
    for (i in data.shop) {              //iterating through the JSON data
        if (data.shop[i].name == fname) {
            let dataSv = data.shop[i];

            // We found a match, display details
            for (y in dataSv){   
                if (typeof dataSv[y][0] === 'object') {
                    dataSv[y] = dataSv[y].map(z => z.name) // explain me this part
                }

                alert(i + " : " + dataSv[y])

            }
        }
    }
}

}

the `map` returns an array of (from what i guess) `name` strings. It is saying loop over `dataSv[y]` and for every Object in the iteration, implicitly return it's `name` property. — Francis Leigh, Mar 26 '19 at 10:37
Possible duplicate of [When should I use \`return\` in es6 Arrow Functions?](https://stackoverflow.com/questions/28889450/when-should-i-use-return-in-es6-arrow-functions) — nicholaswmin, Mar 26 '19 at 10:38
What specifically do you want to know? How an [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) works? Or the [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) itself? Isn't the documentation clear enough? — Ivar, Mar 26 '19 at 10:39

SnorreDan · Answer 1 · 2019-03-26T10:38:54.077

2

.map(z => z.name)

Is shorthand for:

.map(z => {
  return z.name;
})

So when you are only going to write a single line inside your function, and that is a return statement, you can use this shorthand.

edited Mar 26 '19 at 10:38

answered Mar 26 '19 at 10:36

SnorreDan

2,740
1
14
17

2

Otherwise called *"Implicit return"*. +1 – nicholaswmin Mar 26 '19 at 10:37

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

This is just converting array of objects to array of strings which will contain the name of each element.

If you write an expression after => in array function with it will return that expression.

Body of arrow function

Arrow functions can have either a concise body or the usual block body.

In a concise body, only an expression is specified, which becomes the implicit return value. In a block body, you must use an explicit return statement

dataSv[y] = dataSv[y].map(z => z.name)

Is equivalent to

dataSv[y] = dataSv[y].map(z => {
    return z.name;
})

score 0 · Answer 3 · answered Mar 26 '19 at 10:46

Check this example. It may make it clearer

dataSv = [
  [
    {name: 'one', id: 1},
    {name: 'two', id: 2},
    {name: 'three', id: 3}
  ],
  [
    {name: 'eleven', id: 11},
    {name: 'twelve', id: 12},
    {name: 'thirteen', id: 13}
  ],
  [
    {name: 'twenty-one', id: 21},
    {name: 'twenty-two', id: 22},
    {name: 'twenty-three', id: 23}
  ]
]

dataSv[0] = dataSv[0].map(z => z.name)
dataSv[1] = dataSv[1].map(z => z.name)
dataSv[2] = dataSv[2].map(z => z.name)

console.info(dataSv)

score -1 · Answer 4 · answered Mar 26 '19 at 10:36

It will return simply the "name" property of each element of the array, instead of the original object.

Basically whatever the code on the right-hand side of the => evaluates to becomes the returned value for each array element that .map() iterates over.

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map for more info and a runnable demo you can play with

can anybody explain me the work of the .map() method here

4 Answers4

Body of arrow function