Today my learning on Scrimba JS Mini Project

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 using const {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 - map method 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 - join method 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 input area and click on the button then any value will add into the list. 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 the innerHTML method!

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 - reduce method 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

1. Then 10.8 + 7.1 = 17.9, so
   total = 17.9
   currentData = 15.3

2. Then 17.9 + 15.3 = 33.2, so
   total = 33.2
   currentData = 32.4

3. As the result I am looking is => total + currentData so reduce method 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