JavaScript Prerequisites To React - Part One

Introduction

 

This article will try to cover all the JavaScript prerequisites that we need to learn about ReactJS.

 

It will cover the following topics

• Definition
• Implementation - Difference between let and var
• Implementation - Constants in ECMA
• Implementation - Concatenation of string
• Implementation – Concept of Class
• Implementation - Inheritance
• Implementation - Objects are Mutable
• Implementation - Objects are Immutable
• Implementation - Spread operator and arrow operator

What is JavaScript?

• It’s the programming language for the web.
• It can update and change both, HTML and CSS.
• It can calculate, manipulate, and validate the data.

Implementation– Difference between let and var

 

The major difference between let and var is that “let value does not reflect after the block but var value can”.

 

Examples

 

VAR

var a = 10;
console.log(a);
if (a) {
    var a = 20;
    console.log(a);
}
console.log(a);

Output

1. 10
2. 20
3. 20

LET

let a = 10;
console.log(a);
if (a) {
    let a = 20;
    console.log(a);
}
console.log(a);

Output

1. 10
2. 20
3. 10

Implementation– Constants in ECMA

 

It is something whose value can’t be changed.

 

Examples

const a=10;
a=20; //compile error

Implementation – Concatenation of string

 

Here, we will see how we can combine two strings using old JavaScript and the new ECMA way.

 

Examples

 

OLD WAY

var a="Hi";
var b="Gourav";
console.log (a+" "+b);

Output

1. Hi Gourav

NEW WAY

var a="Hi";
var b="Gourav";
console.log(`${a} ${b}`);

Output

1. Hi Gourav

Implementation– Concept of Class

 

Here, we will see how we can combine two strings using old JavaScript and the new ECMA way.

 

Examples

 

OLD WAY

var a="Hi";
var b="Gourav";
console.log (a+" "+b);

Output

1. Hi Gourav

NEW WAY

var a="Hi";
var b="Gourav";
console.log(`${a} ${b}`);

Output

1. Hi Gourav

Implementation– Inheritance

 

Here, we will see how inheritance works in ECMA script using the concept of classes.

 

Example

class vacation {
    constructor(destination, length) {
        this.destination = destination
        this.length = length
    }
    print() {
        console.log(`${this.destination} - ${this.length}`)
    }
}
class vacation1 extends vacation {
    constructor(destination, length, gear) {
        super(destination, length)
        this.gear = gear
    }
    printgear() {
        super.print();
        console.log(`${this.gear}`);
    }
}
var vac1 = new vacation1('Hi', 7, 'gear');
vac1.printgear();

Output

1. Hi – 7
2. gear

Implementation– Objects are Mutable

 

Here, we will see that JavaScript objects are mutable by default, i.e., if you change the object value, it will change the base object as well.

 

Example

let customerObj = {
    name: 'Gourav',
    age: 29
}

function changeAge(customer, age) {
    customer.age = age
    return customer
}
console.log(changeAge(customerObj, 30).age);
console.log(customerObj.age);

Output

1. 30
2. 30

Implementation– Objects are Immutable

 

Here, we will see that JavaScript objects are mutable by default but there is a way to make the objects ‘Immutable’.

 

Example

let customerObj = {
    name: 'Gourav',
    age: 20
}

function changeAge(customer, age) {
    return Object.assign({}, customer, {
        age: age
    })
}
console.log(changeAge(customerObj, 30).age);
console.log(customerObj.age);

Output

1. 30
2. 20

Implementation– Spread operator and arrow operator

1. Spread operator- you can create a copy of the existing object by spread operator(...)
2. Arrow- Provides another way to write traditional function; consists of a return statement by using an arrow function(=>)

Example

let customerObj = {
    name: 'Gourav',
    age: 20
}
var changeAge = (customer, age) => ({
    ...customer,
    age
})
console.log(changeAge(customerObj, 30).age);
console.log(customerObj.age);

Output

1. 30
2. 20

Summary

 

Stay tuned for the next article which will cover more JavaScript prerequisites for starting ReactJS.

 

Happy learning!