Lewati ke isi

📘 Hari 11

Destructuring dan Spread

Destructuring itu cara keren buat "bongkar" array dan objek, lalu langsung masukin nilainya ke variabel-variabel terpisah. Bayangin kayak unboxing barang belanjaan — kamu buka kotaknya, langsung deh isinya keluar rapi ke tempat masing-masing!

Destructuring Array

  const numbers = [1, 2, 3]
  let [numOne, numTwo, numThree] = numbers

  console.log(numOne, numTwo, numThree)

  1 2 3

  const names = ['Asabeneh', 'Brook', 'David', 'John']
  let [firstPerson, secondPerson, thirdPerson, fourthPerson] = names

  console.log(firstPerson, secondPerson,thirdPerson, fourthPerson)

Asabeneh Brook David John

  const scientificConstants = [2.72, 3.14, 9.81, 37, 100]
  let [e, pi, gravity, bodyTemp, boilingTemp] = scientificConstants

  console.log(e,pi,gravity, bodyTemp, boilingTemp)

2.72 3.14 9.81 37 100

const fullStack = [
  ['HTML', 'CSS', 'JS', 'React'],
  ['Node', 'Express', 'MongoDB']
]
const [frontEnd, backEnd] = fullStack

console.log(frontEnd)
console.log(backEnd)

["HTML", "CSS", "JS", "React"]
["Node", "Express", "MongoDB"]

Nah, kadang kamu cuma butuh sebagian nilainya aja. Kalau mau skip, tinggal kasih koma kosong aja. Gampang kan?

  const numbers = [1, 2, 3]
  let [numOne, , numThree] = numbers //2 is omitted

  console.log(numOne, numThree)

1 3

  const names = ['Asabeneh', 'Brook', 'David', 'John']
  let [, secondPerson, , fourthPerson] = names // first and third person is omitted

  console.log(secondPerson, fourthPerson)

Brook John

Kita juga bisa kasih nilai default lho, siapa tau arraynya ada yang undefined:

const names = [undefined, 'Brook', 'David']
let [
  firstPerson = 'Asabeneh',
  secondPerson,
  thirdPerson,
  fourthPerson = 'John'
] = names

console.log(firstPerson, secondPerson, thirdPerson, fourthPerson)  

Asabeneh Brook David John

Nggak harus semua elemen kamu tampung ke variabel kok. Ambil beberapa elemen pertama aja, sisanya bisa dikumpulin jadi array baru pake spread operator (...).

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let [num1, num2, num3, ...rest] = nums

console.log(num1, num2, num3)
console.log(rest)

1 2 3
[4, 5, 6, 7, 8, 9, 10]

Destructuring saat iterasi

const countries = [['Finland', 'Helsinki'], ['Sweden', 'Stockholm'], ['Norway', 'Oslo']]

for (const [country, city] of countries) {
console.log(country, city)
}

Finland Helsinki
Sweden Stockholm
Norway Oslo

const fullStack = [
  ['HTML', 'CSS', 'JS', 'React'],
  ['Node', 'Express', 'MongoDB']
]

for(const [first, second, third] of fullStack) {
console.log(first, second, third)
}

HTML CSS JS
Node Express MongoDB

Destructuring Objek

Pas destructure objek, aturan mainnya gampang: nama variabel yang kamu bikin harus sama persis sama nama key di objeknya. Cek nih contohnya:

const rectangle = {
  width: 20,
  height: 10,
  area: 200
}
let { width, height, area, perimeter } = rectangle

console.log(width, height, area, perimeter)

20 10 200 undefined

Mengganti nama saat destructuring

Mau ganti nama variabelnya? Bisa banget, tinggal pake : aja:

const rectangle = {
  width: 20,
  height: 10,
  area: 200
}
let { width: w, height: h, area: a, perimeter: p } = rectangle

console.log(w, h, a, p)

20 10 200 undefined

