JavaScript ro react

Tue, Jul 12, 2022 3-minute read

from fundamental JavaScript to React

Callback Functions

Promises

using promises is to prevent callback hell. With Promises, we may write asynchronous code in a synchronous manner.

const myPromise = new Promise((resolve, reject) => {  
<a id="markdown-const-mypromise-%3D-new-promiseresolve%2C-reject-%3D%3E-%7B" name="const-mypromise-%3D-new-promiseresolve%2C-reject-%3D%3E-%7B"></a>
    // condition
});

Map()

encapsulate our data in some HTML

let users = [
  { firstName: "Susan", lastName: "Steward", age: 14, hobby: "Singing" },
  { firstName: "Daniel", lastName: "Longbottom", age: 16, hobby: "Football" },
  { firstName: "Jacob", lastName: "Black", age: 15, hobby: "Singing" }
];

using map and modify it’s output.

let singleUser = users.map((user)=>{
  //let's add the firstname and lastname together
  let fullName = user.firstName + ' ' + user.lastName;
  return `
    <h3 class='name'>${fullName}</h3>
    <p class="age">${user.age}</p>
  `
});

Filter() and Find()

let users = [
  { firstName: "Susan", age: 14 },
  { firstName: "Daniel", age: 16 },
  { firstName: "Bruno", age: 56 },
  { firstName: "Jacob", age: 15 },
  { firstName: "Sam", age: 64 },
  { firstName: "Dave", age: 56 },
<a id="markdown-%7B-firstname%3A-%22dave%22%2C-age%3A-56-%7D%2C" name="%7B-firstname%3A-%22dave%22%2C-age%3A-56-%7D%2C"></a>
  { firstName: "Neils", age: 65 }
];


// for young people
const youngPeople = users.filter((person) => {
  return person.age <= 15;
});

//for senior people
const seniorPeople = users.filter((person) => person.age >= 50);

console.log(seniorPeople);
console.log(youngPeople); 


const Bruno = users.find((person) => person.firstName === "Bruno");

console.log(Bruno);

Destructuring Arrays

let fruits= ["Mango", "Pineapple" , "Orange", "Lemon", "Apple"];

let fruit1 = fruits[0];
let fruit2 = fruits[1];
let fruit3 = fruits[2];

console.log(fruit1, fruit2, fruit3); //"Mango" "Pineapple" "Orange"

Destructuring Arrays

let [fruit1, fruit2 , fruit3] = fruits;


console.log(fruit1, fruit2, fruit3); //"Mango" "Pineapple" "Orange"

skip data

const [fruit1 ,,,, fruit5]= fruits; // print the first and final fruits

const [,fruit2 ,, fruit4,] = fruits; //the second and fourth

Destructuring Objects

const Susan = {
  firstName: "Susan",
  lastName: "Steward",
  age: 14,
  hobbies: {
    hobby1: "singing",
    hobby2: "dancing"
  }
};

const firstName = Susan.firstName;
const age = Susan.age;
const hobby1 = Susan.hobbies.hobby1;

console.log(firstName, age, hobby1); //"Susan" 14 "singing"

Destructuring

const {firstName, age, hobbies:{hobby1}} = Susan;
console.log(firstName, age, hobby1); //"Susan" 14 "singing"

use a function

function individualData({firstName, age, hobbies:{hobby1}}){
  console.log(firstName, age, hobby1); //"Susan" 14 "singing"
}
individualData(Susan);

Rest

let fruits= ["Mango", "Pineapple" , "Orange", "Lemon", "Apple"];
const [firstFruit, secondFruit, ...rest] = fruits
const chosenFruit = rest.find((fruit) => fruit === "Apple");
console.log(`This is an ${chosenFruit}`); //"This is an Apple"

Spread

let pets= ["cat", "dog" , "rabbits"];
let carnivorous = ["lion", "wolf", "leopard", "tiger"];

let animals = [pets, carnivorous];
console.log(animals); //[["cat", "dog" , "rabbits"], ["lion", "wolf", "leopard", "tiger"]]

Spread

let animals = [...pets, ...carnivorous];
console.log(animals); //["cat", "dog" , "rabbits", "lion", "wolf", "leopard", "tiger"]

set

let category = animals.map((animal)=>animal.category);
console.log(category); //["carnivore" , "pet" , "pet" , "carnivore"]

//wrap your iteration in the set method like this
let category = [...new Set(animals.map((animal)=>animal.category))];

console.log(category); ////["carnivore" , "pet"]

Dynamic Object keys