Skip to main content

Révisions Javascript

Opérateurs​

Étudions quelques opérateurs utiles avec React.

Boolean operators​

Vous savez pertinemment comment utiliser ces opérateurs dans conditions if. Avec React, on utilise souvent une autre de leur propriétés...

AND operator​

Live Editor
function andOperator(){
  const condition = true
  // const condition = false
  return <p>
    {condition && 'Présent !'}
  </p>
}
Result
Loading...

OR operator​

Live Editor
function orOperator(){
  const condition = 'truthy'
  // const condition = null
  return <p>
    {condition || 'Absent !'}
  </p>
}
Result
Loading...

Ternary operator​

Cet opérateur est aussi parfois très utile avec React pour faire de l'affichage conditionnel...

Live Editor
function ternaryOperator(){
  const condition = false
  // const condition = true
  return <p>
    {condition ? 'Vrai !!' : 'Faux !!' }
  </p>
}
Result
Loading...

Object rest/spread operator​

Cet opérateur dont vous avez du entendre parler peut faire beaucoup de choses... Voici quelques cas simples avec des objets et des listes.

Object spread​

Live Editor
function objectSpread(){
    const obj1 = {
      prop: 1,
      otherProp: 2 
    }
    const obj2 = {
      ...obj1,
      yetAnotherProp: 3,
      prop: 4
    }
    return <pre>{JSON.stringify(obj2, null, 2)}</pre>
}
Result
Loading...

Array spread​

Live Editor
function arraySpread(){
    const arr1 = [1, 2, 3]
    const arr2 = [...arr1, 4]
    return <pre>{JSON.stringify(arr2, null, 2)}</pre>
}
Result
Loading...

Array rest​

Live Editor
function arrayRest(){
    const arr1 = [1, 2, 3]
    const [first, ...rest] = arr1
    return <pre>{JSON.stringify(rest, null, 2)}</pre>
}
Result
Loading...

Object rest​

Live Editor
function objectRest(){
    const obj = {
      prop: 1,
      otherProp: 2 
    }
    const {
      prop,
      ...rest
    } = obj
    return <pre>{JSON.stringify(rest, null, 2)}</pre>
}
Result
Loading...

References​