1. Introduction

JavaScript is the programming language used to build interactive web applications. React is a JavaScript library, so understanding modern JavaScript is essential for writing clean, maintainable React code.

ES6, also known as ECMAScript 2015, introduced several important JavaScript features, including let, const, arrow functions, template literals, destructuring, spread syntax, and modules.

These features help developers write shorter and more readable code.

For example, a traditional JavaScript function looks like this:

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

Using an arrow function and a template literal, we can write:

const greet = (name) => `Hello, ${name}`;

Both functions produce the same result for the same input. The second version uses modern JavaScript syntax commonly found in React projects.

In this tutorial, you will learn the JavaScript features you need before moving into more advanced React concepts.

2. Learning Objectives

By the end of this tutorial, you will be able to:

• Understand the difference between var, let, and const.

• Write arrow functions.

• Use template literals for dynamic strings.

• Understand default parameters.

• Apply array methods such as map(), filter(), and find().

• Use destructuring with objects and arrays.

• Understand the spread and rest operators.

• Work with JavaScript modules using import and export.

• Use optional chaining and nullish coalescing.

• Apply these concepts in practical React components.

3. Core Concepts and Explanation

3.1 Understanding var, let, and const

JavaScript provides three common keywords for declaring variables: var, let, and const.

Using var

var is function-scoped rather than block-scoped and allows redeclaration within the same scope.

var name = "Rahul";
var name = "Priya";

console.log(name);

Output:

Priya

Although var still exists in JavaScript, modern code generally prefers let and const because their scoping rules are easier to reason about.

Using let

Use let when a variable needs to be reassigned.

let age = 20;

age = 21;

console.log(age);

Output:

21

let is block-scoped, meaning it is available only within the block in which it is declared.

Using const

Use const when the variable binding should not be reassigned.

const course = "React.js";

console.log(course);

Output:

React.js

This is invalid:

const price = 1000;
price = 1500;

JavaScript throws a TypeError because the const binding cannot be reassigned.

A const object can still have its properties changed:

const student = {
  name: "Rahul",
  age: 20
};

student.age = 21;

console.log(student.age);

Output:

21

The object remains the same binding; its contents have changed. In React state, however, you should generally create a new object or array rather than mutate existing state directly.

Best practice: Prefer const by default. Use let when reassignment is necessary. Avoid var in most modern application code.

3.2 Arrow Functions

Arrow functions provide a concise syntax for writing functions.

Traditional function:

function add(a, b) {
  return a + b;
}

Equivalent arrow function:

const add = (a, b) => {
  return a + b;
};

console.log(add(10, 20));

Output:

30

When the function contains only one expression, you can omit the braces and return keyword:

const add = (a, b) => a + b;

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

Output:

12

For a single parameter, parentheses are optional:

const square = number => number * number;

console.log(square(4));

Output:

16

For zero parameters, use empty parentheses:

const getMessage = () => "Welcome to React!";

console.log(getMessage());

Output:

Welcome to React!

Arrow Functions in React

Arrow functions are commonly used for functional components.

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

export default Welcome;

The same component can use an implicit return:

const Welcome = () => <h1>Welcome to React!</h1>;

export default Welcome;

Both examples define a functional component.

Important: Arrow functions do not have their own this binding. They are useful for many callbacks, but they are not identical to traditional functions in every situation.

3.3 Template Literals

Template literals use backticks to create strings and allow expressions to be embedded with ${}.

Traditional concatenation:

const name = "Rahul";
const course = "React.js";

const message = "Hello " + name + ", welcome to " + course + ".";

console.log(message);

Output:

Hello Rahul, welcome to React.js.

Using a template literal:

const name = "Rahul";
const course = "React.js";

const message = `Hello ${name}, welcome to ${course}.`;

console.log(message);

Output:

Hello Rahul, welcome to React.js.

You can also perform calculations inside ${}:

const price = 2000;
const discount = 500;

console.log(`Final price: ₹${price - discount}`);

Output:

Final price: ₹1500

Template literals make dynamic strings easier to read and maintain.

3.4 Default Parameters

Default parameters provide fallback values when a function argument is omitted or explicitly passed as undefined.

function greet(name = "Guest") {
  return `Hello, ${name}!`;
}

