map function return undefined

Question

Down below, you see a simple map function for array, and I can't figure it out why I have undefined when I call index[0] .

When I call return index , I got array of numbers. so they exist!

Source:

 let aRa = [ { hero: "troll", age: 12, hair: "red" }, { hero: "rikky", age: 11, hair: "purple" }, { hero: "techies", age: 40, hair: "yellow" } ] let joyRide = aRa.map(function(item, index, array) { return index[0]; }); console.log(joyRide)

Source code image:

Answer 1

The second parameter of the callback passed into Array.prototype.map() gets a number. You are trying to index a number and getting undefined.

Answer 2

The second parameter of the call back function of Array.prototype.map() is the index that have numeric value, using index on them will always return undefined .

To access the first key from each object in the array you can try the following using Destructuring assignment :

 let aRa = [ {hero:"troll", age:12, hair:"red",}, {hero:"rikky", age:11, hair:"purple"}, {hero:"techies", age:40, hair:"yellow"}, ] let joyRide = aRa.map(({hero}) => hero); console.log(joyRide)

Answer 3

If you want to pluck keys, you can use the object destructuring assignment hen mapping to extract individual key-value pairs referenced by the key.

 const heroes = [ { hero: "troll", age: 12, hair: "red" }, { hero: "rikky", age: 11, hair: "purple" }, { hero: "techies", age: 40, hair: "yellow" } ] const names = heroes.map(({ hero }) => hero); const ages = heroes.map(({ age }) => age); const hairColors = heroes.map(({ hair }) => hair); console.log(`Names: ${names.join(', ')}` ); console.log(`Ages: ${ages.join(', ')}` ); console.log(`Hair Colors: ${hairColors.join(', ')}`);

If you want the first item, in the array, you can also use object destructuring.

 const heroes = [ { hero: "troll", age: 12, hair: "red" }, { hero: "rikky", age: 11, hair: "purple" }, { hero: "techies", age: 40, hair: "yellow" } ] const [ first ] = heroes; console.log(first); const [ { hero: firstName } ] = heroes; console.log(firstName);

Answer 4

If you mean to get the 'hero' of first element, you get it via

console.log(aRa[0].hero)

If you want to get the hero element of all items and map it in a new array, you should do

let aRa = [
  { hero: "troll"   , age: 12 , hair: "red"    },
  { hero: "rikky"   , age: 11 , hair: "purple" },
  { hero: "techies" , age: 40 , hair: "yellow" }
]

let joyRide = [];
for (i = 0; i<aRa.length; i++) {
  joyRide.push(aRa[i].hero);
}

console.log(joyRide)

Answer 5

Map function it automatically executes loop according to the length of the array on which map function is called. In your case this will work for you..

let joyRide = aRa.map(function(item, index, array) {
  return item; 
});

If you want to get array of heros than

 let joyRide = aRa.map(function(item, index, array) {
      return item.hero;
    });

Explaination

/* when first time loop executes */

item will have value { hero: "troll", age: 12, hair: "red" }

index will have value 0

array will have value

[
  { hero: "troll"   , age: 12 , hair: "red"    },
  { hero: "rikky"   , age: 11 , hair: "purple" },
  { hero: "techies" , age: 40 , hair: "yellow" }
]

/* when second time loop executes */

item will have value { hero: "rikky", age: 11, hair: "purple" }

index will have value 1

array will have value

[
  { hero: "troll"   , age: 12 , hair: "red"    },
  { hero: "rikky"   , age: 11 , hair: "purple" },
  { hero: "techies" , age: 40 , hair: "yellow" }
]

and so on till the length of the array..