Rest/Spread

// Rest operator

function bestPokemons(first, second, ...others) {
    return {
        first, second, others
    }
}

JSON.stringify(bestPokemons('pikachu', 'bulbizarre', 'pokemon1', 'pokemon2')) 
// {"first":"pikachu","second":"bulbizarre","others":["pokemon1","pokemon2"]}


// Spread (array and object)

// Copy an array
const pokemons = ['pikachu', 'bulbizarre']
const pokemonsCopy = [...pokemons]
JSON.stringify(pokemonsCopy)
// ["pikachu","bulbizarre"]

// Copy an object
const pokemon = {name: 'pikachu', attack: 100, defense: 50}
const clonedPokemon = {...pokemon, name: 'cloned pikachu'}
JSON.stringify(clonedPokemon)
// {"name":"cloned pikachu","attack":100,"defense":50}

Syntax

// Merge 2 arrays

// ES5
var pokemons = ['Pikachu', 'Bulbizarre']
var rocketTeam = ['Miaouss', 'Racaillou']


var all = pokemons.concat(rocketTeam)
// or
var all = Array.prototype.concat.apply(pokemons, rocketTeam)


// ES2015
const all = [...pokemons, ...rocketTeam]


// Merge 2 objects

// ES5
var pikachu = {name: 'Pikachu'}
var superStats = {attack: 100, defense: 100}

var superPikachu = Object.assign({}, pikachu, superStats)

// ES2018
const superPikachu = {...pikachu, ...superStats}

ES5 vs ES2015+

Rest/Spread

By Rodolphe BUNG

Rest/Spread

  • 753