[딥 다이브] 타입 변환과 단축 평가

🐰 타입 변환 🐰

자바스크립트의 모든 값은 타입이 있다.

개발자가 의도적으로 값의 타입을 변환 -> 명시적 타입 변환 (타입 캐스팅)

let x = 10;

// 명시적 타입 변환
// 숫자를 문자열로 타입 캐스팅한다.
let str = x.toString(); //toString메서드 사용해서 문자로 타입 변환
console.log(typeof str, str); // string 10

// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

 

명시적 타입 변환 : 타입을 변경하겠다는 개발자의 의지가 코드에 명백히 드러남.

 

 

 

개발자 의도와 상관없이 자바스크립트 엔진에 의해 타입 변환 -> 암묵적 타입변환 (타입 강제 변환)

let x = 10;

// 암묵적 타입 변환
// 문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성한다.
let str = x + '';
console.log(typeof str, str); // string 10

// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

 

 

 

🐯💬 : 명시적, 암묵적 타입 변환이 기존 원시 값을 직접 변경 ❌

             원시 값은 변경 불가능한 값이므로 변경할 수 없다.

             타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성한것!

 

🐯💬 : 각자 가독성 측면에서 장단점이 있다. 

           중요한건 타입이 변환될 때 표현식이 어떻게 평가될 것인지

           예측이 가능해야한다는것이다!

           이렇게 자바스크립트의 타입이 변환될 때 예측되는것을 알고 있다면,

           어떤경우에는 명시적 타입변환 [ (10).toString() ] 보다 암묵적 타입변환인 [10 + '' ]이

           더 간결하다는걸 알 수 있다. 각자 요리조리~ 사용하고 싶다면!

           코드를 예측할 수 있는 힘을 키우자!

 

---

🐰 암묵적 타입 변환 🐰

기존 변수 값을 재할당하여 변경 ❌,

자바스크립트 엔진은 표현식을 에러 없이 평가하기 위해

피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들고! 한 번 사용하고 버림!!!

// 피연산자가 모두 문자열 타입이어야 하는 문맥
'10' + 2 // -> '102'

// 피연산자가 모두 숫자 타입이어야 하는 문맥
5 * '10' // -> 50

// 피연산자 또는 표현식이 불리언 타입이어야 하는 문맥
!0 // -> true
if (1) { }//0이아닌 숫자 => true

 

표현식을 평가하다가 문맥에 부합하지 않는 상황들이 발생할 수 있는데,

이때 프로그래밍에 따라 에러를 발생시키기도 하지만, 

자바스크립트 경우에는 가급적 에러를 발생시키지 않도록,

문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환해준다.

(암묵적 타입 변환)

 

 

암묵적 타입변환 - 문자열 타입으로 변환

1 + '2' // -> "12"

이 예제를 살펴보면 + 연산자는 피연산자 중 하나 이상이 문자열이면

문자열 연결 연산자로 동작한다는것을 알 수 있다.

 

-> 즉 문자열 연결 연산자의 모든 피연산자는

코드의 문맥상 모두 문자열 타입이어야한다.

그러므로 + 연산자가 문자열 연결 연산자로 쓰인다면!
피연산자가 문자가 아닐경우 문자로 암묵적 타입이 된다.

 

*피연산자도 표현식

 

 

ES6에서 도입된 리터럴 표현식을 ! ${}안에 있는

표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환을 한다.

`1 + 1 = ${1 + 1}` // -> "1 + 1 = 2"

 

 

자바스크립트 엔진은 문자열 타입 아닌 값을 문자열 타입으로

암묵적 타입 변환을 수행할 때 아래와 같이 동작한다.

// 숫자 타입
0 + ''         // -> "0"
-0 + ''        // -> "0"
1 + ''         // -> "1"
-1 + ''        // -> "-1"
NaN + ''       // -> "NaN"
Infinity + ''  // -> "Infinity"
-Infinity + '' // -> "-Infinity"

