JavaScript essentials for React developers
JavaScript is getting stronger day by day.
There are some very powerful features in JavaScript that every React developer should know. Lets get started to discuss these features.
Variable Declaration
How do we declare a variable in JS ?
using var ? Yes, but now we have two more keywords — let and const.
var vs let vs const
All three keywords are used to declare a variable. So what is the difference ? Lets see
var — Used to declare variables but the scope of variables is function block. If declared globally, scope is global.
let — Used to declare variables but variables are block scoped. What is block ? Block can be defined as the area with in start curly brace( { ) and end curly brace ( } ).
const — Used to declare variables but variables can’t be reassigned. Declared variables are i̶m̶m̶u̶t̶a̶b̶l̶e̶ (check edit ahead) . const variables are also block scoped.
Lets see in example
/*Using var to declare variables*/function usingVar(){
for(var i=0;i<2;i++){ // var declaration
console.log('In loop: '+ i);
}
console.log('After loop : '+ i);
}
usingVar();Output:
In loop: 0
In loop: 1
After loop: 2
/*Using let to declare variables*/function usingLet(){
for(let i=0;i<2;i++){ // let declaration
console.log('In loop: '+ i);
}
console.log('After loop : '+ i);
}
usingLet();Output:
In loop: 0
In loop: 1
Uncaught ReferenceError: i is not defined
/* i is not available outside 'for' block because it is declared using let keyword*//*Using const to declare variables*/function usingConst(){
const pie = 3.14; //const declaration
console.log(pie);
pie = 3;
console.log(pie);
}
usingConst();Output:
3.14
Uncaught TypeError: Assignment to constant variable
/* because we are try to re-assign pie which is declared using const */
/*Using all types of keywords to declare variables*/function usingAll() {
const myName = "Gurinder";
var myWebsite = "medium.com";
{ //creating blocks for demo
const myName = "Shergill";
console.log(myName);
let myWebsite = "webegic.com";
{
let myWebsite = "gurindershergill.in";
console.log(myWebsite);
}
console.log(myWebsite);
} console.log(myName);
console.log(myWebsite);
// myName = 'Gurinder Shergill'; //can't do this, myName is already declared in this block. It is read only now
}usingAll();Output:Shergill
gurindershergill.in
webegic.com
medium.com
Gurinder
So, we should use let over var to not pollute other blocks. But it needs to be used with care, because sometimes we need variables outside the blocks, too.We have a habit to declare with var which serves the purposes outside block but let won’t.
const is also very useful to avoid mistakenly re-assigning of constant variables. It will throw an error but won’t re-assign a variable.
Edit : As pointed out by Varun Dhamija Sir, immutable is not the right word to use for const. We can alter the values of reference variables like array and objects, but we can’t point to a new array or object if declared using const.
const numbers = [1,2,3];
numbers.push(4); //is totally fine./* But we can’t point to new array */
numbers = [1,2,3,4]; //ERROR. We can't point to new array address.
Classes
This is a great feature in ES6. Before ES6 there were workarounds to use OOP concepts but there was no class keyword to create classes. Now classes have been introduced in ES6, and it becomes very easy to create the same kind of objects from a class blue print.
Lets see how to create a class and create objects from a class
/*Defining Class*/class ClassName { constructor(propertyValue){
this.property = propertyValue;
} functionName(){ // function body }}/* Creating objects from class */let objName = new ClassName(propertyValue);
Points to note:
- function keyword is not used to declare functions. We don’t need to have the word function for declaring methods.
- We can’t assign properties as we do in methods. We initialize them using a constructor method.
- constructor method is a special method which is called on the creation of objects and used to initialize the class instance.
- this will always point to the current object
Lets have a look at an example
/*Class*/
class Vehicle { constructor(name, model) {
this.name = name;
this.model = model;
}
showModel() {
console.log("Model of " + this.name + " is: " + this.model);
}
}/*Creating Object*/let car = new Vehicle("Audi", "R8");
car.showModel(); //method calling/* Output: */
Model of Audi is: R8
Inheritance
Inheritance is the mechanism of creating a new class(child class) from another class (parent class). Inherited class inherits all the methods of parent class.
Lets see how to inherit a class from another class
/* Parent Class */
class ParentClass
{
constructor(properties){
this.properties = properties;
}
getMothod(){return this.properties};
methods(){}
}
/*Inheriting class*/class ChildClass extends ParentClass
{
constructor(properties, classSpecificProperties)
{
super(properties);
this.classSpecificProperties = classSpecificProperties
}
super.getMethod();
classSpecificeMethods(){}}let childClassObject = new ChildClass(properties, classSpecificProperties);childClassObject.methods();
childClassObject.classSpecificeMethods();
Points to note:
- super() method is mandatory to call if we have declared a custom constructor for Child Class, else not required.
- super is used to call Parent Class methods inside Child Class
- Child class will have access to all parent class methods.
- this will always point to current object
Lets have a look at an example
/*Parent Class*/
class Vehicle { constructor(name, model) {
this.name = name;
this.model = model;
} showModel() {
console.log(this.model);
} getModel() {
return this.model;
}
getName() {
return this.name;
}
}/*Child Class inheriting parent class*/class FourWheelers extends Vehicle {
constructor(name, model, noOfSeats) {
super(name, model);
this.noOfSeats = noOfSeats;
} showNoOfSeats() {
console.log(super.getName() + super.getModel() + "has " + this.noOfSeats + "seats"); }
}/*Creating Child class object*/let myCar = new FourWheelers("Audi", "R8", 5);
myCar.showNoOfSeats(); // Child Class method
myCar.showModel(); // Parent class method
Arrow functions
Arrow functions are a great feature introduced in ES6. We now have a cleaner and easy way to write functions and callback fucntions. One more benefit of arrow functions is that — this always points to current objects in arrow functions.
Lets see how to declare arrow functions
/*If more than one parameters*/
name = (one, two) => {
return one + two;
}/*If only receive one parameter*/
name = parameter => {
return parameter;
}/*If no parameter*/
name = () => {
console.log('Hello World')
}/*If there is only a return statement, we can exclude {} and return*/name = (one,two) => one + two;
Lets have a look at an example
/*Simple function*/function sum(value1,value2 ){
return value1+value2;}/*Arrow function*/let sum =(value1,value2 ) => value1+value2 ;var total = sum(5,6);
console.log(total);
Output:
11
Arrow functions are mostly used as callback functions and these are very efficient to use.
Lets look at an example
var employees = [
{id:1 ,isMale: true},
{id:1 ,isMale: true},
{id:1 ,isMale: fasle},
{id:1 ,isMale: true}
]/*We need to get male employees only*//*Using simple fucntion*/
let maleEmployees = employees.filter(function(emp){return emp.isMale});/*Using arrow function*/
let maleEmployees = employees.filter(emp => emp.isMale);
this in arrow functions
this in arrow functions always inherits this object from the context in which the code is defined. We don’t need to do that = this or self = this or .bind(this) .
/*With simple callback function*/
var self = this;
$('.btn').click(function(event){
self.anyMethod()
})/*With arrow functions as callback function*/
$('.btn').click((event)=>{
this.anyMethod()
})
Array.map()
An array method array.map() will be useful to transform all array elements . This method doesn’t modify the original array. It returns a new array.
let newArray = array.map(function(arrayItem){
// any operation on arrayItem
return modifiedItem;
}) /*Using Arrow function for callback function*/let newArray = array.map(arrayItem => arrayItem * arrayItem); //multiplication for demo purpose, we can do any operation or use arrayItem to do other operations.
Lets have an example
numbers = [1,2,4,5,6,7]/*We need a new array with cubes of all these numbers*/let cubeOfNumbers = numbers.map(number=>number*number*number); //
Template Literals
Template literals allow us to form a string template with ease. It allows us to put the JavaScript variables into a string using placeholders. We use `` back-tick operators to form a string and ${variableName} as a placeholder. Back-tick operator is the key before 1 on keyboard.
Lets have an example
let name='Gurinder';
let age= 25;
let info= "My name is "+ name +" and age is "+ age +" years";/*Using template literals*/let name='Gurinder';
let age= 25;
let info= `My name is ${name} and age is ${age} years`/*This is so easy to use and is more readable when large string templates are created.*/
Multi-line Strings
We can use back-tick operators to form multi-line strings. Just put ` operator before and after the string.
/*Without using `` */
var demoString = 'First line of demo string,\n\t'
+ 'Second line of demo string.\n\t'
+ 'Third line of demo string,\n\t'
+ 'Fourth line of demo string.\n\t'/*Using `` */
var roadPoem = `First line of demo string,
Second line of demo string.
Third line of demo string,
Fourth line of demo string.`
Object Destructuring
Object destructuring is used to get property values from objects easily. Before ES6 we had to write n number of lines if we want to extract n properties. But now with object destructuring we can do it with ease.
Lets have and example
var person = {
name : 'Gurinder',
age : 25,
website: 'gurindershergill.in'
}/*If we need to extract info of person object to variables
Without Object Destructuring*/
var name = person.name;
var age= person.age;
var website = person.website;/*Using Object Destructuring*/
var {name, age, website} = person; // this will create 3 variables and extract information from person object and will assign to variables.var {name:nm, website:web} = person // if we want to use another name for variables other than object keys,we can use ":" to give alias name.
Spread Operator
The spread operator is represented by … three dots. Spread operator is used to extract all array items or object properties. To create objects we use {…} and to create arrays we use […]
Lets have an example
/*Object Cloning using spread operator*/
var person = {
name : 'Gurinder',
age : 25,
website: 'gurindershergill.in'
}var anotherPerson = {...person} //Object clone, as simple as that/*Array Cloning using spread operator*/
var numbers = [1,2,3,4,5,6,7,8]var anotherNumbers = [...numbers] // Array cloned/*Combining Objects*/
/*We can easily combine multiples object and can also add more properties using spread operator*/var person = {
name : 'Gurinder',
age : 25,
website: 'gurindershergill.in'
}var university = {
uniName: 'Thapar University',
location : 'Patiala'
}var fullInfo = {...person,...university, company:'Nagarro'};
//This will create a new object by combining./*Combining Arrays*/
/*We can easily combine multiples arrays and can also add more items using spread operator*/var numbers = [1,2,3];
var moreNumbers = [5,6,7,8];
var allNumbers = [...numbers,4,...moreNumbers];
//This will create a new array by combining.
Modules
Modules means dividing our code in different files for reusability and better maintainability. A module can be referred as a single JavaScript file.
Methods, classes, variables declared in one module are private by default. We can’t use them in other modules directly. Scope of variables declared globally also is limited to a single file or module only.
This is a great benefit of Modules as explained below:
If the global variable is declared with same name in two files, the variable is overwritten by later declaration. But this is not applicable in ES6, because the scope of globally declared variables is limited to single module or file only. Global variables in different modules are treated as different variables.
Now thinking, then how to access variables of one module in another module. eh..?
If we want to use the variables in different modules, we have to explicitly export variables, methods to make them public.
We use the export keyword before class and variables to make them available for other modules. The import keyword is used to import variables or classes from other modules
Export: export const variableName or export class ClassName{}
Import: import {exportedObject} from ‘filePath’
Lets have an example of code in which we create a Classes Inheritance section. In that section we have done all the code in a single file. Now we will split our code into different modules(files).
/*file : vehicle.js*/export class Vehicle { //Class exported for other modulesconstructor(name, model) {
this.name = name;
this.model = model;
}showModel() {
console.log(this.model);
}getModel() {
return this.model;
}
getName() {
return this.name;
}
}/*File: fourWheelers.js*/import {Vehicle} from './vehicle.js'
//Vehicle class imported because we will inherit class from this classexport class FourWheelers extends Vehicle {
constructor(name, model, noOfSeats) {
super(name, model);
this.noOfSeats = noOfSeats;
}showNoOfSeats() {
console.log(super.getName() + super.getModel() + "has " + this.noOfSeats + "seats"); }
}/*program.js*/import {FourWheelers} from './fourWheelers.js'
//FourWheelers class imported because we will create object of this class in this modulelet myCar = new FourWheelers("Audi", "R8", 5);
myCar.showNoOfSeats();
There are lot more features introduced and improved in ES6 like:
- New Math, Object Methodes,
- Default Parameters
- Generators
- Promises
- Map and Set
- And some more…
For the sake of modularity (pun intended), I will cover them in the next article. Stay tuned.
Thank you for reading. If you feel, this article can help someone to understand some important features, feel free to share 😃
Happy JavaScripting
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
