자바스크립트 트릭

쿼리 선택기

getElementsByClassName 또는 getElementById 와 같은 메소드를 사용하여 DOM API를 통해 요소를 가져올 수 있지만 둘 다 querySelector 로 대체할 수 있습니다.
querySelector는 CSS 선택기처럼 작동하며 마침표.를 사용하여 클래스를 선택하고 파운드#를 사용하여 ID를 선택합니다. 예를 들어:

const classElement = document.querySelector('.myClass')
const idElement = document.querySelector('#myID')

querySelector 또한 getElementById 또는 getElementsByClassName 에서 사용할 수 없는 하위 요소를 대상으로 지정할 수 있습니다. space 구문을 사용하여 직계 자식을 가져오거나 caret > 구문을 사용하여 모든 자식을 가져옵니다.
querySelectorAll 모든 일치 항목을 가져오고 노드 배열을 반환합니다.

// sub elements
const subElement = document.querySelector('.myClass > li')
// return multiple elements
const allDivs = document.querySelectorAll('div')

배열 메서드

일부 배열 방법은 과대 평가되고 일부는 과소 평가됩니다.

줄이다

reduce는 특히 새로운 개발자들에 의해 과소 평가되었습니다. 전체 기능을 이해하는 데 시간이 걸립니다. reduce 콜백 함수에서 누산기와 값을 제공하지만 누산기가 숫자일 필요는 없습니다! -- 객체, 배열, 문자열,

const nums = [1, 2, 3]
const sum = nums.reduce((a, v) => a + v, 0) // Best practice: accumulator value defaults to first element of the object/array, so be sure to specify a default of zero to avoid typeof() errors.
const sum = nums.reduce((a, v) => [a + v], []) // object, [ '123' ]
const sum = nums.reduce((a, v) => a.concat(v), []) // array, [1, 2, 3]
const sum = nums.reduce((a, v) => a + v, '') // string, '123'

reduce 배열을 해시맵이나 객체로 매우 쉽게 변환하고, 문자열을 만들고, 원래 배열의 변형을 만들 수 있습니다.

const veggies = [
    {name: 'potato', price: 1}
    {name: 'onion', price: 2}
    {name: 'cucumber', price: 1}
]
const veggiePrices = veggies.reduce(
    (a,v) => {
        a[v.name] = v.price
        return a
    },
    {}
)
console.log(veggiePrices) // { potato: 1, onion: 2, cucumber: 1 }
// Creates {name: price} object

reduce는 올바른 콜백 함수를 작성하면 map, sort, filter의 작업을 수행할 만큼 강력합니다.

구조화 트릭

Destructuring은 (거의) Javascript에 고유하며 개체에서 하나 이상의 속성을 가져올 수 있으며 Angular 또는 React와 같은 프레임워크에서 많이 사용됩니다.

const veggie = { name: 'potato', price: 1 }
const { price } = veggie
console.log(price) // 1

분해는 라이브러리를 가져올 때마다 사용됩니다.

import { debounce } from 'lodash'

Destructuring은 또한 함수에 대한 매개변수로 사용될 수 있습니다:

const veggie = { name: 'potato', price: 1 }
function printPrice({ price }) {
  console.log(price)
}
printPrice(veggie) // 1

Destructuring은 중첩되어 여러 레이어를 객체로 깊숙이 들어갈 수도 있습니다.

const veggiePrices = {
  potatoes: {
    red: 1,
    gold: 2,
  },
}

const veggiePrices = { potatoes: { red } }
console.log(red) // 1

Destructuring은 배열 메서드를 작성한 직후에도 사용할 수 있습니다. 예를 들어, 배열을 정렬한 다음 첫 번째 항목을 꺼내려면 구조 분해를 사용하여 쉽게 할 수 있습니다.

const nums = [3, 1, 2]
const [first] = nums.sort()
console.log(first)

약속 팁

Promise는 화면에 표시되는 코드와 관련하여 백그라운드에서 실행되기 때문에 비동기식입니다.

const res = fetch('https://google.com')
const res2 = fetch('https://facebook.com')
const res3 = fetch('https://instagram.com')

Promise는 다른 객체처럼 취급되어 데이터 구조에 저장할 수 있습니다.

const URLs = ['https://google.com', 'https://facebook.com', 'https://instagram.com']

map 함수를 사용하여 약속 배열을 만들 수 있습니다.

// OK Practice:
const requests = URLs.map((url) => fetch(url))

그러나 약속이 동시에 실행되기를 원하는가 아니면 차례로 실행되기를 원하는가?

동시에 실행하려면 Promise.all() 함수를 사용하십시오. 이것은 모든 약속이 해결된 후에 배열이 해결되도록 모든 약속을 함께 묶습니다. 결과는 결과의 배열이며 그 중 일부는 실패일 수 있으므로 오류도 처리합니다.

const responses = Promise.all(requests)

약속이 차례로 실행되도록 하려면 조심해야 합니다!
async await 를 사용할 수 있지만 awaits 는 async 함수 안에 있어야 합니다.

// Better Practice - Make it an async IIFE!
(async () => {
  const requests = URLs.map((url) => fetch(url))
  const responses = Promise.all(requests)
})()

또한 배열 메서드 내에서 await를 실행할 수 없습니다! 따라서 map() 또는 await 내부에 map() 를 사용하여 forEach() 를 시도하면 작동하지 않습니다.

이 문제를 해결하려면 await 함수 안에 map를 쓸 수 있습니다. async map 함수로 만들기만 하면 됩니다.

// !!! Won't work !!!
(async () => {
  const requests = URLs.map(url => await fetch(url))
})()

// !!! Works !!!
(async () => {
  const requests = async URLs.map(url => await fetch(url))
})()

이 작업을 수행하려면 for(){} 또는 forOf(){} 루프를 사용할 수 있습니다.

(async () => {
  const responses = []
  for (let url of URLs) {
    const res = await fetch(url)
    responses.push(res)
  }
})()

오류 처리

try{} catch(){} 블록을 사용하면 오류 처리가 매우 쉬워집니다.

try {
  // code that might throw Error
} catch (err) {
  // what do if Error is thrown
}

약속에서 .catch() 오류를 처리할 수도 있습니다. 예를 들어 .then() 체인을 사용할 때 .catch()를 추가하여 도중에 발생할 수 있는 오류를 처리할 수 있습니다.

fetch('https://google.com')
  .then((res) => {
    res
      .json()
      .then((json) => {
        console.log('got json', json)
      })
      .catch((err) => console.error('json failed'))
  })
  .catch((err) => console.error('request failed'))

위의 예에서 async await를 사용하는 경우 await 블록에 try catch를 던지거나 .catch() 구문 끝에 await를 추가할 수 있습니다. 이것은 전통적인 promise 구문을 await 와 결합하기 때문에 위의 예보다 훨씬 깨끗합니다.

If you have the same error handler for both await, you can just wrap both await in a try block, and handle both errors in the corresponding catch block.

(async () => {
  const res = await fetch('').catch((err) => console.error(err))
  const json = await res.json().catch((err) => console.log(err))
  console.log('got json', json)
})()