// 불리언 타입
true + ''  // -> "true"
false + '' // -> "false"

// null 타입
null + '' // -> "null"

// undefined 타입
undefined + '' // -> "undefined"

// 심벌 타입
(Symbol()) + '' // -> TypeError: Cannot convert a Symbol value to a string

// 객체 타입
({}) + ''           // -> "[object Object]"
Math + ''           // -> "[object Math]"
[] + ''             // -> ""
[10, 20] + ''       // -> "10,20"
(function(){}) + '' // -> "function(){}"
Array + ''          // -> "function Array() { [native code] }"

 

 

암묵적 타입변환 - 숫자 타입으로 변환

1 - '1'   // -> 0
1 * '10'  // -> 10
1 / 'one' // -> NaN

위 예제에서 사용한 연산자는 모두 산술 연산자다.

 

산술 연산자 -> 숫자 값을 만듦

👉🏻 그러므로 산술 연산자의 모든 피연산자는

코드 문맥상 모두 숫자 타입이어야한다.

 

👉🏻  이 때 자바스크립트는 산술 연산자를 사용했을 때 피연산자가

숫자가 아니라면 암묵적으로 숫자로 타입을 변환한다.

하지만 숫자로 암묵적 타입 변환이 안될 경우

연산을 수행할 수 없으므로 숫자가 아니라는 표현인 NaN이 결과값으로 나온다.

 

 

🌼 피연산자를 숫자 타입으로 변환해야할 문백은 산술 연산자 뿐만이 아니다!

'1' > 0  // -> true

 

비교 연산자 -> 불리언 값을 만듦

비교를 하기 위한 조건 -> 숫자여야함

 

👉🏻 그러므로 피연산자가 숫자가 아니라면 숫자로 암묵적 타입 변환!

 

 

+ 단항 연산자는 피연산자가 숫자 타입의 값이 아니면

숫자 타입의 값으로 암묵적 타입변환을 수행한다.

// 문자열 타입
+''       // -> 0
+'0'      // -> 0
+'1'      // -> 1
+'string' // -> NaN

// 불리언 타입
+true     // -> 1
+false    // -> 0

// null 타입
+null     // -> 0

// undefined 타입
+undefined // -> NaN

// 심벌 타입
+Symbol() // -> TypeError: Cannot convert a Symbol value to a number

// 객체 타입
+{}             // -> NaN
+[]             // -> 0
+[10, 20]       // -> NaN
+(function(){}) // -> NaN

 

빈 문자열(' '), 빈 배열([]), null, false => 0

true => 1 로 변환된다.

❗주의 : 객체와 빈 배열이 아닌 배열, undefined => NaN 

 

 

암묵적 타입변환 - 불리언 타입으로 변환

if문, for문과 같은 제어문 또는 삼항 조건 연산자의 조건식은

불리언 값, 즉 논리적 참/거짓으로 평가되어야 하는 표현식이다.

👉🏻 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환

if ('')    console.log('1');
if (true)  console.log('2');
if (0)     console.log('3');
if ('str') console.log('4');
if (null)  console.log('5');

// 2 4

 

 

자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값),

Falsy 값(거짓으로 평가되는 값)으로 구분한다.

 

👉🏻 즉, 제어문의 조건식과 같이 불리언 값으로 평가되어야 할 문맥에서

Truthy 값은 -> true / Falsy값은 -> false로 암묵적 타입 변환된다.

 

 

🐯💬: false로 평가되는 Falsy 값은 뭐가 있을까 ? 

• false
• undefined
• null
• 0, -0
• NaN
• ' ' (빈 문자열)

 

조건문에 Falsy값에 !(Not연산자)를 붙여서 Truthy로 만들어주기!

// 아래의 조건문은 모두 코드 블록을 실행한다.
if (!false)     console.log(false + ' is falsy value');
if (!undefined) console.log(undefined + ' is falsy value');
if (!null)      console.log(null + ' is falsy value');
if (!0)         console.log(0 + ' is falsy value');
if (!NaN)       console.log(NaN + ' is falsy value');
if (!'')        console.log('' + ' is falsy value');

 

 

 

