Intro to JavaScript Functions, and ES6 arrow syntax

What is a Function and What is its Purpose?

A function is a type of procedure or routine used to perform a specific task. Imagine you needed to convert measurements of baking ingredients every time you needed a new ingredient or used a new recipe. If you could simply plug in your measurement into a conversion table that has already done the work for you, wouldn’t you? Functions are useful when you need to do the same task over and over again.

How Do You Read it? (JS Function Syntax)

A function is declared with the function keyword “function”, followed by the identifier — what you choose to name the function and a set of parentheses (). The body of the function is where the coded procedure will run and return your result.

A function can also take in parameter(s). A parameter is a named variable that can take on the value of an argument passed in when the function is invoked. An argument is any input you pass into your function when you call the function.

Figure 1. JavaScript Function syntax

Figure 2. JS Function that takes an input

• A function is executed or run, when you invoke or call the function in your code with the function name:

Figure 3. Calling a function to run it

JavaScript does not have implicit returns, so to return a value from a function, we use a return statement to explicitly return the resulting value.

Sometimes, you will want to set the function to a variable name in order to access it elsewhere in your code. This can be done by defining a function using anonymous function expressions:

Figure 4. Explicitly returning the result value with the ‘return’ keyword

What is JavaScript ES6?

JavaScript’s ECMAScript 6 is also known as ES6 and ECMAScript 2015. This version of JavaScript introduced many major changes including the features below that can be tested at w3schools link below.

ECMAScript 6

• JavaScript let
• JavaScript const — A commonly accepted practice is to use const except in cases of loops and reassignment.
• JavaScript Arrow Functions
• JavaScript Classes
• Default parameter values
• Array.find()
• Array.findIndex()
• Exponentiation (**) (EcmaScript 2016)

ES6 Arrow Function Notation

The arrow function notation introduced with ES6 has made reading and writing function blocks cleaner, clearer and more concise. JavaScript even provides several ways to further refactor it and we will explore them below.

Figure 5. Arrow Function Notation

1. First, the arrow functions remove the need to type out the function keyword function. Then, the identifier is set equal to its parameters= ( ) and a fat arrow points to the function body encased in curly braces => { };

const rectangleArea = (width, height) => {
  let area = width * height;
  return area;
};

2. Functions that only take a single parameter do not need to be enclosed in parentheses. However, if a function takes zero or multiple parameters, parentheses are required.

Figure 6. Parameters and Parentheses

3. A function body composed of a single-line block does not need curly braces to enclose the function body. Without the curly braces, the single-line block of code will be automatically (implicitly) returned when invoked. The contents of the block should immediately follow the arrow => and the return keyword can be removed. This is referred to as implicit return.

Figure 7. With single-line block, a single parameter is passed in and has implicit return. So long as it fits on a single-line, no parentheses or curly braces are necessary.

So if we have a function:

// Standard JS function syntax using arrow functions:
const squareNum = (num) => {
  return num * num;
};

// Refactored into a single-line block:
const squareNum = num => num * num;

The parentheses around num have been removed, since it has a single parameter.

• The curly braces { } have been removed since the function consists of a single-line block.
• The return keyword has been removed since the function consists of a single-line block.

It’s important to be familiar with ES6 syntax, especially arrow functions as it has become the industry standard since its inception in 2015. JavaScript is now much easier to read and write without all the parenthesis and curly braces throughout. It’s also pertinent to be familiar with the multiple ways of writing functions because you will eventually come across many of them as you read legacy code.

Resources

You can download this Functions: Cheat Sheet from Codeacademy for reference to the fundamentals of JavaScript Functions. The following websites also do a very thorough job of explaining ES6 features.

ES6 Syntax and Feature Overview

This site compares the new features of ES6 to ES5:

ECMAScript 6: New Features: Overview and Comparison