Operators and Object Destructuring in JS before learning React

what is React and JSX?

REACT is an open-source JavaScript library to create user interfaces. It's popular among web developers for creating web applications. But React can be used to create cross platform applications through React Native.

JSX stands for JavaScript Syntax Extension. React uses a special syntax known as JavaScript XML (JSX). The HTML/XML is converted into JavaScript before the code is compiled. By using JSX, you can rely on JavaScript syntax for logic.

Why learning JavaScript before React?

Beforehand knowledge of JavaScript concepts helps you learn React smoothly without roadblocks. After learning React, I come to the conclusion that React is all about JavaScript. It boils down to JavaScript ES6 features and syntax, ternary operators, shorthand versions in the language. Also the JavaScript built-in functions (map, reduce, filter) or general concepts such as composability, reusability or higher-order functions.

If you know some JavaScript fundamentals well, it will make React learning smooth, and you can focus more on utilizing the functionalities of React itself.

---

Variables & Operators

Variables

var,const and let are the keywords used to declare variables. Let’s see how each of these differ from one another and when to use what?
Scope of var is Function in which the variable is declared. Scope of let and const is Block in which the variable is declared. ( Block scopes are code inside loops, iteration)

var isn't used widely because let and const is more specific, The variables assigned using const are read-only which means that once they are initialized using const, they cannot be reassigned. let is used when you want to re-assign the variable in future such as in a for loop for incrementing the iterator, const is normally used for keeping JavaScript variables unchanged.

Operators

JavaScript operators are categorized into two categories i.e., Unary(takes only one operand) and Binary(takes two operands) operators.

1. Binary Operators : following are the different types of binary operators:
   • Arithmetic Operators (+, -, *, /+,−,∗,/)
   • Assignment Operators (=, +=, -=, *=)
   • Logical Operators ($&&, ||, ! $)
   • Comparison Operators (<, >, ==, !=<,>,==,!=)
   • Comma Operator (,): The Comma operator evaluates each operand from left to right and returns the value of right most operand.
   • Bitwise Operators (&, |, ^) and Conditional Operators (? :?:)
2. Unary Operators : It takes only one operand and perform a specific operation. Following are some of the unary operators:
   • Increment Operators : ++, --
   • typeof: Returns the type of the given operand
   • delete : Deletes an object, object’s attribute or an instance in an array
   • void: Specifies that an expression does not return anything

There is one special operator which takes three operands and perform as a conditional statement.

Ternary/Conditional Operator
A ternary operator takes three operands and returns a value based on some condition. It’s an alternative for if statement. This could be used for multiple purposes and is used in REACT too!
syntax :

condition ? expression_1 : expression_2;

If the condition is true, expression_1 is returned, otherwise it will return expression_2.

---

Object Destructuring

For web developers, It’s often the case to access plenty of properties from state or props in the component. Object destructuring makes it easy to create variables from an object's properties Rather than assigning them to a variable one by one.

JavaScript Object Destructuring is the syntax that makes it possible to extract values from arrays, or properties from objects, and assigning them to a variable.

example of destructuring :

// no destructuring
const post = this.state.post;
const article = this.state.article;

// destructuring
const { post, article } = this.state;

The destructuring also works for JavaScript arrays. Another great feature is the rest destructuring. It is often used for splitting out a part of an object, but keeping the remaining properties in another object.
Example:

// rest destructuring
const { users, ...rest } = this.state;

Find more on object destructuring here.

Thanks for Reading

I hope it was worth your while. I will be creating series of JavaScript Fundamentals Required to learn React.

You can follow me if you want :) .

github
LinkedIn
Twitter

Comments

[rakesh0180]

React is not a framework, it's a library.

[M. Akbar Nugroho]

+1 add explanation about CRA :)

[Imia Hazel]

Nice Article

[Rajshree Vatsa]

thanks!!

[Prakhar Yadav]

thanks for the heads up!

[Rajshree Vatsa]

Thanks for dropping by.