JS 스터디 9장

황상진·2022년 6월 17일

JavaScript

목록 보기

8/27

타입 변환과 단축 평가

타입 변환

개발자가 의도적으로 값의 타입을 변환시키는 것을 명시적 타입 변환, 타입 캐스팅

개발자가 의도 없이 표현식을 평가하는 과정에서 JS Engine에 의해 암묵적으로 타입이 자동 변환되는 것을 암묵적 타입 변환, 타입 강제 변환

명시적 타입 변환(explicit coercion)

개발자가 의도적으로 값의 타입을 변환시키는 것

예시

var x = 10;

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

문자열 타입으로 변환

new 연산자 없이 String 생성자 사용
String(1);
Object.prototype.toString
(1).toString();
문자열 연결 연산자를 이용하는 방법
1 + '';

숫자 타입으로 변환

new 연산자 없이 Number 생성자 함수 사용
Number('0');
parseInt, parsefloat 함수 사용 --> 문자열만 숫자 타입으로 변환 가능
parseInt('0');
+ 단항 산술 연산자 이용
+'0';
* 산술 연산자 이용
true * 1;

불리언 타입으로 변환

new 연산자 없이 Boolean 생성자 함수 사용
Boolean('x');
! 부정 논리 연산자를 두 번 사용
!!'x';

암묵적 타입 변환(implicit coercion)

개발자가 의도 없이 표현식을 평가하는 과정에서 JS Engine에 의해 암묵적으로 타입이 자동 변환되는 것

문자열 타입으로 변환

+ 연산자는 피 연사자 중 하나 이상이 문자열이면 문자열 연결 연산자로 동작
리터럴의 표현식 삽입 또한 평가 결과를 문자열 타입으로 암묵적 타입 변환

숫자 타입으로 변환

-, *, /와 같은 산술 연산자는 피 연산자 중, 숫자 타입이 아닌 피 연산자를 숫자 타입으로 암묵적 타입 변환
숫자 타입으로 변환 불가능한 경우 산술 연산 수행이 불가능하여 표현식의 평가 결과가 NaN이 된다.

불리언 타입으로 변환

JS Engine은 불리언 타입이 아닌 값을 Truthy 값 또는 Falsy 값으로 구분
Truth - true, Falsy - false

대표적 Falsy 값

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

var x = 10;

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

JS Engine은 표현식을 평가할 때 코드의 문맥에 부합하지 않는 다양한 상황에서 가급적 에러를 발생시키지 않도록 암묵적 타입 변환을 통해 표현식을 평가한다.

// 피연산자가 모두 문자열 타입이어야 하는 문맥
'10' + 2 // -> '102'출력
// 숫자2를 문자열 타입으로 변환

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

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

단축 평가

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

true || anything	//true
false || anything	//anything
true && anything	// anything
false && anything	// false

if(done) message = '완료';

message = done && '완료';

if(!done) message = '미완료';

message = done || '미완료';

message = done? '완료': '미완료';

객체를 가르키기를 기대하는 변수가 null 또는 undefined이면 TypeError가 발생하고 프로그램이 종료된다.
이를 보안하기 위항 방법

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

var elem = null;
var value = elem && elem.value
//elem이 null이나 undefined와 같은 Falsy값이면 elem으로 평가
//elem이 Truthy 값이면 elem.value로 평가

옵셔널 체이닝 연산자

?.로 사용하며 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환

var elem = null;

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

var value2 = elem && elem.value;
console.log(value2); // null


var str = '';

// 문자열 길이를 참조하는데 좌항 피연산자가 null또는 undefined가 아니기 때문에 우항의 프로퍼티 참조

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

null 병합 연산자

??로 사용하며 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환

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

// 만약 Falsy값인 0 이나 ''도 기본값으로 유효시, 예기치 않은 동작 발생 가능
var foo = '' || 'default string'; 
console.log(foo); // "default string"

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