[JS] 타입 변환과 단축 평가 (옵셔널체이닝 연산자, null 병합 연산자, 논리 연산자)

 

이번 파트를 공부하면서, 스타트업 인턴 당시 서버에서 값을 불러오는 과정에서 사용했던 문법들을 보게되어

괜히 반갑고 이유를 알 수 있어서 부족한 점을 하나씩 채워나가는 기분이었다.

 

1. 타입 변환이란?

---

자바스크립트의 모든 값은 타입이 있다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다.

 

명시적 타입 변환(타입 캐스팅) : 개발자가 의도적으로 값의 타입을 변환하는 것

암묵적 타입 변환(타입 강제 변환) : 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것

var x = 10;

var str = x.toString(); // 명시적 타입변환
console.log(typeof str, str); // string 10

var str2 = x + ''; // 암묵적 타입변환
console.log(typeof str2, str2); // string 10

명시적 타입 변환이나 암묵적 타입 변환이 기족 원시 값을 직접 변경하는 것은 아니다. 원시 값은 변경 불가능한 값이므로 변경할 수 없다.

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

 

명시적 타입 변환은 타입을 변경하겠다는 개발자의 의지가 코드에 명백히 드러난다. 하지만 암묵적 타입 강제 변환은 자바스크립트 엔진에 의해 암묵적으로, 즉 드러나지 않게 타입이 자동 변환되기 때문에 타입을 변경하겠다는 개발자의 의지가 코드에 명백히 나타나지 않는다.

 

그렇기에 암묵적 타입 변환이 발생하는지, 만약 발생한다면 어떤 타입으로 변환되는지 예측 가능해야 한다. 예측하지 못한다면 오류를 생산할 가능성이 높아진다. 여기에서 더 중요한 것은 코드를 예측할 수 있게 작성해야 된다는 것이다.

 

동료가 작성한 코드를 정확히 이해할 수 있어야 하고 자신이 작성한 코드도 동료가 쉽게 이해할 수 있는 코드를 작성해야 한다.

 

2. 불리언 타입으로 변환

---

if 문이나 for 문과 같은 제어문 또는 삼항 조건 연산자의 조건식은 불리언 값, 즉 논리적 참/거짓으로 평가되어야 하는 표현식이다.

자바스크립트 엔진은 조건식의 평과 결과를 불리언 타입으로 암묵적 타입 변환한다.

 

자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분한다.

 

Fasly 값

- false

- undefined

- null

- 0, -0

- NaN

- ' '(빈 문자열)

 

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

 

1) Boolean 생성자 함수를 new 연산자 없이 호출하는 방법

---

Boolean('x'); // true
Boolean(''); // false
Boolean('false'); // true

2)  ' ! '  부정 논리 연산자를 두 번 사용하는 방법

---

!!'x'; // true
!!''; // false
!!'false'; // true
!!0; // false
!!1 // true

 

 

3. 문자열 타입으로 변환

---

1) String 생성자 함수를 new 연산자 없이 호출하는 방법

---

var num = 10;
String(num) // "10"

2) Object.prototype.toString 메서드를 사용하는 방법

---

var num = 10;
num.toString() // "10"

3) 문자열 연결 연산자를 이용하는 방법

---

var num = 10;
num + '' // '10'

 

4. 숫자 타입으로 변환

---

1) Number 생성자 함수를 new 연산자 없이 호출하는 방법

---

var str = "10"
Number(str) // 10

2) parseInt, parseFloat 함수를 사용하는 방법

---

var str = '10';
parseInt(str); // 10

3) + 단항 산술 연산자를 이용하는 방법

---

var str = '10';
+ str; // 10

 

4) * 산술 연살자를 이용하는 방법

---

var str = '10';
str * 1; // 10

 

5. 단축평가

---

1) 논리 연산자 ( &&, | | )

---

논리합( || ) 또는 논리곱( && ) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다. 논리합 또는 논리곱 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다는 것이다.

'Cat' && 'Dog' // "Dog"

논리곱 연산자는 두 개의 피연산자가 모두 true일 때 true를 반환한다. 또한 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다.

 

첫 번째 피연산자 'Cat'은 true로 평가된다. 하지만 이 시점까지는 표현식을 평가할 수 없고 두 번째 피연산자인 'Dog'까지 평가해 보아야 가능하다. 다시 말 해, 두 번째 피연산자가 위 논리곱 연산자 표현식의 평가 결과를 결정하는 것이다.

 

이때 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자인 'Dog'를 그대로 반환한다.

 

'Cat' || 'Dog' // "Cat"

논리합 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다. 

 

첫 번째 피연산자 'Cat'은 Truthy 값이므로 true로 평가된다. 이 시점에 두 번째 피연산자까지 평가해 보지 않아도 표현식 평가가 가능하다.

이때 논리합 연산자는 표현식의 결과를 결정하는 첫 번째 피연산자 'Cat'을 그대로 반환한다.

 

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

 

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

var done = true;
var message = '';

if (done) message = '완료'

message = done && '완료';
console.log(message) //완료

 

2) 옵셔널 체이닝 연산자 ( ?. )

---

ES11(ECMAScript2020)에서 도입된 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우

undefined를 반환하고 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

 

옵셔널 체이닝 연산자 ?.는 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용하다.

이전에는 앞서 살펴본 논리연산자 &&를 사용한 단축 평가를 통해 변수가 null 또는 undefined인지 확인했다.

 

var str = '';

var length = str?.length;
console.log(length); // 0

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

 

3) null 병합 연산자 ( ?? )

---

ES11에서 도입된 null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다.

var foo = null ?? 'default string';
console.log(foo); // "default string"

var boo = '' || 'default string';
console.log(foo); // 'dafault string'

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

 

논리 연산자 ||를 사용한 단축 평가의 경우 좌항의 피연산자가 false로 평가되는 Falsy 값이면 우항의 피연산자를 반환한다.

만약 Falsy 값인 0이나 ''도 기본값으로서 유효하다면 예기치 않은 동작이 발생할 수 있다.

 

해당 글은 [모던 자바스크립트 Deep Dive - 저자 이응모] 도서의 내용을 정리한 글입니다.