Essential Javascript for React That Every Developer Should Know

Can I Learn React With Basic JavaScript?

You don’t need to be a JavaScript expert to start your ReactJS journey, but just as knowledge of ingredients is a must for any chef hoping to master cooking, the same is true for learning ReactJS. It’s a modern JavaScript UI library, so you need to know some JavaScript.

Functions and Arrow Functions:

In JavaScript, there are two types of functions. You have normal functions and arrow functions.Let’s explore the difference between them.

Arrow functions was introduced in ES6. And it introduced a simple and shorter way to create functions.Here’s how to create a normal function, with arguments, which returns something:

function multiply(num1, num2) {
const result = num1 * num2
return result
}

If want to transform this into an arrow function:

const result = num1 * num2
return result
}

If the return statement is the only statement in the function, you can even have a shorter function expression. For example:

const multiply = (num1, num2) => {
return num1 * num2
}

This function only contains the return statement. With arrow functions, we can have something shorter like this:

const multiply = (num1, num2) => num1 * num2

We skip the curly braces and the return keyword. Shorter; one-liner.

JavaScript Objects:

In JavaScript, an object is an unordered collection of key-value pairs. Each key-value pair is called a property.

The key of a property can be a string. And the value of a property can be any value, e.g., a string, a number, an array, and even a function.

JavaScript provides you with many ways to create an object. The most commonly used one is to use the object literal notation.

The following example creates an empty object using the object literal notation:

let empty = {};

To create an object with properties, you use the key:value within the curly braces. For example, the following creates a new person object:

let person = {
firstName: ‘John’,
lastName: ‘Doe’
};

The person object has two properties firstName and lastName with the corresponding values ‘John’ and ‘Doe’. When an object has multiple properties, you use a comma (,) to separate them like the above example.

JavaScript Arrays and Array Methods:

An array is a special variable, which can hold more than one value.

const cars = [“Volvo”, “BMW”, “Honda”];

You can able to create an array using an array literal.

const array_name = [item1, item2, . . .];

You can also create an array using the JavaScript keyword new

const cars = new Array(“Volvo”, “BMW”, “Honda”);

An array is a data structure that contains list of elements which store multiple values in a single variable. The strength of JavaScript arrays lies in the array methods. Array methods are functions built-in to JavaScript that we can apply to our arrays – Each method has a unique function that performs a change or calculation to our array and saves us from writing common functions from scratch.

Destructuring:

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Essential Javascript for React That Every Developer Should Know