CODEWITHSUNDEEP
javascript
antoniaezu6yn4xgma
antoniaezu6yn4xgma

Reputation: 35

Finding the first letter of every element in an array

I was doing some exercises that involved using .map() and it all seemed pretty straight forward. However in one of the examples, I was tasked with using the .map() iterator to return the first letter of every item in an array.

See below the code that solved the problem.

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

const secretMessage = animals.map(firstLetter => {
  return firstLetter[0]
});
console.log(secretMessage)

My question is, how does the firstLetter() function know to return only the first letter of each string within the animals array, rather than just returning the item at index 0 repeatedly?

Upvotes: 1

Views: 3788

Answers (6)

claasic
claasic

Reputation: 1050

map() iterates over your array, makes a copy of each value and transforms it, with each transformation result being written into a new array. On each iteration step it thinks of the current value as firstLetter and calls a function with it as a parameter (firstLetter). So firstLetter is sequentially Hen, then elephant etc. On each of these you apply the function which returns the first letter of your parameter which then gets put into the new array.

The following naming should make it more clear what I mean:

const secretMessage = animals.map(currentValue => {
  return currentValue[0]
});

Upvotes: 1

Nick Parsons
Nick Parsons

Reputation: 50694

.map() accepts a function as an argument. In your case, you are passing through an anonymous arrow function. Your anonymous arrow function has an argument which it accepts called firstLetter. When you call .map(), it will execute your arrow function for every element in your array, and thus pass through this element into the function.

So, firstLetter doesn't really represent the firstLetter, but rather it represents a given element in your array. It may be clearer if you rename this argument to something more representative of what it really is:

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

const secretMessage = animals.map(animalType => {
  return animalType[0]; // get the first character from a given string
});

So, doing animalType[0] above will give you the first character of the given string, not the first element in your animals array.

Upvotes: 0

Ziv Ben-Or
Ziv Ben-Or

Reputation: 1194

The map() method creates a new array with the results of calling a provided function on every element in the calling array. for example:

  • Iteration 1: firstLetter = 'Hen' so 'Hen'[0] = 'H'.
  • Iteration 2: firstLetter = 'elephant' so 'elephant'[0] = 'e'. And so on...

Here is the documantation: map

Upvotes: 1

Wolfetto
Wolfetto

Reputation: 1130

Map iterates for each value in array. So, assume that firstLetter at the first will point to 'Hen' so firstLetter[0] is equal to H and so on for all others values inside array.

Upvotes: 0

Oliver
Oliver

Reputation: 1644

As mentioned in the comments, the map function iterates over every element in the array. When you access the firstLetter[0] you are not accessing the first element of the array animals, you are accessing the first character of the string firstLetter.

How map works is that it iterates over every element in a list and performs some function on it, so the code:

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

const secretMessage = animals.map(firstLetter => {
  return firstLetter[0]
});

Is equivalent to

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

let secretMessage = [];
for (var i = 0; i < animals.length; i++) {
  firstLetter = animals[i] # the ith string in animals
  secretMessage.push(firstLetter[0]) # add the first letter of the string
}

The map function takes a function which takes an element as the argument, and creates an array of the return values of the function with every element in the array. So, for 'Hen', the function firstLetter => firstLetter[0] returns 'H', then for 'elephant' it is 'e', and so on. Then, secretMessage is set to ['H', 'e', ...]

Upvotes: 0

Mara Black
Mara Black

Reputation: 1751

Take the 1st letter using Destructuring assignment

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


const result = animals.map(([v])=> v);
console.log(result);

Upvotes: 0

Related Questions