JS features to know before entering React or any other framework

React is one of the popular JavaScript libraries for building front-end web applications these days. A lot of front-end developer jobs require having React as a skill instead of jQuery that was more popular before the release of the front-end frameworks.

Before learning React, you should have a solid understanding of JavaScript first. I’m talking about all the JavaScript basics and fundamentals. In addition to that, you should also learn about the ES6+ features because you will use them a lot in React.

If you have a good understanding of JavaScript and its features, learning frameworks will become much easier for you.

In this article, we will discover some of the important JavaScript features that you should to know before learning React.

1. Let and Const

ES6 has introduced let and const for declaring variables as a replacement for var . let and const have a lot of advantages compared to var .
One advantage is that they have a block scope which means that they are not accessible outside of that block scope.

Here is an example:

{
    const a = 5;
    let b = 6;
    var c = 7;
}console.log(a); //Error: a is not defined.
console.log(b); //Error: b is not defined.
console.log(c); // 7

As you can see, variable declared with const and let are not accessible outside that scope between curly braces. That’s why we get an error. So this is very useful because sometimes with the keyword var you can change a variable without noticing it.

Another advantage of let and const is that they are not hoisted to the top of the file like the keyword var . So you don’t have to care about Hoisting anymore if you’re using let and const .

You may also be wondering what’s the difference between let and const. Well, they are almost similar. Just use let for variables that you’re going to change later and const for constant variables which you don’t want to change.

Have a look at the example below:

const x = 5;
x = 6; //Error.let y = 1;
y = 2; console.log(x); // 5
console.log(y); // 2

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

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 should use it on React too.

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

// Normal function.
const greeting = function(){
    console.log("hello");
    console.log("world");
}// Arrow function.
const greeting = () => {
    console.log("hello");
    console.log("world");
}

As you can see, you don’t need to use the function keyword in the arrow functions.

Also if your arrow function is only one line and has only one parameter, you can write the arrow syntax without the parentheses, without curly braces, and without the return keyword.

Here is an example:

// Normal function.
const greeting = function(name){
    return "Hello " + name;
}
// Arrow function.
const greeting = name => "Hello " + name;

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

3. Destructuring

Destructuring is one of the important ES6 features that you need to know. It’s used a lot on React code. That’s why you should learn about it.

It allows you to copy parts of objects or arrays and put them into named variables.

Have a look at the example below where we didn’t use destructuring:

const user = { name: 'Mehdi', age: 19};//Without destructuring.
const name = user.name; //name = 'Mehdi'
const age = user.age; //age = 19
console.log(name); //Mehdi
console.log(age); //19

Here is the same example using destructuring:

const user = { name: 'Mehdi', age: 19};//destructuring
const { name , age } = user; //name = 'Mehdi', age = 19
console.log(name); //Mehdi
console.log(age); //19

As you can see in the examples above, the second example looks more concise and easier to write. In the destructuring example, the variables name and age gets created and assigned the values from the user object. That’s the power of object destructuring.

In addition to that, you can also use destructuring for arrays. Just instead of object keys, the variables get assigned depending on the element index in the array.

Here is an example:

//array destructuring
const [a, b, c] = [1, 2, 3, 4];
console.log(a); //1
console.log(b); //2
console.log(c); //3

As you can see, the variable a , b , and c gets assigned values that have the same index in the numbers array. That’s called array destructuring, you gonna use it a lot when working with hooks in React.

4. Higher-Order Functions

A higher-order function is any function that takes another function as its argument. In JavaScript, there are a lot of useful higher-order functions that you can use. map, filter, and reduce are the ones that you will use a lot in React. So you need to understand them well.

The map method allows you to iterate through each array element and return a new array with the mapped elements.

Here is an example:

let numbers = [6, 7 , 8, 3, 2];
numbers.map(number => number * 2); //[12, 14, 16, 6, 4]

The filter method allows you to iterate through each array element and filter the elements you want in a new array.

Here is an example:

let numbers = [6, 7 , 8, 3, 2];
numbers.filter(number => number < 5); //[3, 2]

The reduce method is also used with arrays and it reduces array elements into a single value.

Here is an example to return the total number of a numbers array using the reduce method:

let numbers = [6, 7 , 8, 3, 2];
numbers.reduce((accumulator, num) => accumulator + num);
//returns 26

5. The spread operator

The spread operator …is also one of the features that I use a lot in React. It allows spreading the value of an iterable object in JavaScript.

You can use it to copy objects and arrays. Also to combine the copied objects and arrays.

Let’s have a look at a simple example of using the spread operator in JavaScript:

//copy and combine two objects 
let obj1 = {name: "Mehdi", age: 19};
let obj2 = {eyeColor: "Black", hairColor: "Black"};
//using the spread operator.
let combination = {...obj1, ...obj2};console.log(combination);
//output: {name: "Mehdi", age: 19, eyeColor: "Black", hairColor: "Black"}

Here is another example for arrays:

//copy and combine two arrays
let arr1 = [1, 2, 3];
let arr2 = [5, 6, 7, 8];
let combination = [...arr1, ...arr2];
console.log(combination);
//output: [1, 2, 3, 5, 6, 7, 8]

As you can see in the examples above, the spread operator allows us to easily copy and combine arrays and objects. So it’s very useful and you should learn it.

6. The ternary operator

The ternary operator ? : is an easy way to write conditional statements in JavaScript.

I noticed that most of the time I use the ternary operator to conditionally render things in React. That’s why I think you should learn about it too in JavaScript before using it in React.

Have a look at the example below:

let isOnline = true;
// if else statement.
if(isOnline){
    console.log("He is Online.");
}else{
    console.log("He is Offline.");
}
//He is Online
//Same example using the ternary operator
[condition] ? [if] : [else]
isOnline ? console.log("He is Online.") : console.log("He is Offline."); //He is Online

As you can see, the ternary operator allows us to easily write the conditional statement in just one line of code. It’s very useful for small conditions and I prefer using it to conditionally render things in React.

Conclusion

All these JavaScript features that I have listed above are very important if you want to learn React or any other JavaScript framework. If you understand these, learning frameworks will become like a piece of cake. In addition to that, I would also recommend learning things like Async/Await and the fetch API before moving to React.

Thank you for reading this article. I hope you found it useful.