8 JavaScript Features You MUST Know Before Learning React

React is one of the most popular JavaScript libraries out there for building front-end web applications these days. Almost all front-end developer jobs require having React JS as a must have skill.

Before learning React, you should have a solid understanding of JavaScript first. Which means you must have learnt JavaScript basics and fundamentals. In addition to that, you should also learn about the ES6+ (ECMASCRIPT) features because you will use them a lot in React.

If you have a good understanding of JavaScript and its features, learning any framework out there will be much easier for you.

In this article, you will discover some of the most important JavaScript features that you need to know before learning React JS. So, let’s get right into it.

1. Let and Const

let and const are the new way of declaring variables instead of the old way where we use var.

why you need to start using let and const instead of var?

One advantage is that let and const have a block scope ( o block is defined by { } ) which means that they are not accessible outside of that block scope.

Here is an example:

{

  // INNER BLOCK

  const a = 1;

  let b = 2;

  var c = 3;

}

// OUTSIDE BLOCK

console.log(a); // Error: a is not defined.

console.log(b); // Error: b is not defined.

console.log(c); // 3

a is declared using const (in inner block), when accessing a (from outside block) we get an error, a is undefined.

Also, b is declared using let (in inner block), when accessing b (from outside block) we get an error, b is undefined.

But c is declared using var (in inner block), and we can see that we still can access it from the outside block.

As you can see, variable declared with const and let are not accessible outside their scope (outside the curly braces {…}). That is why we get an error. So, this is very useful because sometimes you can change a variable’s value from outside its scope without noticing it, when you use var.

Another advantage of using let and const is that they are not hoisted, which is the case when using the keyword var.

Now, you may wonder what’s the difference between let and const. well let is for variables and const is for constants. (variable = can be changed, constant = cannot be changed)

Have a look at the example below:

const x = 5;

// Try to change x value

x = 6; // Error.

let y = 1;

// Try to change y value

y = 2; // No error

console.log(x); // 5

console.log(y); // 2

As you can see, you cannot change the value of the variable declared with the keyword const. That’s the big difference between let and const.

SO, from now on, start using let and const instead of var.

2. Arrow Functions

Arrow functions were introduced in ES6 as an easy way to write normal functions. The arrow (=>) syntax is much shorter and easier to write. A lot of developers use it in their React code, that’s why you need to start using it too.

Let’s have a look at how you can write an arrow functions:

// Normal function.

const helloWorld1 = function (){

  console.log("hello");

  console.log("world");

}

// Arrow function.

const helloWorld2 = () => {

  console.log("hello");

  console.log("world");

}

To declare a function, we use the keyword function, and now with arrow functions we don’t need to use it anymore.

Also, when the arrow function takes in one parameter, and has only a return statement, you can write it without the parenthesis, the curly braces, and the return keyword.

Here is an example:

// Normal function.

const greeting = function(name){

  return "Hello " + name;

}

// Arrow function.

const greeting = (name) => {

  return "Hello " + name;

// Or simply

const greeting = name => "Hello " + name;

Arrow functions are everywhere nowadays and you’re going to see them a lot when learning React.