Kalau key-nya nggak ada di objek, variabelnya bakal jadi undefined. Nah buat jaga-jaga, kamu bisa kasih nilai default pas deklarasi. Kayak gini nih:

const rectangle = {
  width: 20,
  height: 10,
  area: 200
}
let { width, height, area, perimeter = 60 } = rectangle

console.log(width, height, area, perimeter) //20 10 200 60
//Let us modify the object:width to 30 and perimeter to 80

const rectangle = {
  width: 30,
  height: 10,
  area: 200,
  perimeter: 80
}
let { width, height, area, perimeter = 60 } = rectangle
console.log(width, height, area, perimeter) //30 10 200 80

Destructuring key sebagai parameter fungsi? Cakep banget itu! Yuk kita bikin fungsi yang nerima objek rectangle dan ngembaliin kelilingnya.

Parameter objek tanpa destructuring

// Without destructuring
const rect = {
  width: 20,
  height: 10
}
const calculatePerimeter = rectangle => {
  return 2 * (rectangle.width + rectangle.height)
}

console.log(calculatePerimeter(rect)) // 60
//with destructuring

//Another Example
const person = {
  firstName: 'Asabeneh',
  lastName: 'Yetayeh',
  age: 250,
  country: 'Finland',
  job: 'Instructor and Developer',
  skills: [
    'HTML',
    'CSS',
    'JavaScript',
    'React',
    'Redux',
    'Node',
    'MongoDB',
    'Python',
    'D3.js'
  ],
  languages: ['Amharic', 'English', 'Suomi(Finnish)']
}
// Let us create a function which give information about the person object without destructuring

const getPersonInfo = obj => {
  const skills = obj.skills
  const formattedSkills = skills.slice(0, -1).join(', ')
  const languages = obj.languages
  const formattedLanguages = languages.slice(0, -1).join(', ')

  personInfo = `${obj.firstName} ${obj.lastName} lives in ${obj.country}. He is  ${
    obj.age
  } years old. He is an ${obj.job}. He teaches ${formattedSkills} and ${
    skills[skills.length - 1]
  }. He speaks ${formattedLanguages} and a little bit of ${languages[2]}.`

  return personInfo
}

console.log(getPersonInfo(person))

Parameter objek dengan destructuring

const calculatePerimeter = ({ width, height }) => {
  return 2 * (width + height)
}

console.log(calculatePerimeter(rect)) // 60

// Let us create a function which give information about the person object with destructuring
const getPersonInfo = ({
  firstName,
  lastName,
  age,
  country,
  job,
  skills,
  languages
}) => {
  const formattedSkills = skills.slice(0, -1).join(', ')
  const formattedLanguages = languages.slice(0, -1).join(', ')

  personInfo = `${firstName} ${lastName} lives in ${country}. He is ${age} years old. He is an ${job}. He teaches ${formattedSkills} and ${
    skills[skills.length - 1]
  }. He speaks ${formattedLanguages} and a little bit of ${languages[2]}.`

  return personInfo
}
console.log(getPersonInfo(person))
/*
Asabeneh Yetayeh lives in Finland. He is  250 years old. He is an Instructor and Developer. He teaches HTML, CSS, JavaScript, React, Redux, Node, MongoDB, Python and D3.js. He speaks Amharic, English and a little bit of Suomi(Finnish)
*/

Destructuring objek saat iterasi

const todoList = [
{
  task:'Prepare JS Test',
  time:'4/1/2020 8:30',
  completed:true
},
{
  task:'Give JS Test',
  time:'4/1/2020 10:00',
  completed:false
},
{
  task:'Assess Test Result',
  time:'4/1/2020 1:00',
  completed:false
}
]

for (const {task, time, completed} of todoList){
  console.log(task, time, completed)
}

Prepare JS Test 4/1/2020 8:30 true
Give JS Test 4/1/2020 10:00 false
Assess Test Result 4/1/2020 1:00 false

Spread atau Rest Operator

