DEV Community

loading...
Cover image for JavaScript Made Easy: Part 8

JavaScript Made Easy: Part 8

dtetreau profile image David Tetreau Updated on ・3 min read

Welcome to Part 8 of the "JavaScript Made Easy" series. Last time, we talked about function scope and nested functions. For part 8, we will continue talking about functions and introduce a few new concepts related to that topic. Open up a repl and code along!

Arrow Function Expressions

An arrow function expression (or just "arrow function") is another way to write a function. As of 2015 (ES6), traditional functions and arrow functions are both valid ways to write functions. Some code bases will have traditional functions and some will have arrow functions. That is why it is important to know both. Also, you cannot use arrow functions in all situations and vice versa.

Formatting Differences

// Traditional Function
function cubed (num){
  return num * num * num;
}

cubed(2);//returns 8
Enter fullscreen mode Exit fullscreen mode
// Arrow Function
const cubed = num => num * num * num;

cubed(2);
Enter fullscreen mode Exit fullscreen mode

Let's break this down:

  1. The word "function" was removed.
  2. A fat arrow was placed between the parameter and opening curly brace.
  3. The curly braces and the word “return” were removed.
  4. The parameter parenthesis were removed.
  5. The function was assigned to a variable. This makes it easy to use the function other places in the codebase.

As previously stated, both of these functions are valid. They will return the same value. However, arrow functions are considered to be short-hand of traditional functions.

Additional Formatting Differences

If you have multiple parameters or no parameters, you'll need to leave the parentheses around the parameters. For example:

// Arrow Function
const sum = (num1, num2) => num1 + num2;

sum(25, 50);//returns 75

Enter fullscreen mode Exit fullscreen mode

Notice that there are two parameters listed (and two arguments passed in, so the parenthesis are required. Also, the same will be true for an arrow function with no parameters like below:

// Arrow Function (no arguments)
let num1 = 2;
let num2 = 4;
const sum = () => num1 + num2;

sum();//returns 6

Enter fullscreen mode Exit fullscreen mode

Instead of listing parameters and taking arguments when the function was called, this function used variables that were declared outside the function. Therefore, since the arrow function does not have any parameters, you must include the parenthesis.

More Formatting Differences

If the information between the curly braces in a function is complex, you'll have to leave the curly braces. That is to say, there are multiple lines within the function (such as declaring local variables and also having a return statement). For these, situations, curly braces should be left on the arrow function as well as the return keyword. It looks like kind of a mix between a traditional function and an arrow function. Here's an example:

// Arrow Function
const interpolateExpressions = (firstName, job) => {
  let age = 38;
  return `My name is ${firstName}, I am ${age} years old, and I am a ${job}.`;
}

interpolateExpressions("David", "Web Developer");

Enter fullscreen mode Exit fullscreen mode

Notice that since there were several lines of code within the function body (between the curly braces), there had to be curly braces included as well as a return statement. Remember we learned about interpolation? This is a good example of how that concept is used within a function. Notice that the template literals are the dollar signs and curly braces within the string. Also notice the string is surrounded by backticks and not quotation marks.

There is some additional syntax relevant to arrow functions once we get to objects, but you should have a good handle on arrow functions once you practice the concepts above. Experiment with these examples, and make them your own! If you are ready for some advanced arrow function practice check out this post and this post.

I hope you have enjoyed this post! Please check out the entire "JavaScript Made Easy" series by David Tetreau. There will be a new post daily.

Discussion (5)

pic
Editor guide
Collapse
matgott profile image
matgott

Hi! I think is really dangerous talk about arrow functions as simple syntax sugar, because aren't. The "this keyword" binding is an example.

Arrow functions aren't just another syntax, exists an impact in our code, our logic and way o programming when we use them.

Just for clarifying, I apreaciatte the post but in my opinion arrow functions explain in this way could confuse to a people who recently start to programming or use javascript.

Thanks!

Collapse
dtetreau profile image
David Tetreau Author • Edited

Thank you! I definitely plan to talk about more advanced concepts in the future, but I’m trying to keep things simple at first. I definitely want to circle back around and get more in depth with functions because they are important. Thank you for your suggestion! I’ll make sure I include that.

Collapse
kiranrajvjd profile image
Kiran Raj R • Edited

You can use include "javascript" after the three ` to make your codes colorful (syntax highlighting)

Collapse
dtetreau profile image
David Tetreau Author

Much better! Thank you!

Collapse
misterjay profile image
MisterJay

👏👏👏👏