10 Things to Know About ES6 before Learning React JS

When you start learning React JS, you’ll probably feel lost if you’re not familiar with the ES6 syntax, even if you have previous experience with Javascript.

If you don’t know much about ES6, ES6 is a standard implemented by Javascript, and it describes all the rules, details, and guidelines that a Javascript implementation should have. And I’ll tell you a secret, there are many different Javascript implementations out there, and that’s why some ES6 features are not available in some browsers (I’m looking at you, IE).

React JS fully embraces ES6, so once you learn and understand the ES6 syntax, your life as a React developer will change because it will be a lot easier to read and write React code.

In this tutorial I will show you some of the ES6 features I think are important to know before you start learning React. But if you prefer to learn from videos like me, check out this video on YouTube:

Are you still here? If so, let’s get started!

Instead of memorizing fancy concepts it’s always easier to understand them by checking examples. Also if possible, I would recommend trying the examples yourself.

const, let, and var

Before ES6, we only had one way to declare variables in Javascript: the “var” keyword. But now we also have “const” and “let”.

const

Variables defined with “const” can’t be redeclared or reassigned.

If you try to reassign a variable defined with “const”, you will get a syntax error:

But if the variable is an object or array, then you can actually change the values of the properties/elements they hold:

Similarly with arrays:

But you can’t reassign the whole object or array:

Variables declared with “const” are block scoped, that means they can only be accessed within the block they were declared. The scope of a variable means where you can access the variable within your code. Let’s see an example:

If you try to access the variable from the function, you will get and undefined error, but outside the function, it will work.

let

A variable declared with “let” can be reassigned:

But can’t be redeclared:

Similarly to “const”, variables declared with “let” are block scoped, that means they can only be accessed within the block they were declared. For example, if you use a “let” variable in a for loop, you can’t access that variable outside the for loop :

var

The “var” keyword is what we all have been using for many years in Javascript, but one of the main issues of declaring variables with “var”, is the scope. If you declare any variable outside a function with “var”, it will be globally scoped. This means you can access that variable from other functions and blocks. This makes your code prone to bugs and hard to debug code. Especially if you run multiple scripts on one page. For example:

You can also redeclare “var” defined variables:

Also reassign them:

When to use what?

You may find many different opinions between developers on how to implement these keywords to define variables. But this is what I would suggest:

  • “const” should be your first option when you define a variable now in Javascript unless you know the value will change.
  • You should only use “let” if you know the value of the variable will change later in your code.
  • “var” should not be an option anymore, and you’ll rarely see the use of “var” in React.

Arrow functions

Arrow functions are a big part of React JS; you will use them everywhere.

This is how you usually create a function before ES6:

And this is how the same function would look like as an Arrow function:

You can notice there’s no “function” keyword. Also you have this arrow (=>) next to the parameters.

But if we only have one line of code in the function, like in this case, we could remove the “return” keyword because there’s an implicit return and also the curly braces. It will look a lot cleaner now:

Also with Arrow functions, we could define default values for our parameters:

Destructuring assignment Arrays and Objects

Destructuring assignment allows you to extract individual items from arrays or objects and assign them to variables using a shorthand syntax.

Destructuring Arrays

Let’s see an example with Arrays. We usually do this to extract values from an array and assign them to variables:

But using ES6 destructuring it becomes a lot simpler:

If you come from PHP, this is very similar to what the list() function does.

Destructuring Objects

Now let’s see and example with objects. Instead of using brackets [] like in the arrays, we enclose the variables with curly braces {} and the properties of the object are assigned to variables of the same name:

But we could also change the name of the variables:

Spread Operator

The spread operator allows you to copy arrays and objects in a shorthand syntax.

Spread Operator for Arrays

Let’s see it in action with arrays:

In that example, we copy the values from numbers1 into numbers2. By adding “…” as prefix to the array, you spread it out.

We could also add more items to the array:

The Spread Operator also can be useful when you have a variable that is an array, and you want to pass it to a function that takes an unknown number of arguments:

In the first example, you won’t be able to call the function just passing the numbers variable as an argument. You need to pass them individually or to add the “…” as prefix to the array to spread the values out.

And here is another cool trick, you could also apply the Spread Operator to a string to convert it to an array:

Spread Operator for Objects

Now let’s see some examples with objects:

