const car = {
brand: 'Toyota',
year: 2023,
model: 'GR Supra',
price: 645000,
}
// Do this
const {brand, year, model, price} = car
// Instead of this
const brand = car.brand
const year = car.year
const model = car.model
const price = car.price
- Object Destructuring - Usually when we try to get data from an object, we will use
object.key. If there was a lot of key to retrieve the data, we can get it by usingconst {key, key, key, ...} = object.
const kgArr = [70, 65, 87, 90]
const kgToPound = 2.205
const convertToPound = (arr) => arr.map( (kg) => (kg * kgToPound).toFixed(2) )
convertToPound(kgArr)
>> ['154.35', '143.33', '191.84', '198.45']
- The
.map()method -mapmethod will iterates over the list, transform the list item and lastly return the list.
const alphabet = ['a', 'b', 'c', 'd']
alphabet.join(' ')
>> 'a b c d' // join with space between
alphabet.join(', ')
>> 'a, b, c, d' // join with a comma and space
- The
.join()method -joinmethod will concatenates item in the array into string but we can choose the way to combine the array.
const input = document.getElementById('input')
const addButton = document.getElementById('add-btn')
const list = document.getElementById('list')
// Do this
addButton.addEventListener('click', ()=> {
const div = document.createElement('div')
div.textContent = input.value
list.appendChild(div)
input.value = ''
})
// Instead of this
addButton.addEventListener('click', ()=> {
list.innerHTML +=
`
<div>${input.value}</div>
`
input.value = ''
})
js
- The danger of innerHTML - example above show when user type something in the
inputarea and click on thebuttonthen any value will add into thelist. But imagine a bad guy type something like<a href="https://scam.com">Congratulation you win an iphone!</a>and this code work if we use theinnerHTMLmethod!
const rainfallByWeek = [10.8, 7.1, 15.3, 32.4, 2, 3.4, 22.5]
const totalRainfall = rainfallByWeek.reduce((total, currentData) => total + currentData)
const averageRainfall = (totalRainfall / 7).toFixed(2)
averageRainfall
>> 13.36
- The
.reduce()method -reducemethod return one value only. It work like this: -
rainfallByWeek.reduce((total, currentData) => total + currentData)in this method the total is first value from list = 10.8 and currentData is second value from list = 7.1
Then 10.8 + 7.1 = 17.9, so
total = 17.9
currentData = 15.3Then 17.9 + 15.3 = 33.2, so
total = 33.2
currentData = 32.4As the result I am looking is
=> total + currentDatasoreducemethod will add up all the list number and return the total = 93.5
This is today sharing, tomorrow I will continue on the exercise to use all the thing I learn today.
let life = {
first: 'eat',
second: 'sleep',
third: 'code',
forth: 'repeat',
}
const {first, second, third, forth} = life
console.log(`${first[0].toUpperCase() + first.slice(1)}, ${second[0].toUpperCase() + second.slice(1)}, ${third[0].toUpperCase() + third.slice(1)}, ${forth[0].toUpperCase() + forth.slice(1)}!`)
Andrew Tan
Top comments (0)