Javascript Concise Body Arrow Function Question

Question

I have a question regarding the arrow functions in Javascript: What exactly is the code inside the map() method doing? I can't understand how exactly this takes each word and then join() method takes the first character?!

const animals = ['Hen', 'elephant', 'llama', 'leopard', 'ostrich', 'Whale', 'octopus', 'rabbit', 'lion', 'dog'];

const secretMessage = animals.map(animal => animal[0]);

console.log(secretMessage.join(''));

Answer 1

The const animals is an array of strings and you can access the individual letters of each string in the same way that you can access the individual elements of the array:-

The first element of the array animals[0] is "hen"

animals.map() iterates over each element of the array, so, we've called each element in the array "animal" we could have called it anything but, we said animals.map(animal => animal[0]) so, animal[0] is the first letter of each entry.

If an arrow function only has one line, you don't need to include a return statement or curly braces, it will just return the result, in our case, the first letter of each animal. This is then pushed onto our new array secretMessage as an individual string element. We then use the array method join() to stitch together those individual strings that the array contains.

Here's a nice tool that helps visualize this: Python Tutor

Answer 2

I think you understand what map does but are confused by animal[0]

for each iteration of the map loop, animal is the string held in the current element of the animals array. the [0] is a shorthand reference to the first character of the string in that element.

string[0] is identical to string.charAt(0)

So your map is merely returning a new array holding the first letter of each element of the starting array, which is then joined to make the secret word.

let string = "hello";
console.log(string[0]);
console.log(string.charAt(0));
console.log(string[0]===string.charAt(0));

Answer 3

Array.map makes a new array and for every item in the target array(the one you use the map function on), uses the function(the one you gave it, animal => animal[0]), then it puts whatever value the function returns

As to the how, let's look at an imperative approach(since you want to know the how)

//just for the example I'm overwriting the Array.map function
Array.prototype.map=function(yourCallback){
  let yourArray=this, resultArray=[]
  for(let i=0;i<yourArray.length;i++){
    resultArray[i]=yourCallback(yourArray[i],i,yourArray)
    //this line above is the relation between your callback and the returned result
  }
  return resultArray
}

const animals = ['Hen', 'elephant', 'llama', 'leopard', 'ostrich', 'Whale', 'octopus', 'rabbit', 'lion', 'dog'];

const secretMessage = animals.map(animal => animal[0]); //in this instance of arrow function, animal[0] IS what is returned

console.log(secretMessage.join(''));

Answer 4

animals.map(animal => animal[0]); creates an array containing first letter of each element. .map() makes a new array, iterate with the function animal => animal[0], maps each element of new array with first letter of animal array element (respectively). Simple terms - function inside .map() is an iterator function

secretMessage.join('') - creates a string by joining each Array element with the delimiter ''

Answer 5

Your map function on each iteration takes the next element of the array ( animal ) and returns the first letter from the current animal

You can imagine it this way. The task of the function is to iterate over your given array With each new call, the next element of the array is passed to the arrow function. You can do any operation with it and return the result. The result that the arrow function returns will be written to the current element of the NEW array

For a simpler understanding, you can replace the arrow function with this one

(animal) => {
  return animal[0]
} 

As a result, you get an array, each element of which will consist of one letter (in this case, the first one) join('') joins all the elements of an array into a string. Here ee is transmitted - this is what the gaps between the elements will be filled with, in this case it is an empty string and a continuous string will be obtained If you pass ' ' you get something like H e l l o W o r l d

Answer 6

What exactly is the code inside the map() method doing?

.map() is an operation called on an array, which will execute the supplied function on each element of the array and return a new array composed of the values returned by that function.

So this calls a function on every element of the animals array:

animals.map(/.../)

And what is the function being called on every element in the animals array? This:

animal => animal[0]

Which, for all intents and purposes, is essentially this:

function (animal) {
  return animal[0];
}

The argument received by the function is the array element on which it's being invoked. In this case each element of the animals array is a string, so animal is a string.

And the function returns the first letter of that string.

So this:

animals.map(animal => animal[0]);

Expects an array of strings and returns an array of the first letter of each string.