Operators and Object Destructuring in JS before learning React
Tags: react, javascript, beginners, webdev
Published: 2021-09-02 09:53:56

##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 : 
```javascript
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 :
```javascript
// 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:
```javascript
// rest destructuring
const { users, ...rest } = this.state;
```

Find more on _object destructuring_ [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#description).

####Thanks for Reading
I hope it was worth your while. I will be creating series of [JavaScript Fundamentals Required to learn React](https://dev.to/rajshreevats/series/14424). 

You can follow me if you want :) .

[github](https://github.com/RajshreeVats)
[LinkedIn](https://www.linkedin.com/in/rajshree-vatsa-6493371b8/)
[Twitter](https://twitter.com/RajshreeVatsa/)