Modern JavaScript For React Developers

Rabin Poudyal
Mar 27 · 3 min read

Difference between var, let and const.

var : It has a function wide scope. The scope of var is not defined by pair of curly braces so it has to be function and things like pair of braces of if statements does not define its scope. Even if we declare variable at the end of the function, we can use it at the beginning of function. This is because JS moves all variables to the top before executing the code. This is known as Hoisting.

let: It is essentially a block scoped version of var. Its scope is limited to the block, statement or expression where it's defined, and all the contained inner blocks. Defining let outside of any function - contrary to var - does not create a global variable. Using modern JS we can completely replace var with let.

const: Defining varibale with let and const can be changed. Using const the variable cannot be reassigned. It does not provide immutability, just makes sure that the reference can’t be changed. const has block scope same as let.

Arrow functions

Arrow functions have implicit return. you dont need to put return statements. Another example, when returning an object, remember to wrap the curly brackets in parentheses to avoid it being considered the wrapping function body brackets.

Behaviour of this inside arrow functions:

The this scope with arrow functions is inherited from the execution context. An arrow function does not bind this at all, so its value will be looked up in the call stack.

Due to this, arrow functions are not suited as object methods.

Arrow functions cannot be used as constructors either, when instantiating an object will raise a TypeError.

Arrow functions or regular functions?

Regular functions should be used when dynamic context is not needed.

Rest and Spread

Spread is used to expand an object, array or string.

It can be used to send array as a function parameter is much simpler way

Rest element is used while working with array array destructuring:

Template Literals

They are much convenient way to work with strings. The syntax is much simpler and they offer lot more features than strings with quotes.

Some important features are:

  • They are easy to interpolate
  • They offer nice syntax for defining multiple strings
  • They allow us to create DSLs

Classes

JavaScript has uncommon way of implementing prototypical inheritance. The ECMAScript committee decided to sprinkle syntactic sugar on top of prototypical inheritance so that it resembles how class-based inheritance works in other popular implementations. This became easier for programmers who come from languages that implement class-based inheritances.

When the object is initialized, constructor is called with the parameter provided. A class can have any number of objects.

Inheritance

A class can extend another class, and objects initialized using that class inherit all the methods of both classes.

Static Methods

Normally methods are defined on instance and not in class. Static methods are executed in class instead.

There are more features we need to learn in modern JavaScript. I will write about them in my next post. If you like this post, don’t forget to clap the post and follow me on medium and on twitter.

Rabin Poudyal

Written by

Aspiring programmer. Say "hi" via email: rabinpoudyal1995@gmail.com or Follow me on twitter @poudyal_rabin

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade