Introduction

So, you've decided to learn React. But as React is written in JavaScript and uses JavaScript, you've to learn some most used JavaScript concepts in React in order to learn and master React. In this post, I'm going to teach you 9 most used JavaScript concepts in React

Disclaimer: This list does not include JavaScipt A-Z but the most used concepts in React

1. HOF: Map, Filter, Reduce

HOF stands for Higher Order Functions and: map, filter, and reduce is what 90% used HOF functions in React that operate on arrays and knowing them is not choice but requirement for React

map
Map HOF is used to return different array with the same length as the original array. New array items are decided by what's returned within map function body.
In React map used to create array of elements


const numbers = [2, 5, 9, 50]
const newNumbers = numbers.map(number => number * 2)
console.log(newNumbers) // [4, 10, 18, 100]

/**
 React: This is the example that creates array of elements and returns them
*/
const ReactComponent = ({array})=>{
 return <ul>{array.map(item => <li key={item.id}>{item.text}</li>)}</ul>
}

filter
Filter HOF is used to filter out any array item that does not pass the test which is set up in function body and return only items that passed the test in the new array. Basically you can filter out any item by setting boolean test

const ages = [9, 15, 29, 5, 44];
const filteredAges = ages.filter(age => age >= 18)
console.log(filteredAges) // [29, 44]

