# Javascript => Bases pour React
React à 2 paradigmes. Avant on utilisait les classes maitenant on utilise des fonctions. React tend vers la programmation fonctionnelle

[Hosting]
## Hoisting

foo();
function foo(){
    console.log("hosting soit foo en avant ou apres ca affiche il recheche et le trouve")
}
//foo();`

## fonctions flechées et classiques

const add = (a,b) => {
return a +b
}
console.log(add(2,5))

devient quand on a just eun return

const add = (a,b) => a +b
console.log(add(2,5))

## THIS - Mot clé this
**exemple 1:**
fonction flechée

const myObj = {

foo:()=>{
console.log(this)
}
}
myObj.foo();

this avec une fonction flechée va faire appel au context engloblant donc windows

**Exemple 2:**
devient fonction classique

const myObj = {
foo(){
console.log(this)
}
}
myObj.foo();

le this appel au context appellant qui l'objet donc myObj

Autres exemples

console.log("affichage 1",this);=> window

function teste(){
    console.log("affichage 2",this);
    }
teste(); => window

const father = {
    meth: ()=>{
        console.log("affichage 3",this);
    }
}
father.meth(); => window

const father1 = {
    metha(){
        console.log("affichage 4",this);
    }
}

father1.metha(); => objet appelant

const father2 = {
    metha:function(){
        console.log("affichage 5",this);
    }
}

father2.metha()=>objet appelant

### Spread operator (etendre) # Rest operator

pour copier le 1er niveau d'un tableau , on utilise le **spread operator**

const tab1 = [1, 2, 3];
const tab2 = [...tab1, 4];
console.log(tab2);
// on aura Array(4) [ 1, 2, 3, 4 ]

pour un objet

const myObj1 = {
    a: 1,
    b:2,
    c:3
}

const myObj2 = {
    ...myObj1,
    d: 4,  
}

console.log(myObj2);

Le **rest operator** est utilsé quand on connait pas le nombre d'argument mettre dans une fonction

function add(... args){
let result = 0;
for (const arg of args){
    result +=arg
}
return result
}
console.log(add(2,3,5,8,5))

## Fonctions pures

C'est une fonction qui retourne tout le temps la même chose si on lui passe tous le temps les meme arguments et qui ne va pas toucher à un environnement exterieur tout se passe dans la fonction.

**fonction impure**

let x =2; 

function add1(y){
return x+= y // la fonction est dependante de la variable x
}
console.log(add1(6))
=>8
console.log(add1(6))
=>14
console.log(add1(6))
=>20

resultat different à chaque appel.

**fonction pure**

function add1(a,b){
return a+ b
}
console.log(add1(2,2))
=>4
console.log(add1(2,2))
=>4
console.log(add1(2,2))
=>4

meme resultat à chaque appel et ne depend pas d'un environnement exterieur.

## Fonctions d'ordre superieur

C'est quand une fonction prend en parametre une autre fonction.

> les fonctions d'ordre supérieur qui prennent d'autres fonctions comme arguments ou renvoient des fonctions comme résultats.

**Fonction callback** est une fonction qui se fait appeller par une autre fonction.

exemple on a ce code.

const rawArr = [233, 200, 100, 8099, 1500];
const tab = [];
for (let i = 0; i < rawArr.length; i++) { 
    if (rawArr[i]>500) {
        tab.push(rawArr[i])
    }
}
console.log(tab)
le resultat sera la valeur superieur à 500

devient

const rawArr = [233, 200, 100, 8099, 1500];


function add(arr, fn){
    const tab = [];

    for (let i = 0; i < arr.length; i++) { 
        if (fn(arr[i])) {
            tab.push(arr[i])
          }
    }
    return tab;
} 

const tableau100 = add(rawArr, (item)=>{
    if(item > 100){
        return item;
    }
})

const tableau500 = add(rawArr, (item)=>{
    if(item > 500){
        return item;
    }
})

console.log(tableau100)
console.log(tableau500)

la fonction est devenue plus modulable.
Les fonctions d'ordre superieur avec map, filter, forEach, reduc, sort, every et some
voir :
https://ichi.pro/fr/7-fonctions-javascript-d-ordre-superieur-utiles-que-vous-devez-connaitre-92136447455531

Les fonctions d'ordre supérieur en JavaScript sont très utiles et importantes. Ils nous permettent de réaliser plus de choses avec moins et un code propre. Je recommande vraiment de les pratiquer car ils vous facilitent la vie en tant que développeur JavaScript.

## Destructuring

avec les tableaux ou les objets

const pays = {
    nom: "Senegal",
    pop: 100
}

pas gerable quand y'a trop de données. il faut à chaque fois ettre dans une variable.

const nom = pays.nom
const pop = pays.pop;
console.log(nom, pop);

vaut mieux utiiliser le destructuring

const pays = {
    nom: "Senegal",
    pop: 100
}
const {nom, pop} = pays
console.log(nom, pop)

ou pour un parametre avec la fonction flechée

ça attend un objet et ça vas creer une variable nom . on va l'utiliser avec les props
const pays = {
    nom: "Senegal",
    pop: 100
}
const data = ({nom})=> nom
console.log(data(pays));