Rewrite a JavaScript Function as an Arrow Function

Instructor: [00:00] Let's say you have an interview question where they ask you to rewrite the normal function to be an arrow function. Let's see how can we handle that and what are the [inaudible] .

[00:13] Here we have the addFive() function, which receives one argument and adds 5 to the argument. If we console.log(addFive(5)), we're expecting to see 10. We see 10 indeed.

[00:33] Arrow functions are pretty common now as they landed in ES6. The syntax looks pretty similar to the normal function, if we're talking about the explicit return, so const addFive => = num { return num + 5 }. If we log(addFive(=> 5)), we see that the output doesn't change, so we return the very same thing. This is how arrow function looks like.

[01:23] If arrow function gets only one argument or one parameter in the function here, there is no need for parentheses. The explicit return means that we still use curly braces and return the value inside the curly braces.

[01:43] There is another version of arrow function with so-called implicit return. This one doesn't need the curly braces, so const addFive => implicit = num, and then we can just return num + 5 in the very same line. To confirm that it works, addFive => implicit 5, and we see that it looks still the same, 10.

[02:26] The difference is that we don't need to use curly braces and we return the nearest value inline. We don't use return, we don't use curly braces again. Just need single-line function.

[02:45] Then, it's also important to know that arrow functions behave differently, syntactically, if they're using different number of arguments. You see that with one argument, you don't need to use anything around it. If there is no argument, so let's say, const null arg => =...We just return true here. If we log it in, null arg => , invoke it, and we have true.

[03:32] If there is no parameter or argument specified, we just use empty parentheses. If there are actually couple of arguments, so const coupleArg =>, you need to use the parentheses and specify it like, arg1, arg2. Let's say we just want to add those, arg1 + arg2. Let's console.log(coupleArg => 1, 2) we see that we get the sum, 3.

[04:20] Again, here is the difference from zero arguments to couple of arguments. For arrow function without arguments, we just use parentheses here. If we have one argument, we use just the argument with omitted parentheses. If there are more than one, so two and more, then we use parentheses and the arguments inside.

[04:48] This is where I have to say, regarding the syntactical features of arrow functions, there are also other features that make them so distinguishable from the normal functions, namely, they cannot be used in constructors. They have the very specific behavior regarding the scope of this. Finally, they can't be used as generators.

[05:20] In this lesson, you learned how to syntactically write arrow functions and how to rewrite the normal function to arrow function. I hope you will have an easier time if somebody asks you to write it without Prettier or other code formatters that solve all the brackets and parentheses for you.