Clarifying Arrow Function Notation

The Goal:

As per this faq, I want to try to make a simplified explanation for arrow notation. In that lesson it is proving a challenge, but this should be applicable to anyone trying to wrap their heads around the topic.

Function Arrow Notation

Arrow functions are a shorthand way to write out a function, and is most useful for creating a very simple and quick function. As you’ll see, especially useful for a function that takes an input, modifies it and returns a changed value. (The link at the top of this paragraph is to documentation on this topic and is a great resource to furthering your understanding).

So lets take two functions, the first is just the basic format and the second will be an example:

var functionVariable = function (parameter1){
    return expression;
};

const timesHundred = function(number){
    return number * 100;
};

Our example function is pretty basic, just multiplies a given number by one hundred. Useful if you want to convert decimals into percentage numbers. Now lets take a look at how each of these would be written in arrow notation.

var functionVariable = parameter1 => expression ;
//Note that this is equivalent to => { return expression; }
const timesHundred = number => number * 100 ;

As you can see it is a lot simpler. There are some caveats and rules to this: If you have only 1 parameter, no need for parenthesis but if there are 0 or muliple then it requires them. () => or (para1, para2, ....) =>. On the expression end, if the function only does a return statement no brackets are necessary (as seen above), on the other hand, if it is more than return this it requires brackets. Looking like this => { statements}.
These additional shortcuts can make reading these arrow functions more difficult, but just remember that if you don’t see any brackets, then the function is just returning the expression after the arrow.

Anyways this became quite wordy, for further examples check out the documentation. Please discuss below and I hope this explanation helps those struggling.

3 Likes

I dont understand why they used return in the instruction but then you dont have to use it in the editor.

7 Likes

I have the same problem as mrooze! Also: there are no accolades in the solution, but they aren’t present in the instructions / explanations of the .map() method.

3 Likes

Hello,

try this although it differs from the solution:

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

worked for me.

What is allowing for the elements in the ‘animals’ array to be referenced as ‘animal’?
const secretMessage = animals.map(animals => {
return animal[0]
} )
(The solution)
I don’t understand how that works. Or are JS arrays just that smart? lol

2 Likes

here:

animals =>

you define a function with a parameter animals (this should be animal):

function(animal){ /* body of function */ }

now map will call this function for every element in the array, and pass the value to animal parameter. Using the fat arrow syntax (=>) is just a shorthand for defining the function.

3 Likes

The .map function knows that any parameter in a function declared inside it will be the elements of the function it is being assigned to?

no, you declare the function once. Then under the hood map calls the function with a different argument (the next value of the list).

You understand the difference between function parameter and arguments?

2 Likes

I also agree. It’s like when they came to writing this part of the course, someone else took over and decided they just wanted to show how clever they were. I went from going through about 40% of this course pretty well, and ever since HoF and iterators I’ve totally slowed down and hit brick wall. The examples don’t help much. The thing that has helped me is keeping concise notes all the way through because as you say, navigating back is a nightmare.

2 Likes

And to add, the code they give in the hint looks nothing like the solution:

Hint:

const bigNums = [1, 2, 3, 4, 5].map(el => el * 5);

Using a function expression in a .map() will look like:

const bigNums = [1, 2, 3, 4, 5].map(function(el){
return el * 5;
});

Solution:

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

1 Like

Actually animal can be replaced by any other made up variable name. For example you could write:
const secretMessage = animals.map (dog => {
return dog[0];
});
In animals.map, animals is the true name of the array to be iterated. Any other variable name can be used as the variable name being passed in the .map function such as dog was used.

4 Likes

I found this to be the simplest syntax:

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

so the “map” iterator passes each item in the animals array to the function and saves what is returned (firstChar[0] in this case, which is the first letter of each item) in the appropriate place in the new secretMessage array.

3 Likes

Here is, what got me confused:

You can either write:
const secretMessage = animals.map(tier => {return tier[0]});
in this case, you use {} and return

or you can write:
const secretMessage = animals.map(tier => tier[0]);
in this case, you neither use {} nor return. If you only use return or {}, the code will not run, because it is a mixtrure of the short and the log code-version.
I still have problems with seperating this in my mind.

yes, its just a a shorthand.

3 Likes

The return keyword isn’t used in the JavaScript file because for arrow function syntax, you can write your code block without the curly braces {}, parenthesis (), and the return keyword for concise (in essence, concise refers to ‘less terms’) function bodies, whilst in the instructions it may have been used with the {}, (), and return keyword making it less concise. Remember as a programmer, you want to do less work.

1 Like

It would be nice to have a follow up lesson before Higher order functions about the syntax differences between ES5 and ES6 regarding functions. I think that would lessen some of the confusion between the formats.

1 Like

Arrow functions are very much like the ES5 counterpart, function expressions. Both are anonymous function expressions, but with some differences.

array.map(function (param) {
    return param ** 2;
})

Above will return a new array with values corresponding to array, but which values are squared (in this instance).

ES6 allows us to take some shortcuts owing to the simplicity of the return…

array.map(param => param ** 2);

The ES5 example must have,

  • function keyword
  • parentheses on the parameter
  • explicit code body delimiters (curly braces)
  • explicit return keyword

As we can see above, ES6 lets us drop all those requirements when the body contains only one statement.

  • no function keyword
  • no parens on parameter
  • no code body delimiters
  • no return keyword

When there is no parameter, or more than one parameter, then parens are required. When there is more than one statement then both body delimiters and return keyword are required.

4 Likes

Thanks. I think I am getting there.

3 Likes

I’m trying to follow along as well.
This is because when it can be written on one line of code, you can eliminate the curly brackets and the return is implicit…correct??

This was helpful to me. I wasn’t understanding that animal in this example was a parameter. For some reason I was thinking it was the name of the callback function being passed through. Is the reason I don’t see a name of a callback function because it is an anonymous function? From there, it’s just shorthand which makes sense when I know that animal is the parameter.