타입 심화 7 - Nullish Coalescing Operator

이어서 다음 학습도 진행해 보겠다. 이 용어도 처음 들어본다.

---

 

 

 

 

이론 4 - Nullish Coalescing Operator

 

 

falsy하면 B를 아니면 A를 반환하는 값이다.

 

 

 

 

이 둘은 기본값을 설정할 때 사용되지만, 작동 방식에 중요한 차이가 있다.

 

?? (Nullish Coalescing Operator)

• ??는 값이 null 또는 undefined인 경우에만 오른쪽 값을 반환한다.
• 다른 Falsy 값(0, false, NaN, '')은 그대로 반환한다.
• price가 0일 때도 유효한 값으로 간주되므로, 의도대로 동작한다.

---

 

 

 

 

퀴즈 6 - Nullish Coalescing Operator

 

 

 

 

 

 

 

하지만 틀리고 말았다. 이 문제는 다음과 같이 진행된다.

1. 먼저, HelloBot 클래스의 setName 메소드를 호출해서 이름을 설정한다. 그런데 setName 메소드에 값을 주지 않아서 name 프로퍼티에는 기본값인 'elice'가 저장하게 된다.
2. 그다음에hello 메소드를 실행해보면, 현재 저장된 이름을 확인할 수 있다. name 프로퍼티에는 'elice'가 저장되어 있어서 출력되는 문자열은 “hi, elice”가 된다.
3. 이제 initName 메소드를 호출해서 이름을 초기화한다. initName 메소드 안에서 setName 메소드를 호출하고 빈 문자열을 넘겨준다.
4. 다시 hello 메소드를 실행하면, 이번엔 name 프로퍼티에는 빈 문자열('')이 저장되어 있어서 출력되는 문자열은 “hi”가 될 것이다.

---

 

 

문제 코드 분석

HelloBot 클래스의 동작

1. setName(name?: string)
   • 이름을 설정하며, name이 undefined라면 기본값 'elice'를 설정
   • name이 빈 문자열 ''이면 그대로 설정
2. initName()
   • setName('')을 호출하여 이름을 빈 문자열로 초기화
3. hello()
   • this.name이 존재하면 hi, ${this.name}를 출력
   • this.name이 존재하지 않으면 'hi'를 출력

 

실행 흐름 분석

1. helloBot.setName();
   • setName() 호출 시 name 매개변수가 전달되지 않음(undefined)
   • this.name = name ?? 'elice';가 실행되고, name이 undefined이므로 this.name은 'elice'로 설정됨
2. helloBot.hello(); (<1>)
   • this.name은 'elice'이므로 hi, elice가 출력됨
3. helloBot.initName();
   • initName()이 호출되어 setName('') 실행
   • name이 빈 문자열 ''로 전달되므로, this.name은 ''로 설정됨
4. helloBot.hello(); (<2>)
   • this.name이 빈 문자열('')이므로 hi만 출력됨

---

 

 

 

 문제 다시 풀기

 

 

---

 

 

 

 

실습 5 - Nullish Coalescing Operator

 

 

 

---

 

 

 

문제 풀기

0은 falsy한 값이므로 or 연산자를 사용해야 한다. 0이 그대로 반환되려면 falsy를 체크하지 않는 Nullish Coalescing Operator를 체크하면 된다.

 

 

 

 

-1과 0이 잘 출력되었다.

---

 

 

 

학습을 마치고

이 단원은 나름 이해할만했다. -1과 0이 반환되는 두 경우에 대해서 생각하면 된다. 다음 단원은 분량이 무척 많지만 1주 차 수업을 빨리 마치려면 계속 공부를 진행해야겠다.