Quickstart | Understanding Javascript ES6’s Arrow Function

Today I’m gonna help you understand what arrow function is.

Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript procedure — a set of statements that performs a task or calculations.

Let’s take a look at this sample function definition named square:

A function definition consists of a function keyword, followed by:

• The name of a function.
• A list of parameters to the function, enclosed in parentheses and separated by commas.
• The JavaScript statements that define the function, enclosed in curly brackets, {…}.

function square(number) {
    return number * number;
}

This function named square, takes one parameter called number, the statement says to return the parameter, multiplied by itself.

The statement return specifies the value returned by the function:

Now, we’re gonna take a look on how the function is called

We can call a function by typing out it’s name followed by an parenthesis and inside a parenthesis is the argument which is the value that will be passed on the function definition

console.log(square(2);

Currently, the current ES ( EcmaScript ) version supported in modern browsers is ES5. However, ES6 tackles a lot of the limitations of the core language, making it easier for developers to code.

Now, that we know how to define a function, Let’s take a look on how to define a function in a multiple ways.

We are going to start by defining each of a function in a ES5 way, and then on how to do it in ES6.

Let’s start by creating a simple function named helloWorld that will have a statement that will return a string of ‘hello world’.

// ES5 named function
function helloWorld() {
    return 'hello world';
}
console.log(helloWorld());

And the way you do this in ES6 is by initializing a function into a variable, in this case, the variable is being assigned to a function using arrow.

// ES6 named function
const helloWorldB = () => 'hello world';
console.log(helloWorldB());

Notice that we don’t need the `function and return` keyword, that is because if you have to return a single line of code, es6 is automatically recognize that the statement should be returned.

Let’s take a look on another sample, a function named multiply that accepts two parameters that will return a calculated value by adding the first and second parameter together.

// ES5 named function with two parameters
function sum(a, b) {
    return a + b;
}
console.log(sum(1, 3));

And this is how you wanna do it in ES6, you’re gonna assign a function to a variable with a parameter and b, enclosed into a parenthesis followed by an arrow syntax, followed by the return statement.

// ES6 named function with two parameters
const sumB = (a, b) => a + b;
console.log(sumB(1, 3));

Next, is a function called printName that will accept a single parameter string and would return a string concatenated with the parameter.

// ES5 named function with single parameter
function printName(name) {
    return 'Hello, I am ' + name;
}
console.log(printName('Bob'));

And the way you do this with ES6 is just like the other but notice the difference, if you are passing a single parameter in a function, the parenthesis is optional just before the arrow syntax.

// ES6 named function with single parameter
const printNameB = name => `Hello, I am ${name}`;
console.log(printNameB('Bob'));

But how about an anonymous function like this?

// ES5 anonymous function
console.log(
    (function() {
        return 'anonymous function';
    })()
);

If you want to create an anonymous function in es6, you just have follow the convention in creating a function, which is an open and close parenthesis, followed by arrow syntax, and finally, the statement of function body.

// ES6 anonymous function
console.log((() => 'anonymous function')());

But, how about if you want to create a function that will accept an object as a parameter, and you want to access the property of the given object for your statement?

You can do this with dot notation syntax, you can access the properties of an object by specifying the name of the object, followed by dot (period), followed by the property name.

// ES5 destructuring object parameters
var person = { name: 'John', surname: 'Doe'};
function printFullname(person) {
    return 'Hello, my name is ' 
         + person.name +  ' ' + person.surname;
}
console.log(printFullname(person));

In ES6, there is different ways to access the property of an object.

// ES6 destructuring object parameters
const personB = { name: 'John', surname: 'Doe' };

One way is by destructuring the object by making the property a variable so you can use them in a simple way.

const printFullNameA = (person) => {
    const { name, surname } = person;
    return `Hi, I'm ${name} ${surname}`;
}

Another way is by using spread operator as a parameter of a function but you still have to use the dot notation syntax in order to access the property of an object, the only difference is, it is now possible to pass an object using spread syntax as a parameter of a function.

const printFullNameB = ({...person}) => {
    return `Hi, I'm ${person.name} ${person.surname}`;
}

You can also destructure the properties of an object being pass to a function directly in the parameter itself, so you don’t have to define a variable with the same name of the properties of the given object.

const printFullNameC = ({name, surname}) => `Hi, I'm ${name} ${surname}`;

One of the cool things you can do is initializing an initial value directly in the parameter, in this case, aside from destructuring the object directly in the parameter of a function, we are also initializing the default or initial value of the property of an object.

const printFullNameD = ({name = 'Initial', surname = 'Value'}) => `Hi, I'm ${name} ${surname}`;

And that has been the arrow function.

console.log(printFullNameA(personB)); // History, I'm John Doe
console.log(printFullNameB(personB)); // History, I'm John Doe
console.log(printFullNameC(personB)); // History, I'm John Doe
console.log(printFullNameD(personB)); // History, I'm John Doe
console.log(printFullNameD({})); // History, I'm Initial Value