Falsy 값 외의 모든 값은 모두 true로 평가되는 Truthy 값이다.

아래 예제는 Truthy / Falsy 값을 판별하는 함수이다.

// 전달받은 인수가 Falsy 값이면 true, Truthy 값이면 false를 반환한다.
function isFalsy(v) {
  return !v;
}

// 전달받은 인수가 Truthy 값이면 true, Falsy 값이면 false를 반환한다.
function isTruthy(v) {
  return !!v;
}

// 모두 true를 반환한다.
isFalsy(false);
isFalsy(undefined);
isFalsy(null);
isFalsy(0);
isFalsy(NaN);
isFalsy('');

// 모두 true를 반환한다.
isTruthy(true);
isTruthy('0'); // 빈 문자열이 아닌 문자열은 Truthy 값이다.
isTruthy({});
isTruthy([]);

 

 

함수
함수란 어떤 작업을 수행하는 데 필요한 문들의 집합을 정의한 코드 블록이다.
함수는 이름과 매개변수를 가지며, 필요할 때 호출해
코드 블록에 담긴 문들을 일괄적으로 실행할 수 있다.

 

---

🐰 명시적 타입 변환 🐰

개발자의 의도에 따라 명시적으로 타입을 변경하는 방법은 다양하다!

 

- 표준 빌트인 생성자 함수(String, Number, Boolean)를

new 연산자 없이 호출하는 방법과 빌트인 메서드를 사용하는 방법

 

- 암묵적 타입 변환을 이용하는 방법

 

표준 빌트인 생성자 함수와 빌트인 메서드

표준 빌트인 생성자 함수와 표준 빌트인 메서드는
자바스크립에서  기본 제공하는 함수이다.

표준 빌트인 생성자 함수는 객체를 생성하기 위한 함수이며,
new 연산자와 함께 호출한다.

표준 빌트인 메서드는 자바스크립트에서 기본 제공하는 빌트인 객체의 메서드이다.

 

 

명시적 타입변환 - 문자열 타입으로 변환

문자열 타입이 아닌 값을 문자열 타입으로 변환하는 방법은 다음과 같다.

1. String 생성자 함수를 new 연산자 없이 호출하는 방법
2. Object.prototype.toString 메서드를 사용하는 방법
3. 문자열 연결 연산자를 이용하는 방법

// 1. String 생성자 함수를 new 연산자 없이 호출하는 방법
// 숫자 타입 => 문자열 타입
String(1);        // -> "1"
String(NaN);      // -> "NaN"
String(Infinity); // -> "Infinity"
// 불리언 타입 => 문자열 타입
String(true);     // -> "true"
String(false);    // -> "false"

// 2. Object.prototype.toString 메서드를 사용하는 방법
// 숫자 타입 => 문자열 타입
(1).toString();        // -> "1"
(NaN).toString();      // -> "NaN"
(Infinity).toString(); // -> "Infinity"
// 불리언 타입 => 문자열 타입
(true).toString();     // -> "true"
(false).toString();    // -> "false"

// 3. 문자열 연결 연산자를 이용하는 방법
// 숫자 타입 => 문자열 타입
1 + '';        // -> "1"
NaN + '';      // -> "NaN"
Infinity + ''; // -> "Infinity"
// 불리언 타입 => 문자열 타입
true + '';     // -> "true"
false + '';    // -> "false"

 

 

명시적 타입변환 - 숫자 타입으로 변환

숫자 타입이 아닌 값을 숫자 타입으로 변환하는 방법은 다음과 같다.

1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능)
3. + 단항 산술 연산자를 이용하는 방법
4. * 산술 연산자를 이용하는 방법

// 1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 숫자 타입
Number('0');     // -> 0
Number('-1');    // -> -1
Number('10.53'); // -> 10.53
// 불리언 타입 => 숫자 타입
Number(true);    // -> 1
Number(false);   // -> 0

