깔끔한 코드 작성 팁

Nullish coalescing operator

널 병합 연산자 (??)
왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자

| | boolean 논리 연산자 때문에, 왼쪽 피연산자는 boolean으로 강제로 변환되었고 falsy 한 값(0, -0, '', NaN, null, undefined)은 반환되지 않았다. 이 동작은 만약 0, '' or NaN을 유효한 값으로 생각한 경우 예기치 않는 결과를 초래.

널 병합 연산자는 첫 번째 연산자가 null 또는 undefined로 평가될 때만, 두 번째 피연산자를 반환함으로써 이러한 위험을 피한다

<script>
function check(a){
  return foo = a ?? 'default string';
}

console.log(check('hello')) // 'hello'
console.log(check(undefined)) // 'default string'
console.log(check(null)) // 'default string'
console.log(check(0)) // 0
console.log(check("")) // ''


function check(a){
  return foo = a || 'default string';
}

console.log(check('hello')) // 'hello'
console.log(check(undefined)) // 'default string'
console.log(check(null)) // 'default string'
console.log(check(0)) // 'default string'
console.log(check("")) // 'default string'
</script>

---

default parameter

값이 없거나 undefined가 전달될 경우 이름붙은 매개변수를 기본값으로 초기화

undefined가 아닌 ' '(빈문자열), null, false는 여전히 ' ', null, false 값을 그대로 사용.

function multiply(a, b = 1) {
  return a*b
}
>
multiply(5, 2)          // 10
multiply(5)             // 5
multiply(5, undefined)  // 5

---

optional-chaining

user?.address?.street

let user = {}; // 주소 정보가 없는 사용자
user?.address?.street 
// undefined, 에러가 발생하지 않습니다.

const anna = {
  name: 'jul',
  age: 20,
  job: {
  }
}

BAD

function display(person){
  if(person.job && person.job.title){
    console.log(person.job.title);
  }
}
display(anna);

GOOD

<script>
function display(person){
 if(person.job?.title){
   console.log(person.job.title);
 }
}


function display(person){
  const title = person.ddd?.title ?? 'nope'
  console.log(title); // 'nope'
}
</script>

person.job이 있다면 person.job.title 여부 확인
person.job이 없다면 false를 반환

참고) https://www.youtube.com/watch?v=BUAhpB3FmS4