Pas destructure array, kita pake spread operator (...) buat nangkep sisa elemen yang belum ditampung. Selain itu, spread operator juga bisa dipake buat "nyebar" elemen array ke array lain. Mantap kan?

Spread operator untuk mendapatkan sisa elemen array

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let [num1, num2, num3, ...rest] = nums
​
console.log(num1, num2, num3)
console.log(rest)

1 2 3
[4, 5, 6, 7, 8, 9, 10]

const countries = [
  'Germany',
  'France',
  'Belgium',
  'Finland',
  'Sweden',
  'Norway',
  'Denmark',
  'Iceland'
]

let [gem, fra, , ...nordicCountries] = countries

console.log(gem)
console.log(fra)
console.log(nordicCountries)

Germany
France
["Finland", "Sweden", "Norway", "Denmark", "Iceland"]

Spread operator untuk menyalin array

const evens = [0, 2, 4, 6, 8, 10]
const evenNumbers = [...evens]

const odds = [1, 3, 5, 7, 9]
const oddNumbers = [...odds]

const wholeNumbers = [...evens, ...odds]

console.log(evenNumbers)
console.log(oddNumbers)
console.log(wholeNumbers)

[0, 2, 4, 6, 8, 10]
[1, 3, 5, 7, 9]
[0, 2, 4, 6, 8, 10, 1, 3, 5, 7, 9]

const frontEnd = ['HTML', 'CSS', 'JS', 'React']
const backEnd = ['Node', 'Express', 'MongoDB']
const fullStack = [...frontEnd, ...backEnd]

console.log(fullStack)

["HTML", "CSS", "JS", "React", "Node", "Express", "MongoDB"]

Spread operator untuk menyalin objek

Copy objek juga bisa pake spread operator, gampang banget!

const user = {
  name:'Asabeneh',
  title:'Programmer',
  country:'Finland',
  city:'Helsinki'
}

const copiedUser = {...user}
console.log(copiedUser)

{name: "Asabeneh", title: "Programmer", country: "Finland", city: "Helsinki"}

Mau modifikasi objek sekalian pas nyalin? Bisa juga!

const user = {
  name:'Asabeneh',
  title:'Programmer',
  country:'Finland',
  city:'Helsinki'
}

const copiedUser = {...user, title:'instructor'}
console.log(copiedUser)

{name: "Asabeneh", title: "instructor", country: "Finland", city: "Helsinki"}

Spread operator dengan arrow function

Setiap kali kamu mau bikin arrow function yang bisa nerima jumlah argumen nggak terbatas, pake aja spread operator. Kalau kita pake spread operator sebagai parameter, semua argumen yang dikirim pas manggil fungsi bakal otomatis jadi array.

const sumAllNums = (...args) => {
  console.log(args)
}

sumAllNums(1, 2, 3, 4, 5)

[1, 2, 3, 4, 5]

const sumAllNums = (...args) => {
  let sum = 0
  for (const num of args){
    sum += num
  }
  return sum

}

console.log(sumAllNums(1, 2, 3, 4, 5))

15

🌕 Buset, kamu udah sejauh ini! Level JavaScript kamu sekarang udah menengah atas, keren banget! Gaskeun terus, jangan berhenti di sini! Kamu baru aja ngerampungin tantangan hari ke-11 dan sekarang udah 11 langkah lebih dekat menuju level dewa JavaScript. Yuk sekarang latihan biar makin jago!

Latihan

Latihan: Level 1

