Next-Gen JavaScript concepts to Master before learning React

We all have been through that stage. You've just completed an online course or self-taught from some resources. And now you want to increase your skills by learning popular JavaScript Library, React. I know, getting started with your first JavaScript Framework/Library could be scary and you are mostly confused that you're ready to take the jump or not. I want you to know that Don't give up right now, and doubting yourself is just natural, we all have had doubts that we aren't ready yet and it is something every developer goes through.

In this blog, I will tell you about the core JavaScript concepts, which will smoothen your journey from JS to React. Please read this post till the end, and even if you know these concepts then just skim and revise them.

There’s no miracle people. It just happens they got interested in this thing and they learned all this stuff. They're just people. — Richard Feynman

Let's get going!

What we will be covering:

let and const variables
ES6: Arrow Functions
Exports & Imports
Classes
Spread and Rest Operators
Destructuring Assignment

1. let and const variables

let and const basically replace var. You use let instead of var and const instead of var if you plan on never re-assigning this "variable" (effectively turning it into a constant, therefore).

const: This declaration creates a constant whose scope can be either global or local to the block in which it is declared. Global constants do not become properties of the window object, unlike var variables.
let: The let statement declares a block-scoped local variable, optionally initializing it to a value.

// var can be re-assigned and updated
var name = "Sarthak";
var name = "Elon";
name = "Mark";
console.log(name);
// output => Mark

// let can't be re-assigned but can be updated
let name = "Sarthak";
let name = "Elon";
console.log(name);
// output => Syntax error: the name has been already declared

name = "Mark";
console.log(name);
// output => Mark

2. ES6: Arrow Functions

Arrow functions are a different way of creating functions in JavaScript. Besides a shorter syntax, they offer advantages when it comes to keeping the scope of the this keyword (see here).

Arrow function syntax may look strange but it's simple.

function callMe(name) {
    console.log(name);
}

// which you could also write as:
const callMe = function(name) {
    console.log(name);
}

// becomes ->
const callMe = (name) => {
    console.log(name);
}

Important:

When having no arguments, you have to use empty parentheses in the function declaration:

const callMe = () => { 
    console.log('Max!');
}

When having exactly one argument, you may omit the parentheses:

const callMe = name => { 
    console.log(name);
}

When just returning a value, you can use the following shortcut:

const returnMe = name => name

That's equal to:

const returnMe = name => { 
    return name;
}

3. Exports & Imports

In React projects (and actually in all modern JavaScript projects), you split your code across multiple JavaScript files, so-called modules. You do this, to keep each file/module focused and manageable. It makes the entire code easy to read and manage.

To still access functionality in another file, you need export (to make it available) and import (to get access) statements.

You got two different types of exports: default (unnamed) and named exports:

default => export default ...;

named => export const someData = ...;

You can import default exports like this:

import someNameOfYourChoice from './path/to/file';
// don't write .js extension at end

Surprisingly, someNameOfYourChoice is totally up to you.

Named exports have to be imported by their name:

import { someData } from './path/to/file';

A file can only contain one default and an unlimited amount of named exports. You can also mix the one default with any amount of named exports in the same file.

When importing named exports, you can also import all named exports at once with the following syntax:import * as upToYou from './path/to/file.js';

upToYou is - well - up to you and simply bundles all exported variables/functions in one JavaScript object. For example, if you export const someData = ... (/path/to/file.js ) you can access it on upToYou like this: upToYou.someData .

For more reference and details:

4. Classes

Classes are the heart of Object-Oriented languages. They are nothing but templates for creating objects. They encapsulate data with code to work on that data. Classes in JS are built on prototypes but also have some syntax and semantics that are not shared with ES5 class-alike semantics.

Classes are a feature which replaces constructor functions and prototypes. You can define blueprints for JavaScript objects with them.

Like this:

class Person {
    constructor () {
        this.name = "Max";
    }
}

const person = new Person();
console.log(person.name);
// Output => "Max"

In the above example, not only the class but also a property of that class (=> name ) is defined. The syntax you see there is the "old" syntax for defining properties. In modern JavaScript projects (as the one used in this course), you can use the following, more convenient way of defining class properties:

class Person {
    name = "Max";
}

const person = new Person();
console.log(person.name); // prints "Max"

You can also define methods. Either like this:

class Person {
    name = "Max";
    printMyName() {
        console.log(this.name);
        // 'this' is required to refer to the class
    }
}

const person = new Person();
person.printMyName();

Or like this:

class Person {
    name = "Max";
    printMyName = () => {
        console.log(this.name);
    }
}

const person = new Person();
person.printMyName();

The second approach has the same advantage as all arrow functions have: The this keyword doesn't change its reference.

You can also use inheritance when using classes:

class Human {
    species = 'human';
}

class Person extends Human {
    name = 'Max';
    printMyName = () => {
        console.log(this.name);
    }
}

const person = new Person();
person.printMyName();
console.log(person.species); // prints 'human'

5. Spread & Rest Operator

The spread and rest operators use the same syntax: ...

Yes, that is the operator - just three dots. Its usage determines whether you're using it as the spread or rest operator.

Using the Spread Operator:

The spread operator allows you to pull elements out of an array (=> split the array into a list of its elements) or pull the properties out of an object. Here are two examples:

const oldArray = [1, 2, 3];
const newArray = [...oldArray, 4, 5]; // This now is [1, 2, 3, 4, 5];

// Here's the spread operator used on an object

const oldObject = {
    name: 'Max'
};
const newObject = {
    ...oldObject,
    age: 28
};

// 'newObject' would then be
{
    name: 'Max',
    age: 28
}

The spread operator is extremely useful for cloning arrays and objects. Since both are reference types (and not primitives), copying them safely (i.e. preventing the future mutation of the copied original) can be tricky. With the spread operator, you have an easy way of creating a (shallow!) clone of the object or array.

6. Destructuring Assignment

Destructuring allows you to easily access the values of arrays or objects and assign them to variables.

Here's an example for an array:

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

And here for an object:

const myObj = {
    name: 'Max',
    age: 28
}
const {name} = myObj;
console.log(name); // prints 'Max'
console.log(age); // prints undefined
console.log(myObj); // prints {name: 'Max', age: 28}

Destructuring is very useful when working with function arguments. Consider this example:

const printName = (personObj) => {
    console.log(personObj.name);
}
printName({name: 'Max', age: 28});
// Output => 'Max'

Here, we only want to print the name in the function but we pass a complete person object to the function. Of course, this is no issue but it forces us to call personObj.name inside of our function. We can condense this code with destructuring:

const printName = ( {name} ) => {
    console.log(name);
}
printName( {name: 'Max', age: 28} );
// Output => 'Max'

We get the same result as above but we save some code. By destructuring, we simply pull out the name property and store it in a variable/ argument named name which we then can use in the function body.

Parting Words

Finally, If you have understood all the required JavaScript concepts, it's very good news. You can safely start learning React but, don't rush. I repeat, don't rush. If you are missing some JavaScript concepts, go back, re-learn then and come back. Not knowing some concept will make your React journey miserable.

I have listed the very important concepts you need to get started with your React, but remember this is not everything.

Thanks for reading, I hope you liked this article.

Comments?

I would love to get your likes/comments/thoughts on Twitter post. If you want to comment on…

Twitter: go to this Twitter post