Following the series of articles on React, today we are going to focus on JavaScript.

[If you missed it here you have my first introduction article to React]

Since its creation in 1995, JavaScript has evolved a lot. The changes are currently managed by the European Computer Manufacturers Association (ECMA) and the most widely used version is ECMAScript 6 or ES6 (or ES2015).

React makes use of these specifications, so we are going to see some of the most outstanding features.

 

Declaration of variables

Previously the variables were declared with var, we currently have two options

const: To define a variable that you cannot change.

let: To define variables that can be modified and that belong to the scope in which they are defined.

 

Template strings

They allow us to declare complex text strings (or templates) with several lines and replacement variables. To use template strings, we will create the form between two characters “

Before:

var hola = “Hola, me llamo “ + nombre

Now: 

let hola = `Hola me llamo ${nombre}`

 

Default parameters

In ES6 we can define default values ​​in the parameters of a function.

function miAficion(nombre="Pepe García", actividad="nadar") {
   console.log( `A ${nombre} le gusta ${actividad}` )
}

 

Arrow Functions

In ES6 a new syntax is introduced to define functions without using the word function and without using return.

let miAficion = (nombre, actividad) =>  `A ${nombre} le gusta ${actividad}`

 

Destructuring Assignment

Allows you to assign only certain properties of an object to the current scope. In React we will use it a lot to limit the properties or the state within a function.

const sandwich =  {

      bread: "dutch crunch",

      meat: "tuna",

      cheese: "swiss",

      toppings: ["lettuce", "tomato", "mustard"]

}

const {bread, meat} = sandwich

console.log(bread, meat) // dutch crunch tuna

 

Object Literal Enhancement

It is the opposite of Destructing Assignment and allows us to create an object from global scope variables.

var name = "Tallac"

var elevation = 9738

var funHike = {name,elevation}

console.log(funHike) // {name: "Tallac", elevation: 9738}

 

Clases

As of ES6, the concept of class is officially introduced in JavaScript.

 

ES6 modules

ES6 supports the declaration of modules that can be stored in different files.

With the definition of modules we have two options: you can export multiple objects in a single module or one object per module.

When we only want to export an object, we can use export default.

Javascript en React

With this we have reviewed the specific features of ES6 to be able to fully squeeze all the features that React offers us.

Remember that if you need to do a development with React you can contact me to work together on your next project!