Modern JS Syntax used in React Part -1
Modern JS syntax which were introduced in ES6 are very popular among the React developers. If you are new to React and JS this blog will help you understand these new features of JS. If you get familiar with these features then it will help you understand the React code better. So without any delay let’s get started.
Following are the major few new things in JS which you should know before learning React
- Block Scope
- Arrow Functions
- De-structuring
- Spread operator
- Template String
- Classes
- Async/Await
We will shed some light on each of them with a few examples. Let us divide this into 2 separate blogs. In the first blog let us discuss the block scope and arrow functions. And the rest of the topics we will cover in the second part.
Block Scope
When we declare variables using `var` it has function scope.What it means is that if the variable is declared anywhere inside a function we can access it anywhere in the function.
See in above example code the greeting is accessible even before it is declared. This happens because of JS hoisting. Hoisting brings the variable declared in block at the top of that block so they are variable even before the value is assigned to it. It prints `undefined` but it is still accessible. When we have more lines in code this can be problematic. We might change the value by accident or declare it again.
In the above example the index is still accessible after the loop. And will print 6.
To resolve this ES6 introduced the block scope variables. These have scope over the block they are declared in. So the variables declared with block scope will be available inside that code block only, not outside the code block. The block of code in JS is declared using `{ }`.
We use 2 new keywords to declare block variables
- let
- const
let
The keyword `let` is used to declare block scope variables. The scope of these variables is limited to block only. Also we can not access block scope variables before declaring it.
Above example will give a reference error as we can not access the greeting before it is declared.
The index will not be available after the for block. So we will get `RefrenceError`
const
The keyword `const` is also blocked scope but is will be used to store constants which remain same throughout the program
In the above example the value PI is block scoped hence available in the nested function. The `const` can also be used to declare objects, but it does not mean the object will be immutable. If we use `const` to define an object then the reference to that object will not change.
In the above example we can change properties of the object declared with `const` but we can not assign a new object reference to it.
Arrow Functions
The main reason arrow functions were introduced was to tackle `this` binding. In JS the `this` binding depends on the function call site. But in the arrow function this is bound to the encoding scope where it is defined.
Both of the above statements may sound difficult to understand but let us look at examples of each and it will become clear.
Here the function is called with object reference and it prints the name. But what will happen if we change the way the function is called ?
In the above example we changed how the function is called and it prints undefined. As the function is called without the object reference the `this` is pointing to the global scope now.
You may argue why I will call the function with reference in my code, but we do it very often in JS as we pass callbacks
`concatString` will still print `undefined` as function is called without the object reference. We may not have used the value passed to the callback function here but we just want to show how common callback pattern works.Now we know the oops moment we may face.
Arrow functions will help you avoid that. It will always bind `this` to the moment the function was defined rather than how it is called.
In above example the at the time of declaration of arrow function the `this` is pointing to the global scope. So no matter how and were we call the function it will always print the `global scope`
In my opinion to avoid the `this` binding many people use the arrow functions but the better way is you should know how `this` binding works and then should decide what to use.
Also arrow functions shorthand is used for if we are returning value from a function.
Above will print result as `3`
The let, const and arrow functions are frequently used in React. You will see the arrow functions used in function components and also in event handlers. We will keep learning about rest of the topics in the next blog.