JavaScript Prerequisites To React - Part One

This article will try to cover all the JavaScript prerequisites needed to learn ReactJS.

Introduction

This article will try to cover all the JavaScript prerequisites that we need to learn 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

Definition

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

  1. var a = 10;  
  2. console.log(a);  
  3. if (a) {  
  4.     var a = 20;  
  5.     console.log(a);  
  6. }  
  7. console.log(a);  

Output

  1. 10
  2. 20
  3. 20

LET

  1. let a = 10;  
  2. console.log(a);  
  3. if (a) {  
  4.     let a = 20;  
  5.     console.log(a);  
  6. }  
  7. console.log(a);  

Output

  1. 10
  2. 20
  3. 10

Implementation Constants in ECMA

It is something whose value can’t be changed.

Examples

  1. const a=10;  
  2. 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

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

Output

Hi Gourav

NEW WAY

  1. var a="Hi";  
  2. var b="Gourav";  
  3. 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

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

Output

Hi Gourav

NEW WAY

  1. var a="Hi";  
  2. var b="Gourav";  
  3. 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

  1. class vacation {  
  2.     constructor(destination, length) {  
  3.         this.destination = destination  
  4.         this.length = length  
  5.     }  
  6.     print() {  
  7.         console.log(`${this.destination} - ${this.length}`)  
  8.     }  
  9. }  
  10. class vacation1 extends vacation {  
  11.     constructor(destination, length, gear) {  
  12.         super(destination, length)  
  13.         this.gear = gear  
  14.     }  
  15.     printgear() {  
  16.         super.print();  
  17.         console.log(`${this.gear}`);  
  18.     }  
  19. }  
  20. var vac1 = new vacation1('Hi', 7, 'gear');  
  21. 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

  1. let customerObj = {  
  2.     name: 'Gourav',  
  3.     age: 29  
  4. }  
  5.   
  6. function changeAge(customer, age) {  
  7.     customer.age = age  
  8.     return customer  
  9. }  
  10. console.log(changeAge(customerObj, 30).age);  
  11. 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

  1. let customerObj = {  
  2.     name: 'Gourav',  
  3.     age: 20  
  4. }  
  5.   
  6. function changeAge(customer, age) {  
  7.     return Object.assign({}, customer, {  
  8.         age: age  
  9.     })  
  10. }  
  11. console.log(changeAge(customerObj, 30).age);  
  12. console.log(customerObj.age);  
Output

  1. 30
  2. 20

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

  1. let customerObj = {  
  2.     name: 'Gourav',  
  3.     age: 20  
  4. }  
  5. var changeAge = (customer, age) => ({  
  6.     ...customer,  
  7.     age  
  8. })  
  9. console.log(changeAge(customerObj, 30).age);  
  10. console.log(customerObj.age);  
Output

  1. 30
  2. 20
Stay tuned for the next article which will cover more JavaScript prerequisites for starting ReactJS.
 
Happy learning!