JS

Destructuring

...spread & ...rest

// Samuel Burbano
const socials = {
  twitter: "@iosamuel",
  facebook: "iosamuel.dev",
  github: "iosamuel",
  web: "iosamuel.dev"
};

const objeto = {
  phrase: "Hola mundo!"
};

const { phrase: spreadThis } = objeto;
const spreaded = [...spreadThis];
console.log(spreaded);
// ["H", "o", "l", "a", " ", "m", "u", "n", "d", "o", "!"]

function restThis(...rested) {
  console.log(...rested);
}
restThis(...spreaded);
// H o l a   m u n d o !

JS

...spread

const iterableObj = [1, 2, 3];
const obj = { phrase: "Hello world!" };

// Llamada de funciones
Math.max(...iterableObj); // (1, 2, 3)

// Objetos iterables, como Array y Stirng
[...iterableObj, '4', 'five', 6]; // [1, 2, 3, '4', 'five', 6]

// ECMAScript 2018: Objetos
let objClone = { ...obj }; // { phrase: "Hello World!" }

JS

...spread

const parts = ['shoulders', 'knees'];
const lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]

const arr = [1, 2, 3];
const arr2 = [...arr]; // como arr.slice()
arr2.push(4); 
// arr2 = [1, 2, 3, 4]
// arr = [1, 2, 3]

const a = [[1], [2], [3]];
const b = [...a];
b.shift().shift(); // 1
// [ [], [ 2 ], [ 3 ] ]
// [ [ 2 ], [ 3 ] ]

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];
// [ 0, 1, 2, 3, 4, 5 ]

let arr3 = [...arr2, ...arr1, ...arr2];
// [ 3, 4, 5, 0, 1, 2, 3, 4, 5, 3, 4, 5 ]

const word1 = "Hello";
const word2 = "world";
const helloWorld = [...word1, " ", ...word2, "!"];
// ["H", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

Iterables

JS

...spread

var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields); // new Date(1970, 0, 1);
d.toDateString();
// "Thu Jan 01 1970"

const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];

Math.max(...arr1, ...arr2);
// 5

Functions

const word = "SPREADMEBABY";
console.log(...word);
// S P R E A D M E B A B Y

const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];
const arr3 = [7, 8, 9]

arr1.push(...arr2, ...arr3);
// [0, 1, 2, 3, 4, 5, 7, 8, 9]

JS

...spread

const obj1 = { foo: 'bar', x: 42 };
const obj2 = { foo: 'baz', y: 13 };

const clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

const mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

const mergedObj2 = { ...obj1, word: "hello", ...obj2, z: 90 };
// Object { foo: "baz", x: 42, word: "hello", y: 13, z: 90 }

Objects

JS

...rest

function sum(...theArgs) {
  // theArgs = [1, 2, 3]
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));
// 6

console.log(sum(1, 2, 3, 4));
// 10

JS

...rest

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

myFun("one", "two");
// a, one
// b, two
// manyMoreArgs, []

JS

...rest

function sortArguments() {
  let sortedArgs = arguments.sort();
  return sortedArgs;  // this will never happen
}


console.log(sortArguments(5, 3, 7, 1));
// throws a TypeError (arguments.sort is not a function)

function sortArguments() {
  let args = Array.from(arguments);
  let sortedArgs = args.sort();
  return sortedArgs;
}
console.log(sortArguments(5, 3, 7, 1));  // 1, 3, 5, 7

JS

...rest

function sortRestArgs(...theArgs) {
  let sortedArgs = theArgs.sort()
  return sortedArgs
}

console.log(sortRestArgs(5, 3, 7, 1)) // 1, 3, 5, 7

function multiply(multiplier, ...theArgs) {
  return theArgs.map(function(element) {
    return multiplier * element;
  })
}

let arr = multiply(2, 1, 2, 3);
console.log(arr);  // [2, 4, 6]

JS

Destructuring

let a, b, rest;
[a, b] = [10, 20];
console.log(a, b); // 10 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a, b, rest); // 10 20 [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a, b); // 10 20

({ b } = { a: 10, b: 20 });
console.log(b); // 20

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a, b, rest); // 10 20 {c: 30, d: 40}

