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

const myfunc = () => {console.log(‘my func’)}

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.

const myFunction = () => ({ value: 'test' })

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.

const a = [1, 2, 3]
// create a new array
const b = [... 4,5,6,7,8]
// create a copy of array a
const c = [..a]
// can also be used in objects
const newObject = { ...oldObject }

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

const a = [5, 8]
f(...a)

Rest element is used while working with array array destructuring:

const numbers = [5, 6, 7, 8, 9]
[first, second, ...others] = numbers

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.

const a_string = `i am template literal`

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.

class Animal{
constructor(name) {
this.name = name
}
welcome() {
return 'Hello, I am ' + this.name + '.'
}
}

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

const dog = new Animal('tommy')
dog.hello()

Inheritance

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

class Engineer extends Person {
welcome() {
return super.hello() + ' I am a engineer.'
}
}
const engineer = new Programmer('Robert')
engineer.hello()

Static Methods

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

class Animal{
static genericHello() {
return 'Hello'
}
}
Animal.genericHello() //Hello

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