[JS] 모던 Javascript Deep Dive 9장 - 타입 변환과 단축 평가

📝 타입변환이란?

타입변환은 연산자 파트에서도 다룬적이 있었다.

개발자의 의도에 따라 타입을 변경하는지 의도와 상관없이 암묵적으로 타입이 변경되는지에 따라 크게 두가지로 나뉜다.

---

[1] 명시적 타입 변환 (타입 캐스팅)

개발자의 의도적으로 값의 타입을 변환하는 것이다.

var x = 10;
//toString() 메서드를 활용해 숫자를 문자열로 명시적 타입변환 해준다.
var str = x.toString();
console.log(typeof str, str);//string 10

console.log(typeof x, x);// number 10

[2] 암묵적 타입 변환 (타입 강제 변환)

개발자의 의도와 상관없이 표현식이 자바스크립트 엔진에 의해 평가되는 도중에 암묵적으로 타입이 자동변환되는 것이다.

var x = 10;

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

console.log(typeof x, x);// number 10

---

⇒ 둘 다 원시 값 x는 변경되지 않는다는 공통점이 있다.

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

개발자가 타입 변환된 값으로 표현식이 어떻게 평가될 것인지 예측을 할 수 있어야 한다는 것이 중요하다. 왜냐하면 명시적 타입 변환보다 암묵적 타입 변환이 가독성 측면에서 더 좋을 수도 있기 때문이다.

[01] 암묵적 타입 변환

자바스크립트 엔진은 표현식을 평가할 때 코드의 문맥(컨텍스트)를 고려하여 암묵적 타입 변환을 한다. 자바스크립트는 가급적 에러를 발생시키지 않도록 하는 특징이 있다.

문자열 타입으로 변환

console.log(1+'2'); // 12
console.log(`1 + 1 = ${1 + 1}`); // 1 + 1 = 2

위처럼 피연산자 중 하나 이상이 문자열일 때 + 연산자는 문자열 연결 연산자로 동작한다.

아래는 빈 문자열 ‘ ‘ 을 +연산자로 여러 타입의 연산자와 결합시킨 코드이다. 심볼 타입을 제외하고는 모두 문자열로 바뀌는 것을 볼 수 있다.

// 숫자 타입
0 + ''              // "0"
-1 + ''             // "-1"
NaN + ''            // "NaN"
Infinity + ''       // "Infinity"
// 불리언 타입
true + ''           // "true"
// 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] }"

숫자 타입으로 변환

12 - '2' // 14
3 * '3' // 9
2 / 'ten' //NaN

산술 연산자로 이루어진 표현식을 평가하기 위해 문자열을 숫자로 암묵적 타입 변환 하였다.

숫자로 변환할 수 없는 경우는 NaN 을 출력한다.

숫자 타입이 아닌 데이터 타입에 +연산자를 붙이면 숫자 타입으로 암묵적 타입 변환을 수행한다.

// 문자열 타입
+''             // 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

불리언 타입으로 변환

불리언 타입으로 변환되는 가장 흔한 경우는 제어문의 조건식이 평가되는 경우이다.

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

if 문 안에서 자바스크립트 엔진이 표현식을 평가할 때, 불리언 타입이 아니면 Truthy 값 또는 Falsy 값으로 구분을 한다. Truthy 값은 true로, Falsy 값은 false로 변환된다.

🎯 Falsy 값 예시

false, undefined, null, 0, -0, NaN, ‘’

if (!false)     console.log(false + ' is falsy value'); // false is fals 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 값이라는 것을 알 수 있는데 문자가 존재하면 truthy 값으로 여겨진다고 한다.

[02] 명시적 타입 변환

문자열 타입으로 변환

//1. String 생성자 함수 호출
console.log(String(1)); // "1"

//2. Object.prototype.toString 메소드를 사용
console.log((1).toString()); // "1"

//3. 문자열 연결 연산자를 사용
console.log(1 + '') // "1"

숫자 타입으로 변환

//1. Number 생성자 함수 호출
console.log(Number('0')); // 0
console.log(Number(true)); // 1

//2. parseInt, parseFloat 함수를 사용(문자열만 변환 가능)
console.log(parseInt('0')); // 0
console.log(parseFloat('3.14')); //3.14

//3. + 단항 연산자를 사용
console.log(+'0'); // 0
console.log(+true) // 1

//4. 산술 연산자를 사용
console.log('0' * 1); // 0
console.log(true * 1); // 1

불리언 타입으로 변환

//1. Boolean 생성자 함수 호출(falsy,truthy 둘 중 하나로 평가)
console.log(Boolean('x')); // true (truthy값)
console.log(Boolean('')); // false (falsy값)
console.log(Boolean(0)); // false