({b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(b, rest); // 20 {a: 10, c: 30, d: 40}

[ ]

{ }

&

JS

Destructuring

const colors = ['red', 'green', 'yellow'];

const [rojo, verde, amarillo] = colors;
console.log(rojo); // "red"
console.log(verde); // "green"
console.log(amarillo); // "blue"

[ ]

const colors = ['red', 'green', 'yellow'];

const [rojo, verde, amarillo, alpha = 1] = colors;
console.log(rojo); // "red"
console.log(verde); // "green"
console.log(amarillo); // "blue"
console.log(alpha); // 1

JS

Destructuring

let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

const arr = [1, 2, 3];
// const temp = arr[2]
// arr[2] = arr[1]
// arr[1] = temp
[arr[2], arr[1]] = [arr[1], arr[2]];
console.log(arr); // [1, 3, 2]

[ ]

let shuffle = function (arr) { // Durstenfeld shuffle
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
};

JS

Destructuring

function f() {
  return [1, 2];
}

let [a, b] = f();

console.log(a); // 1
console.log(b); // 2

[ ]

function f() {
  return [1, 2, 3];
}

const [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

JS

Destructuring

function myFunc([ a, b ]) {
  console.log(a, b);
}

myFunc([2, 3]);
// 2 3

myFunc();
// TypeError: undefined is not iterable

[ ]

function myFunc([ a, b = 4 ] = []) {
  console.log(a, b);
}

myFunc([2, 3]);
// 2 3

myFunc();
// undefined 4

JS

Destructuring

const url = "https://iosamuel.dev/vue/photogallery";

const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
const [, protocol, fullhost, fullpath] = parsedURL;

console.log(protocol); // https:

[ ]

JS

Destructuring

const o = {p: 42, q: true};
const {p, q} = o;

console.log(p); // 42
console.log(q); // true

{ }

const o = {p: 42, q: true};
const {p: foo, q: bar} = o;
 
console.log(foo); // 42 
console.log(bar); // true

const {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5

const {a, b: foo = 10} = {a: 3};

console.log(a); // 3
console.log(foo); // 10

JS

Destructuring

function drawChart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {
  console.log(size, cords, radius);
}

drawChart({
  cords: { x: 18, y: 30 },
  radius: 30
});

{ }

JS

Destructuring

const people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith"
    },
    age: 35
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones"
    },
    age: 25
  }
];

for (let {name: n, family: { father: f } } of people) {
  console.log("Name: " + n + ", Father: " + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

{ }

JS

Destructuring

const people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith"
    },
    age: 35
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones"
    },
    age: 25
  }
];

for (let {name: n, family: { father: f, ...restOfFamily }, ...data } of people) {
  console.log("Name: " + n + ", Father: " + f);
  console.log("The rest of the family is: ", restOfFamily);
  console.log(data);
}

// "Name: Mike Smith, Father: Harry Smith"
// {mother: "Jane Smith", sister: "Samantha Smith"}
// {age: 35}
// "Name: Tom Jones, Father: Richard Jones"
// {mother: "Norah Jones", brother: "Howard Jones"}
// {age: 25}

{ }

JS

Destructuring

function userId({id}) {
  return id;
}

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

var user = { 
  id: 42, 
  displayName: "jdoe",
  fullName: { 
      firstName: "John",
      lastName: "Doe"
  }
};

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"

{ }

JS

Destructuring

{ }

let key = "z";
let { [key]: foo } = { z: "bar" };
// { z: foo } = { z: "bar" }

console.log(foo); // "bar"

JS

Destructuring

{ }

function userNick(user) {
  const field = user.type === "twitter" ? "displayName" : "nick";
  const { [field]: nick } = user;
  return nick;
}

var user = { 
  id: 42, 
  displayName: "jdoe",
  fullName: { 
      firstName: "John",
      lastName: "Doe"
  },
  type: "twitter"
};

var user2 = { 
  id: 12, 
  nick: "baz",
  fullName: { 
      firstName: "Foo",
      lastName: "Bar"
  },
  type: "facebook"
};

console.log(userNick(user)); // jdoe
console.log(userNick(user2)); // baz

JS

Destructuring

...spread & ...rest

// Samuel Burbano
const socials = {
  twitter: "@iosamuel",
  facebook: "iosamuel.dev",
  github: "iosamuel",
  web: "iosamuel.dev"
};

JS

Destructuring

...spread & ...rest

JS

...spread

JS

...spread

Iterables

JS

...spread

Functions

JS

...spread

Objects

JS

...rest

JS

...rest

JS

...rest

JS

...rest

JS

Destructuring

[ ]

{ }

&

JS

Destructuring

[ ]

JS

Destructuring

[ ]

JS

Destructuring

[ ]

JS

Destructuring

[ ]

JS

Destructuring

[ ]

JS

Destructuring

{ }

JS

Destructuring

{ }

JS

Destructuring

{ }

JS

Destructuring

{ }

JS

Destructuring

{ }

JS

Destructuring

{ }

JS

Destructuring

{ }

JS

Destructuring

...spread & ...rest

Destructuring, ...spread & ...rest

More from Samuel Burbano