JavaScript Prerequisites To React

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

LET

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

Output

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

Hi Gourav

NEW WAY

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

Output

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

Hi Gourav

NEW WAY

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

Output

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

Hi – 7
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

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

Implementation– Spread operator and arrow operator

Spread operator- you can create a copy of the existing object by spread operator(...)
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

Summary

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

Happy learning!