ReactJS ES6

React code majorly relies on ES6 features, which form the foundation of modern React syntax. Without knowledge of ES6, understanding React code can feel overwhelming and difficult. Before learning React, it is important to have a strong understanding of ES6.

Previous versions of JavaScript does not include many of these modern features. While JavaScript still worked functionally, developing large-scale applications using older syntax often led to several issues such as:

• Long and repetitive code
• Difficulty managing variables
• Less structured programs
• Harder-to-maintain codebases

What Is ES6?

ES6 (ECMAScript 2015) marked as a major evolution in JavaScript with the introduction of new language features that helps us to write code that is:

• Easier to read
• Easier to write
• Easier to maintain

In this lesson, we will learn the most important ES6 features which are commonly used in React, Lets understand these with practical examples.

1. Variables in ES6

With ES6, JavaScript now have three ways to define variables: var, let, const.

Before understanding their differences, we need to understand what is scope:

• Global Scope: Any variable that is declared outside of any function, belongs to the global scope.
• Function Scope: Any variable that is declared inside a function exists only inside that function.
• Block Scope: A block is any code that is written within the curly braces like { }, such as if, for, or while.

i. Understanding var

var is the traditional / older way of declaring variables in JavaScript.

• Have global scope when declared outside a function
• Have function scope when declared inside a function
• Do not support block scope

if (true) {
  var value = 5;
}

console.log(value); // accessible here

ii. Understanding let

let was introduced in ES6 to provide block-level scoping.

let score = 50;
score = 60;

• Belong to block scope
• Can be updated
• Cannot be re-declared in the same scope

if (true) {
  let result = "Passed";
  console.log(result);
}

iii. Understanding const

The const keyword in ES6 - is a way to declare variables whose reference remains fixed after initialization.

When a const variable is declared, it must be assigned some value at the time of declaration, and that reference cannot be changed later.

const firstName = "John";

• Are block scoped
• Must be assigned a value at declaration
• Cannot be re-declared in the same scope

const user = { name: "John" };
user.name = "Methew";

2. Arrow Functions in ES6

Arrow functions were introduced in ES6 (ECMAScript 2015) to provide a shorter, cleaner, and more modern way to write functions in JavaScript. These became popular because of their unique way of handling the this keyword.

Traditional way

function greet(name) {
  return "Hello " + name;
}

Arrow function in React

const Header = () => {
  return (
    <h1>Welcome to React</h1>
  );
};

3. map() in ES6

The map() method is one of the most important ES6 array methods. It is widely used in JavaScript, React, and modern web development to transform data without changing the original array.

• Iterates over an array
• Applies a function to each element
• Returns a new array
• Does not modify the original array

In simple words: map() creates a new array by transforming each element of an existing array.

React frequently displays lists of data.
The .map() method transforms arrays into JSX elements.

const users = ["Methew", "Sera", "John"];

<ul>
  {users.map((user) => (
    <li key={user}>
      {user}
    </li>
  ))}
</ul>

4. Destructuring in ES6

With destructuring, you can pull values directly from arrays or objects and store them in variables in a clean and concise way.

Destructuring is a syntax that breaks down arrays or objects into individual variables.

Basic Destructuring

const person = {
  firstName: "John",
  lastName: "Methew"
};

const { firstName, lastName } = person;

console.log(firstName); // John

Array Destructuring

const colors = ["red", "green", "blue"];

const [first, second] = colors;

console.log(first);  // red

5. Modules in ES6

Modules allow you to split your JavaScript code into separate files, making applications easier to manage, scale, debug, and reuse. Modern frameworks like React, Angular, and Vue rely heavily on ES6 modules.

• Variables
• Functions
• Classes
• Objects

These can be exported from one file and imported into another file.

export in ES6 Modules

The export keyword is used to make variables, functions, or classes available outside a file.

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

import in ES6 Modules

The import keyword allows you to use code exported from another module.

import { add, subtract } from "./mathUtils.js";

console.log(add(5, 3));

1. Names must match
2. Curly braces { } are required for const, and functions can be imported without curly braces.
3. You can use import * to import everything at once.

import * as math from "./mathUtils.js";

math.add(2, 3);
math.subtract(5, 2);

6. Ternary Operator in ES6

Ternary Operator allows you to write conditional logic in a compact and readable way, especially when you want to assign values or render UI based on a condition. It is heavily used in modern JavaScript and React applications.

The ternary operator is a shorthand version of the if...else statement.

condition ? expressionIfTrue : expressionIfFalse;

• condition → a boolean expression
• ? → separates the condition and true result
• : → separates true and false results

const isLoggedIn = true;

const status = isLoggedIn ? "Welcome Back" : "Please Login";

7. Spread Operator in ES6

Spread Operator allows you to expand, copy, or merge elements from arrays, objects, or function arguments in a clean and readable way.

The spread operator takes an iterable (like an array or string) or an object and expands its values into individual elements.

...value

Spread Operator works differently depending on where it is used.

1. Copying an Array

const numbers = [1, 2, 3];
const copy = [...numbers];

1. Creates a new array
2. Original array remains unchanged

2.Merging Arrays

const first = [1, 2];
const second = [3, 4];

const merged = [...first, ...second];

console.log(merged); // [1, 2, 3, 4]

3. Adding elements while Copying

const nums = [2, 3, 4];

const updated = [1, ...nums, 5];

4. Converting string to Array

const name = "ES6";

const letters = [...name]; // ["E", "S", "6"]

5. Merging Objects using spread operator

const personal = { name: "Gaurav" };
const professional = { role: "Developer" };

const profile = { ...personal, ...professional };

Summary

ES6 forms the foundation of modern React development.
Concepts like scope, arrow functions, destructuring, modules, and array methods make React code easier to understand and maintain.

• React syntax becomes clearer
• Components feel simpler
• Props, state, and hooks make more sense

This ES6 knowledge prepares you perfectly for upcoming topics such as JSX, Virtual DOM, Props, State, and React Router.