Today my learning on Scrimba JS Mini Project
Tags: webdev, javascript, beginners, programming
Published: 2024-01-02 10:55:46

```js
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`.


```js
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.


```js
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.

```js
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!

```js
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:
1. `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

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

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

4. 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.

```js
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