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
  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
    1. Hi Gourav
    NEW WAY
    1. var a="Hi";    
    2. var b="Gourav";    
    3. 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
    1. var a="Hi";    
    2. var b="Gourav";    
    3. console.log (a+" "+b);   
    Output
    1. 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

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

    Summary

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


    Recommended Ebook

    Voice of a Developer: JavaScript From Scratch

    Download Now!
    Similar Articles