Content

• let and const
• Arrow Functions
• Template Literals
• Destructuring
• Spread and Rest Operator
• Array Methods (map, filter, find)
• Import and Export
• Conditional Rendering
• Immutability

let and const

• let allows reassignment of values
• const does not allow reassignment
• React prefers const for variables and functions

let count = 10;
count = 20;

const name = "React";
// name = "JS"; ❌ Error

Arrow Functions

• Arrow functions provide shorter syntax
• They are commonly used in React components and events

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

//Arrow function
const add = (a, b) => a + b;

Template Literals

• Template literals use backticks (`) instead of quotes
• They allow variables and expressions inside strings
• Difference between "" and ` :
  • "" cannot embed variables directly
  • ` ` allows embedding variables using ${ }

const name = "Shree";

//Using double quotes
const msg1 = "Welcome " + name;

//Using template literals
const msg2 = `Welcome ${name}`;

Destructuring

• Destructuring extracts values from objects or arrays
• Used heavily while accessing props and state in React

//Object destructuring
const user = { name: "Rahul", age: 25 };
const { name, age } = user;

//Array destructuring
const colors = ["Red", "Blue"];
const [first, second] = colors;

Spread and Rest Operator

• The spread operator (...) is used to copy or expand values from an array or object.
• It helps create a new copy instead of modifying the original data.
• The rest operator (...) is used in function parameters to collect multiple values into a single array.
• Both operators use the same syntax (...) but their purpose depends on usage.
• Spread operator is very important in React for immutable state updates.

Example : Spread Operator with Object

//Original user object
const user = {
    id: 101,
    name: "Shree",
    age: 30,
    city: "Pune",
    isActive: true
};

//Creating a new object by copying existing values
//and updating only the age
const updatedUser = {
    ...user,
    age: 31
};

console.log(updatedUser);

In the above example, the spread operator copies all properties of the user object. Only the age property is updated, while other values remain unchanged.

Example : Rest Operator with Function

//Rest operator collects all arguments into an array
const sum = (...numbers) => {
    //numbers will be an array
    //Example: [10, 20, 30]
    return numbers.reduce((total, n) => total + n, 0);
};

//Function call
const result = sum(10, 20, 30);
console.log(result);

In this example:

• The function sum() accepts any number of arguments.
• The rest operator converts the arguments into an array called numbers.
• reduce() loops through an array and combines all values into one final result.
• The function adds all values and returns the total sum.

Array Methods (map, filter, find)

• map() – transforms each item and returns a new array
• filter() – returns elements that match a condition
• find() – returns the first matching element
• map() is heavily used in React to render lists

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

//map
const squares = numbers.map(n => n * n);

//filter
const even = numbers.filter(n => n % 2 === 0);

//find
const value = numbers.find(n => n === 3);

Import and Export

• Used to share variables, functions, and components
• React applications are divided into multiple files

//config.js
export const apiUrl = "https://api.example.com";
export const appName = "ReactApp";

//app.js
import { apiUrl, appName } from "./config.js";

console.log(apiUrl);
console.log(appName);

<script type="module" src="app.js" > </script >

Conditional Rendering

• Used to display content based on conditions
• Very common in React UI rendering

const isLoggedIn = true;

//&& operator renders content only if condition is true
isLoggedIn && console.log("User Logged In");

//Ternary operator
const message = isLoggedIn ? "Welcome User" : "Please Login";

Immutability

• Immutability means data should not be changed directly
• React detects changes using new references
• Always create a new copy while updating arrays or objects

const items = [1, 2, 3];

//Wrong (mutates original array)
// items.push(4);

//Correct (creates new array)
const newItems = [...items, 4];