// 2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
// 문자열 타입 => 숫자 타입
parseInt('0');       // -> 0
parseInt('-1');      // -> -1
parseFloat('10.53'); // -> 10.53

// 3. + 단항 산술 연산자를 이용하는 방법
// 문자열 타입 => 숫자 타입
+'0';     // -> 0
+'-1';    // -> -1
+'10.53'; // -> 10.53
// 불리언 타입 => 숫자 타입
+true;    // -> 1
+false;   // -> 0

// 4. * 산술 연산자를 이용하는 방법
// 문자열 타입 => 숫자 타입
'0' * 1;     // -> 0
'-1' * 1;    // -> -1
'10.53' * 1; // -> 10.53
// 불리언 타입 => 숫자 타입
true * 1;    // -> 1
false * 1;   // -> 0

 

 

명시적 타입변환 - 불리언 타입으로 변환

불리언  타입이 아닌 값을 불리언 타입으로 변환하는 방법은 다음과 같다.

1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
2. ! 부정 논리 연산자를 두 번 사용하는 방법

// 1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 불리언 타입
Boolean('x');       // -> true
Boolean('');        // -> false
Boolean('false');   // -> true
// 숫자 타입 => 불리언 타입
Boolean(0);         // -> false
Boolean(1);         // -> true
Boolean(NaN);       // -> false
Boolean(Infinity);  // -> true
// null 타입 => 불리언 타입
Boolean(null);      // -> false
// undefined 타입 => 불리언 타입
Boolean(undefined); // -> false
// 객체 타입 => 불리언 타입
Boolean({});        // -> true
Boolean([]);        // -> true

// 2. ! 부정 논리 연산자를 두번 사용하는 방법
// 문자열 타입 => 불리언 타입
!!'x';       // -> true
!!'';        // -> false
!!'false';   // -> true
// 숫자 타입 => 불리언 타입
!!0;         // -> false
!!1;         // -> true
!!NaN;       // -> false
!!Infinity;  // -> true
// null 타입 => 불리언 타입
!!null;      // -> false
// undefined 타입 => 불리언 타입
!!undefined; // -> false
// 객체 타입 => 불리언 타입
!!{};        // -> true
!![];        // -> true

 

---

🐰 단축 평가 🐰

논리 연산자를 사용한 단축 평가