console.log(greet("Rahul"));
console.log(greet());

Output:

Hello, Rahul!
Hello, Guest!

Default parameters are also useful in React components.

function Welcome({ name = "Guest" }) {
  return <h1>Welcome, {name}!</h1>;
}

export default Welcome;

If the component is rendered as <Welcome />, it displays Welcome, Guest!.

Note that a default parameter does not replace an explicitly supplied null value.

3.5 Array Methods: map(), filter(), and find()

Arrays are used frequently in React applications to store and display lists of data.

The map() Method

map() transforms each array item and returns a new array.

const numbers = [1, 2, 3, 4];

const doubled = numbers.map(number => number * 2);

console.log(doubled);

Output:

[2, 4, 6, 8]

React example:

const courses = ["HTML", "CSS", "JavaScript", "React"];

function App() {
  return (
    <ul>
      {courses.map(course => (
        <li key={course}>{course}</li>
      ))}
    </ul>
  );
}

export default App;

React uses the key prop to identify list items. When possible, use stable unique IDs from the data.

The filter() Method

filter() returns a new array containing items that satisfy a condition.

const numbers = [10, 15, 20, 25, 30];

const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers);

Output:

[10, 20, 30]

A product filtering example:

const products = [
  { id: 1, name: "Headphones", price: 1500 },
  { id: 2, name: "Keyboard", price: 2500 },
  { id: 3, name: "Mouse", price: 800 }
];

const affordableProducts = products.filter(
  product => product.price < 2000
);

console.log(affordableProducts);

The resulting array contains the headphones and mouse.

The find() Method

find() returns the first matching item, or undefined if no item matches.

const users = [
  { id: 1, name: "Rahul" },
  { id: 2, name: "Priya" },
  { id: 3, name: "Aman" }
];

const user = users.find(user => user.id === 2);

console.log(user);

Output:

{ id: 2, name: "Priya" }

Use map() to transform items, filter() to select multiple matching items, and find() to retrieve the first matching item.

3.6 Object Destructuring

Destructuring extracts values from objects into variables.

Without destructuring:

const student = {
  name: "Rahul",
  age: 22,
  course: "React.js"
};

const name = student.name;
const age = student.age;

console.log(name, age);

Output:

Rahul 22

With destructuring:

const student = {
  name: "Rahul",
  age: 22,
  course: "React.js"
};

const { name, age, course } = student;

console.log(name);
console.log(age);
console.log(course);

Output:

Rahul
22
React.js

You can rename a destructured property:

const { name: studentName } = student;

console.log(studentName);

Output:

Rahul

Destructuring Props in React

function StudentCard({ name, course }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Course: {course}</p>
    </div>
  );
}

export default StudentCard;

This pattern is widely used to access component props cleanly.

3.7 Array Destructuring

Array destructuring extracts elements based on their positions.

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

const [first, second, third] = colors;

console.log(first);
console.log(second);
console.log(third);

Output:

red
blue
green

You can skip elements:

const numbers = [10, 20, 30];

const [first, , third] = numbers;

console.log(first, third);

Output:

10 30

Array destructuring is also used when working with React Hooks:

const [count, setCount] = useState(0);

Here, the first array element is the current state value, and the second is the function used to update it. You will learn useState in detail in Tutorial 8.

3.8 Spread Operator

The spread syntax (...) expands elements of an iterable or properties of an object into another array or object.

Copying an Array

const original = [1, 2, 3];

const copy = [...original];

console.log(copy);

Output:

[1, 2, 3]

Combining Arrays

const frontend = ["HTML", "CSS"];
const programming = ["JavaScript", "React"];

const skills = [...frontend, ...programming];

console.log(skills);

Output:

["HTML", "CSS", "JavaScript", "React"]

Copying and Updating an Object

const student = {
  name: "Rahul",
  age: 20
};

const updatedStudent = {
  ...student,
  age: 21
};

console.log(updatedStudent);

Output:

{ name: "Rahul", age: 21 }

Spread syntax creates a shallow copy. Nested objects may still share references, so more complex data structures require additional care.

In React, spread syntax is commonly used to create updated objects and arrays without directly mutating existing state.

3.9 Rest Parameters

Rest syntax also uses ..., but it collects multiple arguments into an array.

