Javascript You Need To Know For React

Before learning React, we should master HTML, CSS, and the following knowledge in Javascript (in addition to the initial knowledge such as variables, loops, conditions,...)

• Arrow Functions
• Ternary Operators
• Destructuring Assignment
• Map, Filter...

Arrow Functions

Arrow function is one of the cool features of ES6. Proper use of arrow functions makes the code shorter and easier to understand.

Arrow function is used quite a lot because it is succinct and does not use "this".

Example with a regular function:

function sum(a, b) {
  return a + b;
}

Rewrite with arrow function:

const sum = (a, b) => a + b;

---

Ternary Operators

Ternary operator can help programmers quickly check a condition in javascript.

Syntax:

expression ? if true : if not true 

Javascript ternary is used to shorten the statement when checking a condition. This is useful for quickly returning a value (it means assigning it to another variable).

Example:

const x = 50;
let result;
if (x < 100) {
  result = "less than 100 ";
} else {
  result = "greater than or equal to 100";
}

After shortening:

const x = 50;
const result = (x < 100) ? "less than 100" :  "greater than or equal to 100";

---

Destructuring Assignment

Destructuring Assignment is a syntax that allows separating objects and arrays into variables, making the code more concise instead of declaring variables many times.

Destructuring Assignment with Array

Example:

let [firstName, lastName] = ["Neji", "Nguyen"];

Destructuring Assignment with Objects

Example:

let { firstName, lastName } = { firstName: "Neji", lastName: "Nguyen" };

A common example in ReactJs

// Not use Destructuring assignment
function MyComponent(props) {
  let navigation = props.navigation;
  let route = props.route;

  ...
}

// Use Destructuring assignment
function MyComponent({navigation, route}) {
  ...
}

---

Map, Filter, Reduce

To make it easier to visualize the map(), filter() and reduce() functions, we will use a sample array as shown below:

const foods = [
    {
        "name": "noodle",
        "type": "wet",
        "price": 20000
    },
    {
        "name": "rice",
        "type": "dry",
        "price": 25000
    },
    {
        "name": "bread",
        "type": "dry",
        "price": 10000
    },
    {
        "name": "soup",
        "type": "wet",
        "price": 5000
    }
]

map() Function

For example, we need an array containing the names of foods. If using for-loop:

let food_names = [];

for (let i = 0; i < foods.length; i++) {
    food_names.push(foods[i].name);
}

If the map() function is used, the code will be shortened as follows:

let food_names = foods.map((food, index, foods) => {
    return food.name
})

---

filter() Function

Continuing with another example, this time we want an array containing only dry foods. If using for-loop:

let dry_foods = [];

for (let i = 0; i < foods.length; i ++) {
    if (foods[i].type === "dry") {
        dry_foods.push(foods[i])
    }
}

Use the filter() function:

let dry_foods = foods.filter((food) => {
    return food.type === "dry"
})

---

reduce() Function

Let's go to the 3rd example: we need to calculate the total price of the food. Let's start with the for-loop:

let total_price = 0;

for (let i = 0; i < foods.length; i++) {
    total_price += foods[i].price
}

Use the reduce() function:

let total_price = foods.reduce((price, food, index, foods) => {
    return price += food.price
}, 0)