논리합(||) 또는 논리곱(&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다.

논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 
어느 한쪽으로 평가된다.

'Cat' && 'Dog' // -> "Dog"

 

논리곱(&&) 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true로 반환한다.

논리곱 연산자는 좌항에서 우항으로 평가가 진행된다.

 

첫 번째 피연산자가 'Cat'은 Truthy 값이므로 ➡️ true !

두 번째 피연산자도 'Dog'도 Truthy 값이므로 ➡️ true !

두 번째 피연산자가 위 예제의 논리곱 연산자 표현식의 평가 결과를 결정한다.

이때 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자,

즉 문자열 'Dog'를 그대로 반환한다.

 

 

'Cat' || 'Dog' // -> "Cat"

 

논리합(||) 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true이다!

논리합 연산자도 좌항에서 우항으로 평가가 진행된다.

 

첫 번째 피연산자가 'Cat'은 Truthy 값이므로 ➡️ true !

이 시점에 두 번째 피연산자까지 평가해 보지 않아도 위 표현식을 평가할 수 있다.

이때 논리합 연산자는 논리 연산의 결과를 결정한 첫 번째 피연산자,
즉 문자열 'Cat'을 그대로 반환한다.

 

 

🐯💬 단축 평가
논리곱(&&) 연산자와 논리합(||) 연산자는 이처럼 논리 연산의 결과를 결정하는
피연산자를 타입 변환하지 않고 그대로 반환한다. 
이를 단축 평가라고 한다.
단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우
나머지 평가 과정을 생략하는 것을 말한다.

정리해서 말해보자면,

논리합(||) 연산자 ➡️ 첫번째 Truthy를 찾는다.

논리곱(&&) 연산자 ➡️ 첫번째 Falsy를 찾는다, 모두 Truthy면 마지막 피연산자 반환.

 

단축 평가 표현식	평가 결과
true || anything	true
false || anything	anything
true && anything	anything
false && anything	false

 

// 논리합(||) 연산자
'Cat' || 'Dog'  // -> "Cat"
false || 'Dog'  // -> "Dog"
'Cat' || false  // -> "Cat"

// 논리곱(&&) 연산자
'Cat' && 'Dog'  // -> "Dog"
false && 'Dog'  // -> false
'Cat' && false  // -> false

 

 

단축 평가를 사용하면 if문을 대체할 수 있다.
어떤 조건이 Truthy값일 때 무언가를 해야한다면
논리곱(&&) 연산자 표현식으로 if문을 대체할 수 있다.

let done = true;
let message = '';

// 주어진 조건이 true일 때
if (done) message = '완료';

// if 문은 단축 평가로 대체 가능하다.
// done이 true라면 message에 '완료'를 할당
message = done && '완료';
console.log(message); // 완료

 

 

조건이 Falsy 값(거짓으로 평가되는 값)일 때 무언가를 해야 한다면

논리합(||) 연산자 표현식으로 if문을 대체할 수 있다.

let done = false;
let message = '';

// 주어진 조건이 false일 때
if (!done) message = '미완료';

// if 문은 단축 평가로 대체 가능하다.
// done이 false라면 message에 '미완료'를 할당
message = done || '미완료';
console.log(message); // 미완료

 

 

참고로 삼항 조건 연산자는 if...else문을 대체할 수 있다.

let done = true;
let message = '';

// if...else 문
if (done) message = '완료';
else      message = '미완료';
console.log(message); // 완료

// if...else 문은 삼항 조건 연산자로 대체 가능하다.
message = done ? '완료' : '미완료';
console.log(message); // 완료

 

단축 평가는 다음과 같은 상황에서 유용하게 사용된다.

아직 살펴보지 않은 객체와 함수에 대한 내용이 나와서 혼란스러울 수 있겠지만,

지금은 다음과 같은 단축 평가의 유용한 패턴이 있다는 정도로 이해하고

넘어가도 좋다. 객체와 함수에 대해서는 나중에 자세히 살펴볼 것이다.

 

 

객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지
확인하고 프로퍼티를 참조할 때

객체는 키와 값으로 구성된 프로퍼티의 집합이다!
만약 객체를 가리키기를 기대하는 변수의 값이 객체가 아니라
null 또는 undefined인 경우 객체의 프로퍼티를 참조하면
타입 에러가 발생한다. 에러가 발생하면 프로그램이 강제 종료된다.

let elem = null;
let value = elem.value; // TypeError: Cannot read property 'value' of null

 

 

이 때 단축 평가를 사용하면 에러를 발생시키지 않는다.

let elem = null;
// elem이 null이나 undefined와 같은 Falsy 값이면 elem으로 평가되고
// elem이 Truthy 값이면 elem.value로 평가된다.
let value = elem && elem.value; // -> null

 

 

함수 매개변수에 기본값을 설정할 때

함수를 호출할 때 인수를 전달하지 않으면 

매개변수에는 undefined가 할당된다.
이때 단축 평가를 사용해 매개변수의 기본값을 설정하면
undefined로 인해 발생할 수 있는 에러를 방지할 수 있다.

// 단축 평가를 사용한 매개변수의 기본값 설정
function getStringLength(str) {
  str = str || '';
  return str.length;
}

getStringLength();     // -> 0
getStringLength('hi'); // -> 2

// ES6의 매개변수의 기본값 설정
function getStringLength(str = '') {
  return str.length;
}

getStringLength();     // -> 0
getStringLength('hi'); // -> 2

 

 

옵셔널 체이닝 연산자

ES11에서 도입된 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가

null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면

우항의 프로퍼티 참조를 이어간다.

let elem = null;

// elem이 null 또는 undefined이면 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
let value = elem?.value;
console.log(value); // undefined

 

 

옵셔널 체이닝 연산자 ?.는 객체를 가리키기를 기대하는 변수가

null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용하다!

옵셔널 체이닝 연산자 ?.가 도입되기 이전에는 논리 연산자 &&를

사용한 단축 평가를 통해 변수가 null 또는 undeifined인지 확인했다.

let elem = null;

// elem이 Falsy 값이면 elem으로 평가되고 elem이 Truthy 값이면 elem.value로 평가된다.
let value = elem && elem.value;
console.log(value); // null

 

 

논리 연산자 &&는 좌항 피연산자가 false로 평가되는

Falsy값(false, undefined, null, 0, -0, NaN, '') 이면

좌항 피연산자를 그대로 반환한다.

좌항 피연산자가 Falsy값인 0이나 ' '인 경우도 마찬가지다.

하지만 0이나 ' '은 객체로 평가될 때도 있다.

let str = '';

// 문자열의 길이(length)를 참조한다.
let length = str && str.length;

// 문자열의 길이(length)를 참조하지 못한다.
console.log(length); // ''

 

 

하지만 옵셔널 체이닝 연산자 ?.는 좌항 피연산자가 false로 평가되는 
Falsy 값(false, undeifined, null, ., -., NaN, ' ')이라도
null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.

let str = '';

// 문자열의 길이(length)를 참조한다. 이때 좌항 피연산자가 false로 평가되는 Falsy 값이라도
// null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.
let length = str?.length;
console.log(length); // 0

 

 

🐯💬: ?.()와 ?.[]

 

?.은 연산자가 아니다.

?.은 함수나 대괄호와 함께 동작하는 특별한 문법 구조체(syntax construct)이다.

함수 관련 예시와 함께 존재 여부가 확실치 않은 함수를 호출할 때 

?.()를 어떻게 쓸 수 있는지 알아보자.

한 객체엔 메서드 admin이 있지만 다른 객체엔 없는 상황이다.

 

두 상황 모두에서 user 객체는 존재하기 때문에 admin 프로퍼티는 .만 사용해 접근했다.

그리고 난 후 ?.()를 사용해 admin의 존재 여부를 확인했다.

user1엔 admin이 정의되어 있기 때문에 메서드가 제대로 호출되었다.
반면 user2엔 admin이 정의되어 있지 않았음에도 불구하고 메서드를 호출하면

에러 없이 그냥 평가가 멈추는 것을 확인할 수 있다.

let user1 = {
  admin() {
    alert("관리자 계정입니다.");
  }
}

let user2 = {};

user1.admin?.(); // 관리자 계정입니다.
user2.admin?.();

 

 

 

.대신 대괄호 []를 사용해 객체 프로퍼티에 접근하는 경우엔 

?.[]를 사용할 수도 있다.

위 예시와 마찬가지로 ?.[]를 사용하면 객체 존재 여부가 확실치 않은 경우에도

안전하게 프로퍼티를 읽을 수 있습니다.

let user1 = {
  firstName: "Violet"
};

let user2 = null; // user2는 권한이 없는 사용자라고 가정해봅시다.

let key = "firstName";

alert( user1?.[key] ); // Violet
alert( user2?.[key] ); // undefined

alert( user1?.[key]?.something?.not?.existing); // undefined

 

 

?.은 delete와 조합해 사용할 수도 있습니다.

delete user?.name; // user가 존재하면 user.name을 삭제합니다.

 

옵셔널 체이닝 문법 요약

옵셔널 체이닝 문법 ?.은 세 가지 형태로 사용할 수 있다.
👉🏻 obj?.prop – obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함
👉🏻 obj?.[prop] – obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환함
👉🏻 obj?.method() – obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환함

여러 예시를 통해 살펴보았듯이 옵셔널 체이닝 문법은 꽤 직관적이고 사용하기도 쉽다.
?. 왼쪽 평가 대상이 null이나 undefined인지 확인하고 null이나 undefined가 아니라면 평가를 계속 진행한다.
?.를 계속 연결해서 체인을 만들면 중첩 프로퍼티들에 안전하게 접근할 수 있다.
?.은 ?.왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 한다.
꼭 있어야 하는 값인데 없는 경우에 ?.을 사용하면 프로그래밍 에러를 쉽게 찾을 수 없으므로
이런 상황을 만들지 말도록 하자.

 

 

null 병합 연산자

ES11에서 도입된 null 병합 연산자 ??는 좌항의 피연산자가
null 또는 undefined인 경우 그 옆의 우항의 피연산자를 반환하고,

그렇지 않으면 좌학의 피연산자를 반환한다.
null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다!

// 좌항의 피연산자가 null 또는 undefined이면 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.
let foo = null ?? 'default string';
console.log(foo); // "default string"

 

 

null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다.

null 병합 연산자 ??가 도입되기 이전에는 논리 연산자 ||를 사용한
단축 평가를 통해 변수에 기본값을 설정했다.

논리연산자 ||를 사용할경우 Falsy 값인 0이나 ' '도 기본값으로서 유효한다면
예기치 않은 동작이 발생할 수 있다.

// 좌항의 피연산자가 null 또는 undefined이면 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.
let foo = null ?? 'default string';
console.log(foo); // "default string"

 

 

하지만 null 병합 연산자 ??는 좌항의 피연산자가 false로 평가되는

Falsy값 (false, undefined, null, 0, -0, NaN, ' ')이라도  null 또는 undefined가 아니면
좌항의 피연산자를 그대로 반환한다.

// 좌항의 피연산자가 Falsy 값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 반환한다.
let foo = '' ?? 'default string';
console.log(foo); // ""

 

 

그렇다면 '??'와 '||'의 차이는 무엇일까?

null 병합 연산자는 OR 연산자 ||와 상당히 유사해 보인다.

 

null과 undefined, 숫자 0을 구분 지어 다뤄야 할 때 이 차이점은 매우 중요한 역할을 한다.

예시를 살펴보자.

height = height ?? 100;

 

height에 값이 정의되지 않은경우 height엔 100이 할당된다.

이제 ??와 ||을 비교해보자.

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

height || 100은 height에 0을 할당했지만 0을 falsy 한 값으로 취급했기 때문에

null이나 undefined를 할당한 것과 동일하게 처리합니다.

따라서 height || 100의 평가 결과는 100

 

반면 height ?? 100의 평가 결과는 height가 정확하게 null이나 undefined일 경우에만 100이 된다.

예시에선 height에 0이라는 값을 할당했기 때문에 얼럿창엔 0이 출력된다.

이런 특징 때문에 높이처럼 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합하다.

 

||와 ?? 차이를 요약하자면!

||는 첫 번째 truthy 값을 반환한다.
??는 첫 번째 정의된(defined) 값을 반환한다.

 

 

만약에 논리연산자랑 같이 사용해야한다면?

논리연산자 부분을 그룹연산자로 묶어준다.

참고로 ?? 는 = 와 ? 보다는 우선순위가 높다. 

let x = (1 && 2) ?? 3; // 제대로 동작

alert(x); // 2

 

 

null 병합연산자 요약해보자면!

• null 병합 연산자 ??를 사용하면 피연산자 중 ‘값이 할당된’ 변수를 빠르게 찾을 수 있다.

  // height가 null이나 undefined인 경우, 100을 할당
  height = height ?? 100;

• ??는 변수에 기본값을 할당하는 용도로 사용할 수 있습니다.
• ??의 연산자 우선순위는 대다수의 연산자보다 낮고 ?와 = 보다는 높다.
• 괄호 없이 ??를 ||나 &&와 함께 사용하는 것은 금지되어있다.