function calculateTotal(...prices) {
  return prices.reduce((total, price) => total + price, 0);
}

console.log(calculateTotal(100, 200, 300));

Output:

600

Here, ...prices collects the supplied arguments into one array.

Spread vs. rest:

• Spread expands values into an array, object, or function call.

• Rest collects multiple values into an array or gathers remaining properties.

The syntax is the same, but its purpose depends on where it is used.

3.10 ES Modules: import and export

JavaScript modules let you organize code across separate files.

Create src/utils.js:

export const courseName = "React.js";

export function add(a, b) {
  return a + b;
}

Import these named exports into src/App.jsx:

import { courseName, add } from "./utils";

function App() {
  return (
    <div>
      <h1>{courseName}</h1>
      <p>Result: {add(10, 20)}</p>
    </div>
  );
}

export default App;

Output:

React.js
Result: 30

You can also use a default export.

In src/utils.js:

export default function greet(name) {
  return `Hello, ${name}!`;
}

Then import it:

import greet from "./utils";

Remember:

• Named exports are imported using matching exported names inside braces.

• A default export can be imported using a chosen local name.

• A module can have multiple named exports but only one default export.

4. Practical Code Examples

Example 1: Student Dashboard

Create or replace src/App.jsx with:

const student = {
  name: "Rahul Sharma",
  course: "React.js",
  completedLessons: 6,
  totalLessons: 30
};

const App = () => {
  const { name, course, completedLessons, totalLessons } = student;

  const progress = Math.round(
    (completedLessons / totalLessons) * 100
  );

  return (
    <main>
      <h1>Student Dashboard</h1>
      <h2>{name}</h2>
      <p>Course: {course}</p>
      <p>
        Progress: {completedLessons} / {totalLessons} lessons
      </p>
      <p>Completion: {progress}%</p>
    </main>
  );
};

export default App;

Expected output:

Student Dashboard
Rahul Sharma
Course: React.js
Progress: 6 / 30 lessons
Completion: 20%

This example combines const, arrow functions, object destructuring, and template-free JSX expressions.

Example 2: Product Filtering

const products = [
  { id: 1, name: "Headphones", price: 1500 },
  { id: 2, name: "Keyboard", price: 2500 },
  { id: 3, name: "Mouse", price: 800 },
  { id: 4, name: "Monitor", price: 9000 }
];

function App() {
  const affordableProducts = products.filter(
    product => product.price < 2000
  );

  return (
    <main>
      <h1>Affordable Products</h1>

      {affordableProducts.map(product => (
        <article key={product.id}>
          <h2>{product.name}</h2>
          <p>Price: ₹{product.price}</p>
        </article>
      ))}
    </main>
  );
}

export default App;

Expected products:

• Headphones — ₹1500

• Mouse — ₹800

This demonstrates how filter() and map() work together in a React interface.

Example 3: Creating an Updated Object

const product = {
  name: "Wireless Mouse",
  price: 999,
  category: "Accessories"
};

const updatedProduct = {
  ...product,
  price: 899
};

console.log(product.price);
console.log(updatedProduct.price);

Output:

999
899

The original object remains unchanged. The new object contains the updated price.

Example 4: Optional Chaining and Nullish Coalescing

Optional chaining (?.) safely accesses a property when an intermediate value may be null or undefined.

const user = {
  name: "Rahul"
};

console.log(user.profile?.city);

Output:

undefined

Without optional chaining, accessing user.profile.city would throw an error because user.profile is undefined.

Nullish coalescing (??) supplies a fallback only when the left-hand value is null or undefined.

const userName = null;
const displayName = userName ?? "Guest";

console.log(displayName);

Output:

Guest

Unlike ||, the ?? operator preserves valid falsy values such as 0 and an empty string.

console.log(0 ?? 100);
console.log(0 || 100);

Output:

0
100

These operators are useful when working with optional properties and API data.

5. Real-World Applications

Modern JavaScript features appear in almost every professional React application.

E-commerce websites

• map() renders product lists.

• filter() applies category and price filters.

• Destructuring extracts product properties.

• Spread syntax creates updated product objects.

Admin dashboards

• Arrow functions handle callbacks.

• Template literals generate readable messages.

• Optional chaining accesses potentially missing API fields.