/**
 React: This is the example that filters out students that are less than 18 and returns all students over or equal to 18
*/
const ReactComponent = ({students})=>{
 return (
    <div>
      <h1>Students aged over 18</h1>
      <ul>
         {students.filter(student => student.age >= 18).map(student => <li key={student.id}>{student.name}</li>)} 
      </ul>
    </div>
}

reduce
Reduce HOF is used to reduce array items into single value. It's very useful when we need to sum array items, or reduce items into single value.

const numbers = [5, 20, 10, 5]
const sum = numbers.reduce((total, currEl)=> total + currEl, 0)
console.log(sum) // 40

/**
React: In this example, we sum total total spending
*/
const ReactComponent = ({expenses})=>{
 return (
    <div>
      <h1>Your total spending</h1>
      <p>Total expenses: {expenses.reduce((total, currEl) => total + currEl.spend ,0)}</p>
    </div>

2. Object Destructuring

Object Destructuring as name suggests lets us destructure copy of the object properties and reuse them without including object name. When destructing, you can only destructure by existing object property name, other giving default property name and value. And there's not order of destructuring of object properties which means you can destructure last object property first and first object property last.

const person = {
  name: "Jaxongir",
  age: 27,
  hobbies: ["Reading", "Calisthenics", "Cooking"]
}
const {name, age, hobbies} = person;
console.log(name) // Jaxongir
console.log(age) // 27
console.log(hobbies) // ["Reading", "Calisthenics", "Cooking"]

/** 
We can also rename destructured property and also assign default value. Default value used in case of missing property value or missing property altogether.
*/
const person = {
  hobbies: ["Reading", "Calisthenics", "Cooking"]
}

const {name: firstName = "John", age: hisAge = 18, hobbies} =  person
console.log(firstName) // John
console.log(hisAge) // 18
console.log(hobbies) // ["Reading", "Calisthenics", "Cooking"]

/**
 We can go as deep as needed when destructuring
*/
const testObj = {
 first: "Child 1",
 parent: {
   second:  "Child 2",
   parent: {
    third: "Child 3",
   }
 }
}
const {first, parent: {second, parent: {third}} } = testObj;
console.log(name1) // Child 1
console.log(name2) // Child 2
console.log(name3) // Child 3


/**
React: In this example one component passes props to child component and we destructure those passed props.
*/
const ChildComponent = ({name, age, country})=>{
 return (
    <div>
      <h1>Name: {name}</h1>
      <h1>Age: {age}</h1>
      <h1>Country: {country}</h1>
    </div>
 )
}
const ParentComponent = ()=>{
 return <ChildComponent name="Jaxongir" age="27" country="Uzbekistan"/>
}

3. Array Destructuring

Array destructuring works nearly the same as the object destructuring but as array is ordered data structure, you've to desctructure the array items in order as they appear in array.

const names = ["Jaxongir", "Elisabeth", "Sarah"]
const [jaxongir, elisabeth, sarah] = names;
console.log(jaxongir) // Jaxongir
console.log(elisabeth) // Elisabeth
console.log(sarah) // Sarah

// breaking order of destructuring 
const names = ["Jaxongir", "Elisabeth", "Sarah"]
const [elisabeth, jaxongir, sarah] = names;
console.log(jaxongir) // Elisabeth
console.log(elisabeth) // Jaxongir
console.log(sarah) // Sarah

// desctructuring nested array
const nestedArray = [1,[2,[3,[4,[5]]]]]
const [first, [second, [third, [fourth, [fifth]]]]] = nestedArray
console.log(first) // 1
console.log(second) // 2
console.log(third) // 3
console.log(fourth) // 4
console.log(fifth) // 5

// you can skip certain indexes by typing ,
const numbers = [1,2,3,4,5]
const [first, , , , fifth] = numbers;
console.log(first) // 1
console.log(fifth) // 5

4. Spread Operator

Spread Operator spreads out or copy object properties to another object or array items to another array
NOTE: you might confuse spread with the rest operator. One thing to remember is that spread operator always be used on the right hand side of = operator and the rest operator will be used on the left hand side of = operator.

const arr1 = [1,2,3]
const arr2 = [4,5,6]
const combinedArr = [...arr1, ...arr2]
console.log(combinedArr) // [1,2,3,4,5,6]

5. Rest Operator

Rest Operator is used to copy the rest of the object properties to another object or array items to another array or array items from the passed argument, desctructuring object, desctructuring array

const numbers = [1,2,3,4,5,6]
consst [first, ...restNumbers] = numbers
console.log(first) // 1
console.log(restNumbers) // [2,3,4,5,6]

6. Ternary Operator

Ternary operator is the shortand syntax of if else and most often used when code in if and else body is single statement

let age = 17
age >= 18 ? console.log("You are allowed to drink") : console.log("You are under age")

7. Shorthand Conditional

Shorthand conditional with && is used to check if value on it's left true, always execute value to it's right.
NOTE: Be careful if value to it's left is a number and evaluates of 0 if such it returns 0 instead of displaying nothing

let age = 18;
age >= 18 && console.log("You are allowed to drink")

/**
 when using array don't use array.length coz if array is empty, it returns 0 instead of nothing so compare length instead
*/
const numbers = []
numbers.length && numbers.map(number => number + 50) // 0

/**
React: Example demonstration of ternary operator
*/
const Component = ({students})=>{
 return students.length > 0 ? <StudentList students={students} /> : <h1>Data being fetched...</h1>
}

8. Template Literals

Template Literals allows us to insert JavaScript expression and produce new expression. In the end that expression is converted into string

const printFullInfo = (name, age, country)=>{
 console.log(`His name is ${name} and is ${age} years old. And he is from ${country}`)
}
printFullInfo("Jaxongir", 27, "Uzbekistan")

9. Callback Functions

Callback Functions are just normal function which is passed to as argument to another function and invoked by that function.
In React callback functions are primary uses of invert data flow, child to parent data passing or action.

const mapCustom = (arr, callbackFunc)=>{
 const newArr = [];
 for(let i = 0; i < arr.length; i++){
   newArr.push(callbackFunc(arr[i]))
 }
 return newArr;
}
mapCustom([1,2,4], (number)=> number * 2) // [2,4,8]

/**
React: Example demonstration of passing callback function to child component to retrieve data back
*/
const ChildComponent = ({getId})=>{
  return <button onClick={()=> getId("id placeholder")}>Button</button>
}

const ParentComponent = ()=>{
 const getId = (id)=>{
   alert(id)
 }
 return <ChildComponent getId={getId}/>
}