const constants = [2.72, 3.14, 9.81, 37, 100]
const countries = ['Finland', 'Estonia', 'Sweden', 'Denmark', 'Norway']
const rectangle = {
  width: 20,
  height: 10,
  area: 200,
  perimeter: 60
}
const users = [
{
  name:'Brook',
  scores:75,
  skills:['HTM', 'CSS', 'JS'],
  age:16
},
{
  name:'Alex',
  scores:80,
  skills:['HTM', 'CSS', 'JS'],
  age:18
},
{
  name:'David',
  scores:75,
  skills:['HTM', 'CSS'],
  age:22
},
{
  name:'John',
  scores:85,
  skills:['HTML'],
  age:25
},
{
  name:'Sara',
  scores:95,
  skills:['HTM', 'CSS', 'JS'],
  age: 26
},
{
  name:'Martha',
  scores:80,
  skills:['HTM', 'CSS', 'JS'],
  age:18
},
{
  name:'Thomas',
  scores:90,
  skills:['HTM', 'CSS', 'JS'],
  age:20
}
]
  1. Destructure dan tetapkan elemen array constants ke e, pi, gravity, humanBodyTemp, waterBoilingTemp.
  2. Destructure dan tetapkan elemen array countries ke fin, est, sw, den, nor
  3. Destructure objek rectangle berdasarkan properti atau kuncinya.

Latihan: Level 2

  1. Iterasi array users dan dapatkan semua kunci objek menggunakan destructuring
  2. Temukan orang yang memiliki kurang dari dua skill

Latihan: Level 3

  1. Destructure objek countries, cetak name, capital, population dan languages semua negara
  2. Seorang junior developer nyusun nama, skill, dan skor siswa dalam array of array yang mungkin agak susah dibaca. Yuk destructure array berikut: nama ke name, array skills ke skills, array scores ke scores, skor JavaScript ke jsScore dan skor React ke reactScore dalam satu baris aja!
  const student = ['David', ['HTM', 'CSS', 'JS', 'React'], [98, 85, 90, 95]]
  console.log(name, skills, jsScore, reactScore)

David (4) ["HTM", "CSS", "JS", "React"] 90 95
  1. Tulis fungsi bernama convertArrayToObject yang bisa ngonversi array jadi objek terstruktur.
    const students = [
        ['David', ['HTM', 'CSS', 'JS', 'React'], [98, 85, 90, 95]],
        ['John', ['HTM', 'CSS', 'JS', 'React'], [85, 80, 85, 80]]
      ]

    console.log(convertArrayToObject(students))
    [
      {
        name: 'David',
        skills: ['HTM','CSS','JS','React'],
        scores: [98,85,90,95]
      },
      {
        name: 'John',
        skills: ['HTM','CSS','JS','React'],
        scores: [85, 80,85,80]
      }
    ]

  1. Salin objek student ke newStudent tanpa mengubah objek aslinya. Di objek baru tambahin yang berikut nih:

  2. Tambahkan Bootstrap dengan level 8 ke set skill front end

  3. Tambahkan Express dengan level 9 ke set skill back end
  4. Tambahkan SQL dengan level 8 ke set skill database
  5. Tambahkan SQL tanpa level ke set skill data science
    const student = {
      name: 'David',
      age: 25,
      skills: {
        frontEnd: [
          { skill: 'HTML', level: 10 },
          { skill: 'CSS', level: 8 },
          { skill: 'JS', level: 8 },
          { skill: 'React', level: 9 }
        ],
        backEnd: [
          { skill: 'Node',level: 7 },
          { skill: 'GraphQL', level: 8 },
        ],
        dataBase:[
          { skill: 'MongoDB', level: 7.5 },
        ],
        dataScience:['Python', 'R', 'D3.js']
      }
    }
  ```

 Output objek yang disalin seharusnya terlihat seperti ini:

```js
    {
    name: 'David',
    age: 25,
    skills: {
      frontEnd: [
        {skill: 'HTML',level: 10},
        {skill: 'CSS',level: 8},
        {skill: 'JS',level: 8},
        {skill: 'React',level: 9},
        {skill: 'BootStrap',level: 8}
      ],
      backEnd: [
        {skill: 'Node',level: 7},
        {skill: 'GraphQL',level: 8},
        {skill: 'Express',level: 9}
      ],
      dataBase: [
        { skill: 'MongoDB',level: 7.5},
        { skill: 'SQL',level: 8}
      ],
      dataScience: ['Python','R','D3.js','SQL']
    }
  }

🎉 SELAMAT! 🎉