Why does this code return an array of undefined values along with the other values?

Question

I am mapping an array and using a switch statement to console.log some strings. It logs all of the strings but also an array: [undefined, undefined, undefined] . I'm not sure why it logs the array of undefined values. Is it because map returns a new array of values and in this case I am removing the values from the existing array and transforming them to strings?

 const arr = ['joe', 'paul', 'chris'] const statements = arr.map((name) => { console.log(name + ' console!') switch (name) { case 'joe': console.log(name + ' is cool!'); break; case 'paul': console.log(name + ' smells!'); break case 'chris': console.log(name + ' is cheap!') break; } }) console.log(statements); 

Answer 1

.map takes in an array and returns a new array, composed of calling the callback function on each item of the original array. Your callback function is not returning anything, so the statements array evaluates to [undefined, undefined, undefined] .

.map is not appropriate here, because you don't need a mapped array. Use forEach instead, and omit the statements variable:

 const arr = ['joe', 'paul', 'chris'] arr.forEach((name) => { console.log(name + ' console!') switch (name) { case 'joe': console.log(name + ' is cool!'); break; case 'paul': console.log(name + ' smells!'); break case 'chris': console.log(name + ' is cheap!') break; } }) 

You could also consider avoiding switch entirely, since it's unnecessarily verbose and can be error-prone - use an object instead:

 const arr = ['joe', 'paul', 'chris'] const nameStrs = { joe: 'is cool', paul: 'smells', chris: 'is cheap' }; arr.forEach((name) => { console.log(`${name} ${nameStrs[name]}`); }) 

If you did want to construct an array of responses for each item in the array, then use .map and return the value at the end of the callback, in addition to logging the value:

 const arr = ['joe', 'paul', 'chris']; const nameStrs = { joe: 'is cool', paul: 'smells', chris: 'is cheap' }; const statements = arr.map((name) => { const statement = `${name} ${nameStrs[name]}`; console.log(statement); return statement; }); console.log(statements); 

Answer 2

This is because you are not returning anything from the callback passed to map() . If you want to return array with is cool,... values return it in the end of function.

 const arr = ['joe', 'paul', 'chris'] const statements = arr.map((name) => { let res; switch (name) { case 'joe': res = name + ' is cool!'; break; case 'paul': res = name + ' smells!' break; case 'chris': res = name + ' is cheap!'; break; } console.log(res); return res; }) console.log(statements); 

Answer 3

您没有从函数返回任何内容，因此最后一行记录了由map函数的回调构造的未定义元素的数组。

Answer 4

You are logging the string instead of returning the values. map() expects a return value like:

 const arr = ['joe', 'paul', 'chris'] const statements = arr.map((name) => { switch (name) { case 'joe': return name + ' is cool!'; case 'paul': return name + ' smells!'; case 'chris': return name + ' is cheap!'; } }) console.log(statements);