자바스크립트 프로처럼 쓰는 팁

자바스크립트 프로처럼 쓰는 팁

 

페이지 아래쪽에 참고 댓글도 추가했습니다.

 

https://youtu.be/BUAhpB3FmS4

 

동영상 댓글에 참고할 좋은 글이 있어서 남깁니다.

 

작성자. 이현승

9:37 이렇게 하면 item에 detail 값이 들어가고 shirt0 === item이므로 item 객체가 오염되는 것을 원치 않으려면 Object.assign({}, item, detail)으로 써야합니다!

11:40 concat은 지금까지 기존 배열에 다른 배열의 값을 추가하는 것으로 알고 있었는데 알고보니 새 배열을 반환한 것이었군요

12:52 person.job?.title에서 job이 없을때 정확히는 undefined 입니다. 따라서 nullish polishing이 가능한 것이죠.

13:25 backtick키는 물결표와 같은 키를 쓰죠

16:43 하지만 배열 API들도 내부적으로는 각 원소들에 하나씩 연산하기 위해 루프가 사용되는데요, 이 예시도 루프를 3번 돌기 때문에 썩 좋은 코드는 아닙니다. 루프는 최소화시켜서 한번만 돌리는 것이 좋으므로, 꼭 재활용이 필요하지 않다면 배열 API도 하나만 쓰는 것이 좋습니다. 본 예제같은 경우에는 items.reduce((sum, num) => (num % 2)? sum : sum + num * 4, 0)으로 합칠 수 있습니다. 각 원소별로 2의 나머지가 있는지 확인하고 2의 나머지(1)가 있는 홀수는 더하지 않고 기존 합을 그대로 다음 원소로 넘기고 나머지(0)가 없는 짝수는 합에서 원소에 4를 곱한 값을 더하고 넘깁니다. 2번째 인자의 0은 초기값으로 첫 원소에서는 합의 값을 0으로 받습니다. 초기값을 설정하지 않으면 첫 원소가 합으로 넘어가서 두번째 원소부터 반복을 돕니다. 마지막 원소까지 연산이 끝나면 마지막에 넘긴 값이 반환됩니다.

17:34 async/await을 사용하기 어려울 때 Promise를 깔끔하게 쓰고 싶다면 새로운 promise를 이전 promise의 then 콜백 함수(then의 인자로 들어가는 함수; Promise 작업이 완료되면 실행됨)에서 리턴해주고 이전 promise에서 then을 이어서 해당 콜백에서 새 promise 작업이 완료될 때 실행할 작업을 작성해 주면 됩니다. 이런 식으로요:

function displayUser() {

  let user; fetchUser().then(usr => {

    user = usr;

    return fetchProfile(usr); })

  .then(profile => updateUI(user, profile))

// profile 안에 user값이 포함되어 있다면 let으로 변수를 별도로 등록하는 대신 그것을 씁시다 } async/await가 나오기 이전에는 then 콜백 안에 콜백을 넣지 않고 이렇게 콜백 밖에 then을 이어주는 것이 Promise의 정석이었습니다. 사실 Promise가 나오기 이전에는 then 메소드로 따로 빼지 않고 비동기 함수에서 콜백함수를 바로 인자로 받았는데요, 당시에는 연속되는 비동기 작업의 콜백함수도 그 콜백함수 안에 넣어서 함수가 깊어져 (시각적으로는 들여쓰기가 무한히 들어가) 가독성이 떨어지는 콜백 지옥에서 벗어나기 위해 연속된 콜백을 따로 빼는 Promise가 나온 것이지요. 따라서 저렇게 then then then 들어가는 것은 금물입니다.

 

<이상>