Index

Reactjs

  1. Arrow Function
  2. Spread
  3. Destructuring
  4. Understanding the Base Features Syntax
  5. Working with Lists and Conditionals
  6. Styling React Components Elements

Spread

Spread and Rest Operators:

...

Spread:

Used to split up array elements OR object properties

const newArray = [...oldArray, 1, 2]

const newObject = { ...oldObject, newProp: 5}



Rest:

Used to merge a list of function arguments into an array

function sortArgs(...args) {
        return args.sort()
}



const numbers = [123];

const newNumbers = [...numbers, 4];

console.log(newNumbers);

// [1,2,3,4]

// Without spread [[1,2,3],4]


For object:

const person = {
    name: ‘Max’
};

const newPerson = {
    ...person,
    age:28
}

console.log(newPerson);



const filter = (...args) => {

    return args.filter( el => el === 1);

}

console.log(filter(123));