React JS

Arrow Function

without arrow function

function greet() {
    return "Hello";
}

with arrow function

const greet = () => {
    return "Hello";
}

const greet = () => "Hello";

with parameters

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

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

Why React uses Arrow Functions?

const Home = () => {
    return <h1>Home Page</h1>;
}

Destructuring
Taking values out of an object or array easily

Object Destructuring

const student = {
    name: "Alice",
    age: 22,
    city: "Chennai"
};

without destructuring

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

with destructuring

const { name, age } = student;

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

Array Destructuring

const colors = ["Red","Blue","Green"];

without destructuring

const first = colors[0];
const second = colors[1];

with destructuring

const [first, second] = colors;