//2. ! 부정 논리 연산자를 두번 사용
console.log(!!0); // false
console.log(!!''); // false

[03] 단축 평가

논리곱(&&)연산자와 논리합(||)연산자 표현식의 평가 결과는 불리언 값이 아니고 두 피연산자 중 한쪽의 값으로 평가된다는 특징이 있다.

논리곱(&&)연산자

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

논리곱 연산자는 양쪽 피연산자 둘 다 true값이어야 true를 출력한다. 위의 예제에서 ‘Cat’ 은 truthy값으로 판단될 것이고 ‘Dog’도 truthy 값으로 평가될 것이다.

자바스크립트 엔진은 좌항에서 우항의 순서대로 표현식을 평가하는데 앞의 값이 truthy라면 결국 출력값을 결정하는 피연산자는 뒤에 있는 값이 될 것이다.

그래서 위 예제에서 출력을 결정해주는 두번째 피연산자인 ‘Dog’가 출력되었다는 것을 알 수 있다.

const info = {
	name : "민혜"
};

function getName(person) {
	return person.name
}
console.log(getName())

위처럼 코드를 짠다면 getName 함수에 전달된 인수가 없을 때, person.name 프로퍼티를 읽을 수 없다는 에러가 발생하게 된다. 이런 상황에서 논리곱(&&) 연산자를 이용하면 좋다.

const info = {
	name : "민혜"
};

function getName(person) {
	return person && person.name
}
console.log(getName()) // undefined
console.log(getName(info)) // 민혜

함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당된다.

결론적으로 &&연산자는 앞의 값이 Truthy면 결과는 뒤의 값이고, 앞의 값이 Falsy면 결과가 앞의 값이 되어 단축평가가 일어난다.

특정 값이 유효할 때만 어떤 값을 조회하는 작업을 해야할 때 유용하게 사용할 수 있다고 한다.

( = 어떤 조건이 Truthy 값일 때 무언가를 해야 한다면 &&연산자로 if문 대체 가능)

책 내용에서 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때와 연결되는 내용인 것 같다.

논리합(||) 연산자

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

논리합 연산자는 둘 중 하나의 값만 true 여도 true를 반환하고 둘 다 false여야 false를 반환한다.

위의 예제에서 이미 ‘Cat’ 피연산자가 true로 평가되었기 때문에 평가 결과는 true로 판명이 났다.

그렇기 때문에 뒤의 연산은 생략하고 앞의 피연산자인 ‘Cat’을 출력하는 것이다.

var done = false;
var message = '';

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

//||로 단축평가가 가능하다
message = done || '미완료';
console.log(message); // 미완료

위와 같이 조건이 Falsy값일 때 무언가를 해야 한다면 || 연산자로 if 문을 대체 가능하다.

function getStringLength(str){
	str = str || '';
	return str.length;
}
getStringLength() // 0
getStringLength('minhye') // 6

함수 매개변수에 기본값을 설정할 때도 단축평가가 유용하게 쓰인다. 함수 호출 시 인수를 전달하지 않으면 undefined가 할당되는 것을 방지할 수 있다.

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

?. 연산자는 옵셔널 체이닝 연산자라고 한다. ES11에서 도입되어 얼마 되지 않은 문법이다.

좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

var elem = null;

var value = elem && elem.value;
console.log(value);

var value = elem?.value;
console.log(value); // undefined

위에서 다뤘던 단축평가의 논리곱 연산자 대신 ?. 연산자를 사용할 수 있다. 옵셔널 체이닝 연산자의 등장으로 && 연산자를 연결하여 사용하게 되면 코드가 길어질 수 있는 단점을 해결하였다.

null 병합 연산자(??)

?? 는 ES11에서 도입되었고 null 병합 연산자라고 부른다.

좌항의 피연산자가 null/undefined인 경우 우항의 피연산자를 반환하고 그렇지 않으면 좌항의 피연산자를 반환한다. 변수에 기본값을 설정할 때 유용하게 쓰인다.

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

|| 연산자와의 차이점은 || 는 첫 번째 truthy 값을 반환한다는 것이고 ??는 첫 번째 정의된 값을 반환한다는 것이다.

let height = 0;

alert(height || 100); // 100
//height가 0이라서 falsy값이므로 뒤의 값이 출력
alert(height ?? 100); // 0
//height에 null이나 undefined가 아니라 0이 할당되었기 때문에 그대로 0을 출력

?? 연산자는 정확히 null이나 undefined일 경우에만 100이 출력된다.

이러한 특징 때문에 높이(height)처럼 0이 할당될 수 있는 변수를 사용할 때는 || 보단 ??가 적합하다.