• Modules organize components and utility functions.

Learning management systems

• Array methods display courses and lessons.

• Destructuring accesses student and course data.

• Default parameters provide fallback labels.

• Spread syntax supports immutable data updates.

API-driven applications

• Modern syntax makes data transformation easier.

• Optional chaining helps handle nested optional fields.

• Modules separate API helpers from UI components.

Understanding these features will make future React tutorials significantly easier.

6. Common Mistakes and Best Practices

Common Mistakes

Mistake 1: Reassigning a const variable

Incorrect:

const age = 20;
age = 21;

Correct:

let age = 20;
age = 21;

Use let when reassignment is required.

Mistake 2: Forgetting the return value in a block-bodied arrow function

Incorrect:

const add = (a, b) => {
  a + b;
};

This function returns undefined.

Correct:

const add = (a, b) => {
  return a + b;
};

Or use an implicit return:

const add = (a, b) => a + b;

Mistake 3: Confusing object destructuring syntax

Incorrect:

const [name] = student;

If student is an object, use object destructuring:

const { name } = student;

Array destructuring uses square brackets, while object destructuring uses curly braces.

Mistake 4: Forgetting the key in a rendered list

Incorrect:

{products.map(product => (
  <p>{product.name}</p>
))}

Correct:

{products.map(product => (
  <p key={product.id}>{product.name}</p>
))}

Mistake 5: Mutating an existing object

Avoid directly changing an existing object when preparing updated React state.

Instead of:

student.age = 21;

Create an updated object:

const updatedStudent = {
  ...student,
  age: 21
};

Mistake 6: Using || when zero is a valid value

const quantity = 0;

console.log(quantity || 1); // 1
console.log(quantity ?? 1); // 0

Choose the operator based on whether all falsy values or only nullish values should trigger the fallback.

Best Practices

• Prefer const unless reassignment is necessary.

• Use arrow functions for concise callbacks and many component definitions.

• Use template literals for dynamic strings.

• Use map() for transformations and rendering lists.

• Use filter() to select matching array items.

• Use find() when you need the first matching item.

• Use destructuring to access object properties and array elements clearly.

• Use spread syntax to create shallow copies and immutable updates.

• Use ?. and ?? when optional data requires safe access or sensible defaults.

• Split larger applications into meaningful modules.

• Choose clear variable names and avoid unnecessarily complex one-line expressions.

• Remember that spread syntax performs only a shallow copy.

7. Practice Exercises

Complete these exercises in a JavaScript file or your Vite React project.

Exercise 1: Variables

Declare a student's name using const and age using let. Update the age and print both values.

Exercise 2: Arrow Functions

Create an arrow function that accepts two numbers and returns their product.

Exercise 3: Template Literals

Create variables for a student's name and course. Display a message such as: Rahul is learning React.js.

Exercise 4: Array Methods

Create an array of ten numbers. Use filter() to select even numbers and map() to multiply each selected number by two.

Exercise 5: Object Destructuring

Create a product object with name, price, and category. Extract these values using destructuring and display them.

Exercise 6: Spread Operator

Create an object containing a product's name and price. Use spread syntax to create a second object with a different price while preserving the original.

Exercise 7: ES Modules

Create a separate utility file exporting a function that calculates a percentage. Import it into App.jsx and display the result.

Challenge Project: Product Catalog

Create a small React product catalog containing at least five products. Use:

• Objects to represent products.

• map() to render the product cards.

• filter() to show products below a selected price threshold.

• Destructuring to access product data.

• Arrow functions for callbacks.

• Stable product IDs as React keys.

8. Key Takeaways and Conclusion

In this tutorial, you learned the essential modern JavaScript features used in React development:

• let and const for variable declarations.

• Arrow functions for concise function syntax.

• Template literals for dynamic strings.

• Default parameters for fallback values.

• map(), filter(), and find() for array operations.

• Object and array destructuring for extracting values.

• Spread syntax for copying and combining data.

• Rest parameters for collecting arguments.

• import and export for modular code.

• Optional chaining and nullish coalescing for safer data access.

Professional tip: Do not just memorize the syntax. Practice these features in small programs until you can recognize and write them naturally. They form the foundation for understanding React props, state, event handling, API data, and component logic.