In that example, similarly to arrays, we can copy an object by adding the “…” prefix and assigning it to another variable.

The spread operator is also very useful to merge objects. This is a very common if you use something like redux to manage your state in React:

Rest Parameters

In some cases you need to create functions that accept an unknown number of parameters. Before ES6, you could do this using the “arguments” keyword. Let’s see an example:

In that example, we have a sum() function that takes two parameters, but what if we wanted to pass more than two arguments (parameters) to the function?:

We would get the same result, and Javascript will ignore the other arguments.

Javascript provides the “arguments” object to access all the arguments passed to the function. If we console.log “arguments” we could see it’s an object:

The problem with “arguments” is that we can’t apply array functions to it because it’s an object, so we would need to implement other methods to do our calculations. That’s why ES6 introduced Rest Parameters, if we add “…” as a prefix to the parameter in the function definition, then it becomes an array of arguments when the function is called. Then we could apply any array function to it or just have the ability to loop it:

The syntax for Rest Parameters is similar to the Spread Operator, it uses the “…” but you could differentiate them by checking where they are used. If you see “…” in the parameters of the function definition, then you are seeing Rest Parameters. Otherwise it is a Spread Operator.

Template Literals

At some point, we all have to concatenate (join) variables with strings in Javascript, for example, showing a personalized message to the user or customizing a button label. And we know this is a pain to do in Javascript because you have to keep adding plus operators (+) and quotes for every string you want to concatenate.

In React we use JSX (JSX is syntax used in React JS that looks like HTML), so we won’t be using template literals that much because we can easily include variables and expressions in the tags, but I think it’s an important feature.

Let’s see an example:

And if we have to add more strings or the strings include other characters like quotes, they need to be escaped with “\” then the code becomes more harder to read and error prone:

If we use template literals, then it will be a lot simpler. We need to add a backtick “`” (the key below the ESC key) to the beginning and end of the string and use “${}” for the variables:

You can also have multiline strings:

Map

The map() method is used to apply a function to every element in an array and return a new array.

Let’s say we have an array of user objects:

If we wanted to get the IDs of this users and assign them to a new array, we would do this:

But let’s see how we would do it in ES6 using map(). It would take us just one line of code:

map() is frequently use in React JSX to render list tags from an array, let’s see an example simulating JSX but as just a string:

 

Filter  (ES5)

The filter() method was introduced in ES5 not ES6, but I wanted to include it in this tutorial because you will see it everywhere in React code.

It creates a new array with all elements that pass the condition implemented by the provided function. In other words, if the function you pass to filter() returns “true”, then it will go to the new array.

If for example we wanted to get all the users that were deleted ( deleted = true) from the same array of users, we would do this:

Classes/Subclasses

Classes

For many years, Javascript developers have been emulating classes with functions, but classes are now finally included in Javascript with ES6.

Classes have been an important part of many languages. If you are familiar with other languages that support classes, then you should have no problem using classes in Javascript.

In React it’s common to have class-based components so that’s why it’s very important to understand how ES6 classes work and their syntax. A class is a template of an object. Object-oriented Programming (OOP) is a huge topic, so I will just show you here some very basic examples in Javascript.

To define a class, we use the “class” keyword and give it a name, which by convention should have the first letter capitalized:

Now let’s add some methods:

Subclasses

We can also have subclasses. Subclasses extend another class, so the subclass inherits the properties and methods of the original class.

You will see this a lot in React JS when you want to create a new Component:

Let’s create a new subclass called Student that extends from User.

But we will get an error if we do this because the subclass needs to always call super() in the subclass constructor:

By calling super(), we will call the parent class constructor method. This will allow us to use the “this” keyword in our subclass, and we could also add more properties and methods:

Modules

For years Javascript have been trying to implement different solutions for modules using third-party libraries. But now ES6 brings modules into Javascript natively. Modules provide a way to include functionality from one file into another. As a good practice, code should be split into smaller files.

Let’s say we have a file called math.js, and in that file we have a function called sum():

By using the “export” keyword, we could import that function (module) in another file. In this case, we have a file called app.js, and we use the “import” keyword followed by the module name in curly braces and then the “from” keyword to specify the location of the file. If the file is in the same folder, use “./” as a prefix:

A file can have multiple exports, but we can also specify a default export if we use the default keyword:

Now that we have a default export, we can import it without using the curly braces around the module name: