[JS] 모던 자바스크립트 - 05. 타입 변환과 단축 평가

타입 변환

---

- 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성. 기존 원시 값을 직접 변경 X

 

암묵적 타입 변환

- 개발자의 의도와는 상관 없이 자바스크립트 엔진에 의해 타입이 변환되는 것, 타입 강제 변환(type coercion)이라고도 함

- 자바스크립트 엔진은 표현식을 에러 없이 평가하기 위해 암묵적 타입 변환으로 새로운 타입의 값을 만들어 단 한 번만 사용 후 버림

 

1. 문자열 타입 변환

- 문자열 연결 연산자 사용 시 피연산자 중 문자열이 아닌 타입이 있을 경우, 문자열 타입으로 암묵적 타입 변한

- ES6에 도입된 템플릿 리터럴의 표현식 삽입은 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환

 

2. 숫자 타입 변환

- 산술 연산자 사용 시 피연산자 중 숫자 타입이 아닌 경우, 숫자 타입으로 암묵적 타입 변환

- 비교 연산자 사용 시, + 단항 연산자 사용 시에도 마찬가지

  ex) 빈 문자열(' '), 빈 배열([ ]), null, false는 0으로, true는 1로 변환

 

3. 불리언 타입 변환

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

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

- Falsy 값 : false, undefined, null, 0, -0, NaN, ' '(빈 문자열)

- Truthy 값 : Falsy 값이 아닌 모든 값

 

---

명시적 타입 변환

- 개발자가 의도적으로 값의 타입을 변환하는 것, 타입 캐스팅(type casting)이라고도 함

 

1. 문자열 타입 변환

- String(변환할 값) - new 연산자 없이 호출하는 String 생성자 함수

- (변환할 값).toString - Object.prototype.toString 메서드

- 변환할 값 + ' ' - 문자열 연결 연산자 

 

2. 숫자 타입 변환

- Number(변환할 값) - new 연산자 없이 호출하는 Number 생성자 함수

- parseInt(변환할 값), parseFloat(변환할 값) 함수 (문자열만 숫자타입으로 변환 가능)

- + (변환할 값) - +단항 산술 연산자 

-  (변환할 값)*1 - * 산술 연산자 

 

3. 불리언 타입 변환1. 문자열 타입 변환

- Boolean(변환할 값) - new 연산자 없이 호출하는 Boolean 생성자 함수

- !!(변환할 값) - ! 부정 논리 연산자를 두번 사용

 

 

단축 평가

---

- 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략

 

1. 논리 연산자

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

 

&&(논리곱) 연산자

- 좌항에서 우항으로 평가가 진행

- 전부 true인 경우 제일 우항의 값을 반환

'CAT'&&'DOG' // 'DOG'

- 첫번째 false가 되는 값 반환

'CAT'&&''&&'DOG' // ''
'CAT'&&false&&'' // false

- 조건이 Truthy값일 때 로직을 실행한다면 if문을 대체 가능

var done = true;
var message = '';

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

// 논리곱으로 if문 대체
message = done&&'완료';

 

||(논리합) 연산자

- 좌항에서 우항으로 평가가 진행

- 첫번째로 true가 되는 값을 반환

'CAT'||'DOG' // 'CAT'
''||'CAT'||''||'DOG' // 'CAT'

- 전부 false일 경우에는 제일 우항의 값 반환

''||''||false||undefined // undefined

- 조건이 Falsy값일 때 로직을 실행한다면, if문을 대체 가능

var done = false;
var message = '';

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

// 논리합으로 if문 대체
message = done||'미완료';

 

활용방안

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

var elem = null;
var value = elem.value; // TypeError...

// 단축 평가 적용
var elem = null;
var value = elem && elem.value; // null, TypeError 발생하지 않음.

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

// 단축 평가로 매개변수의 기본값 설정
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

 

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

- ES11에서 도입

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

- 객체를 가리키는 변수가 null 또는 undefined인지 확인하고 프로퍼티를 참조할 때 유용

var elem = null;
var value = elem?.value; // undefiend

- 논리연산자보다 유용한 경우 (' '(빈문자열)이 객체로 평가될 때)

var str = '';

var length = str&&str.length;
console.log(length); // '', 문자열의 길이를 참조하지 못함

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

 

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

- ES11에서 도입

- 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자 반환, 그렇지 않으면 좌항의 피연산자 반환

- 변수의 기본값을 설정할 때 유용

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

 

 

 

 

출처

- 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리