JavaScript concepts helpful for learning React

Through this article I would like to familiarise you with JS concepts that are widely used in React. I had been out of touch with JavaScript for almost a year, and then jumped right on the React Bandwagon. That’s why, I did face some issues getting my head around it. So here are some of the concepts you might wish to revise if you are planning to learn React. Feel free to skip the sections you are already familiar with.

• Classes
• Destructuring and Spread Operator
• Arrow functions
• Template strings
• Declaring Variables

Classes :

If you have OOPS background, you might be familiar with this concept. Classes are the user-defined data types used to store similar characteristics and behaviours. Have a look at the example :

class Person {
  constructor(age, name) {
       this.name = name;
      this.age = age;
  }
  showDetails() {
    console.log(“Person Details : Age = “ + this.age + “ and name                                                      is: “ + this.name);
    }
}

Here, we are creating a “Person” class with 2 characteristics, “name” and “age”, and a behaviour “showDetails”.We can now create a “Person” using :

var person = new Person(20,“John”);

We can also inherit classes, meaning extend the functionality of classes using other classes. Say we need to create a “Student” class, a student will always have a name and an age, so we can extend “Parent” class while creating “Student” class. Have a look at the syntax:

class Student extends Person {
   constructor(id,age,name) {
      super(age,name);
       this.id = id;
   }
   showStudentDetails() {
      console.log(“Student has Id: ”+this.id);
      super.showDetails();
   }
}

And then we create a Student as follows :

var student  = new Student(1,20,”John”);

Some terminologies :
constructor : this is a function which is called when object is created. Usually this is the place where you initialise your object properties.
super : this is used to access the parent properties. Using super in “Student” class is actually pointing to “Person” class.

Destructuring and Spread Operator :

These concepts are heavily used in React and with which I struggled the most.
Suppose you have an object like :

var user = {
  name : “Steve”,
  age : 15,
  email : “abc@xyz.com”
}
And you only need limited number of properties from this object. The traditional way to do it was :
let name = user.name;
let age = user.age;

However, now we can do it in better way. Presenting Destructuring.

let { name, age} = user;
This will take out only name and age from user object and assign the corresponding values to “name” and “age” variables.

Say you want to copy an object, without manually copying properties one by one, we can use spread operator.

let copiedUser = …user.

This odd 3 dots “….” is called Spread operator. As name suggest, it is used to spread an object. In React context, it is heavily used to combine object or append to an object.

To combine multiple objects :
let combinedObject = {…user,…category,…cart};
This “combinedObject” will have all the properties present in “user”, “category” and “cart”.
To append to an object(needs to be an array) :
let newArray = […previousArray, newValue];

Thats the magic of Spread Operator.

Arrow Functions:
These are used to quickly write functions and in a cleaner way.
This is not a mandatory thing that needs to be learnt for React, but this will definitely increase your productivity.

function getParameter() {
   return param;
}
getParameter = () => {
   return param; 
}
Both of the above 2 functions have similar functionality.
Also, with arrow functions with parameter:
getParameter = (param) => {
 return param;
}
If there is only a return statement in arrow function, we can skip the curly braces:
getParameter = (param) =>  param;

One of the biggest advantage of Arrow functions over normal functions is the use of “this” keyword in them.
The value of “this” keyword inside a regular function depends on HOW the function was called.The “this” value inside the arrow function depends on WHERE the function was defined.

const obj = {
 name: "john",
 regularFunction :function() {
 console.log("regularFunction : " +this.name);   
 //John will be printed here
},
arrowFn : () => {
     console.log("arrowFn : "+this.name);   
     //name is undefined when called because here "this" represents          context where its defined and that object doesn’t have name property     defined
 }
}
obj.regularFunction();
obj.arrowFn();

Template Strings:

If you see my code above, this how I printed my user details :

console.log(“Person Details : Age = ”+this.age+” and name is: ”+this.name);

We are now provided with a better way of achieving the same result. The same statement can be written as

console.log(`Person Details : Age = ${this.age} and name is: ${this.name}`);

Note here we are using `(backslash) to print. Also, ${ } represents expressions, so whatever we write in ${} that will be evaluated.
For example :

console.log(`2 + 5 is ${2+5}`); ==> 2 + 5 is 7

Declaring Variables :

This concept would be comparatively easy to understand. There are 3 ways to declare variables :
let , var and const.

var :
Variables declared by “var” keyword are scoped to the immediate function body (hence the function scope). Variables declared with var keyword are “hoisted” to the top of the block which means they are accessible in their enclosing scope even before they are declared.

let :
Variables declared with “let” are blocked scope, i.e. can only be accessed in the block where its declared.

const :
Used to mark a variable constant i.e. it cannot be changed later. However, to be correct its the references that are constant that cannot be changed. We still can change the inside properties of a variable.

{
 var a = 5;
 let b = 6; 
 const c = 7; 
 b = 8; 
 // c = 9         --> Not possible because c is constant reference
}
console.log(a);
//console.log(b);   -->  Not able to access "let" outside block
//console.log(c);   -->  Not able to access "const" outside block

Conclusion:

You will use these concepts a lot in React. Like classes in creating components, Destructuring and Spread Operator while playing with the React state and a lot more. Surely, this article will help you get grasp of React quickly.
Happy Coding..