Essential ES6 Operators for React Development

Javascript ES6 also called Ecmascript 6 is a great feature which brings new evolution to the Javascript developers to write less code and do more. If you are looking to expand your programming skills and build apps with React and its framework, it is mandatory to have a thorough knowledge in this area.

In this article, I will give you a good understanding about the following most commonly used features.

1. Let vs Var vs Const
2. Objects
3. The this Keyword
4. Array.map method
5. Arrow Functions
6. Spread Operator
7. Classes
8. Inheritance
9. Let vs Var vs Const

ES6 introduced two new keywords to define variables which are let and const. The previous keyword used to define variables was ‘var’ and it has function scope while ‘let’ and ‘const’ has block scope. The difference between ‘let’ and ‘const’ is that, ‘let’ allows reassigning variables while ‘const’ does not. Once assigned a value to a ‘const’ variable, it cannot be reassigned.

// Var
var placeToVisit = "Galle";
if (true) {
  var name = "Ella";
  console.log(placeToVisit); // Output: Ella
}
console.log(placeToVisit); // Output: Ella


// Let
let age = 25;
if (true) {
  let age = 30;
  console.log(age); // Output: 30
}
console.log(age); // Output: 25


// Const
const PI = 3.14;
PI = 3.14159; // Uncaught TypeError: Assignment to constant variable.

2. Objects

Objects are key/value pairs which can be modified throughout the lifecycle of an object. Objects allow you to define custom data types.

const country = "Sri Lanka";
const numberOfElephants = 900;
const elephantIndex = { country, numberOfElephants };
console.log(elephantIndex); // Output: {country: 'Sri Lanka', numberOfElephants: 900}

3. The ‘this’ keyword

ES6 introduced lexical scoping for this within arrow functions. Unlike regular functions, arrow functions do not bind their own context but inherit it from the surrounding scope.

const person = {
    name: "Gayan",
    sayGreetings() {
      console.log(`Hello, my name is ${this.name}`);
    },
  };
  const sayGreetings = person.sayGreetings.bind(person);
  sayGreetings(); // Output: Hello, my name is Gayan

4. Array.map method

ES6 introduced the map() method on arrays, which allows for easy iteration and transformation of array elements. It takes a callback function as an argument and returns a new array with the results of applying the callback to each element. I will discuss the callback function in a separate article.

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

5. Arrow Functions

This new feature allows programmers to write clean and short code in a very understandable manner. Here, you do not need to write functions and return keywords and can also avoid the curly braces ({}) also.

The following example shows both the regular function and arrow function.

// Regular function
function square(x) {
    return x * x;
  }
 
// Arrow function
const square = (x) => x * x;
 
console.log(square(5)); // Output: 25

6. Spread Operator

The spread operator (…) allows for the expansion of elements from an iterable (like an array or string) into individual elements. It is useful for tasks like copying arrays, concatenating arrays, and creating new objects based on existing ones.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];


// Concatenating arrays
const concatArray = [...arr1, ...arr2];
console.log(concatArray); // Output: [1, 2, 3, 4, 5, 6]

Additionally, we can directly copy the elements of an array to another array using this spread operator.

// Copying arrays
const copyOfArr1 = [...arr1];
console.log(copyOfArr1); // Output: [1, 2, 3]

7. Classes

ES6 introduced class syntax, providing a more familiar and structured way to define objects and implement inheritance in JavaScript.

class Person {
    constructor(name) {
      this.name = name;
    }
 
    sayHello() {
      console.log(`Hello, my name is ${this.name}`);
    }
  }
 
  const person1 = new Person("Gayan");
  person1.sayHello(); // Output: Hello, my name is Gayan

8. Inheritance

Classes in ES6 also introduced the ‘extends’ keyword, allowing for easy inheritance between classes. Subclasses can inherit properties and methods from their parent class, reducing code duplication and promoting code reuse.

class Animal {
    constructor(name) {
      this.name = name;
    }
 
    speak() {
      console.log(`${this.name} makes a sound.`);
    }
  }
 
  class Cat extends Animal {
    constructor(name, breed) {
      super(name);
      this.breed = breed;
    }
 
    speak() {
      console.log(`${this.name} meow.`);
    }
  }
 
  const max = new Cat("Kitty", "Persian");
  max.speak(); // Output: Kitty meow.

These are some of the commonly used ES6 operators which are essential to learn to react. Please stay touch with me for more articles like this.