Top JavaScript features you should be familiar with when learning and using React

Many beginner web developers make this grave mistake by jumping onto learning React library without getting their hands dirty with JavaScript , here are some JavaScript concepts which will help you to become a better React developer.

Template Literals

In ECMAScript 2015/ES6, a new function called template literals was added. It makes creating multiline strings and performing string interpolation easy. Embedded expressions are possible with template literals. If we want to use an expression within the backticks, we can put it in the ($(expression).

let firstName = 'John',lastName = 'Doe';

let greeting = `Hi ${firstName}, ${lastName}`;
console.log(greeting); // Hi John, Doe

Arrow functions

The arrow function is one of the additional features in the ES6 version of JavaScript. It makes it easy to create functions in a cleaner sense unlike regular functions. The concise syntax of arrow functions, and also the way they handle the this keyword, are among the key features that have contributed to their overwhelming acceptance among developers.

let add = (x,y) => x + y;
console.log(add(10,20)); // 30;

Destructuring

Destructuring assignment allows you to assign array or object properties to variables using syntax that is similar to array or object literals. This syntax can be very concise while still being more clear than conventional property access .The equivalent code becomes more clear and readable after destructuring assignment.

Array Destructuring

const foo = ['one', 'two', 'three'];

const [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

Object Destructuring

const user = {
    id: 42,
    is_verified: true
};

const {id, is_verified} = user;

console.log(id); // 42
console.log(is_verified); // true

Rest syntax

The rest parameter syntax allows a function to accept an indefinite number of arguments in the form of an array, allowing for the representation of variadic (one which accepts a variable number of arguments) functions in JavaScript.

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a)
  console.log("b", b)
  console.log("manyMoreArgs", manyMoreArgs)
}

myFun("one", "two", "three", "four", "five", "six")

// a, "one"
// b, "two"
// manyMoreArgs, ["three", "four", "five", "six"] <-- notice it's an array

Spread syntax

Spread syntax (...) allows an iterable, such as an array expression or string, to be extended where zero or more arguments (for function calls) or elements (for array literals) are required, or an object expression to be expanded where zero or more key-value pairs (for object literals) are anticipated.

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6

Ternaries

The conditional ternary operator gives a variable a value based on a set defined laws. It fills the role of the if condition. The expression whose value defines which value is used is known as the condition. If the condition is valid, the value after the? is returned. If the condition returns false, the value after the : is returned.

var age = 26;
var beverage = (age >= 21) ? "Beer" : "Juice";
console.log(beverage); // "Beer"

Nullish coalescing operator (??)

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

This can be contrasted with the logical OR (||) operator, which returns the right-hand side operand if the left operand is any falsy value, not only null or undefined.

const nullValue = null;
const emptyText = ""; // falsy
const someNumber = 42;

const valA = nullValue ?? "default for A";
const valB = emptyText ?? "default for B";
const valC = someNumber ?? 0;

console.log(valA); // "default for A"
console.log(valB); // "" (as the empty string is not null or undefined)
console.log(valC); // 42