Introduction

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

What is JavaScript?

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. }
    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. }
    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!