[자바스크립트] 딥다이브) 타입변환과 단축평가

1) 타입변환 

 

- 명시적 타입변환 (= explicit coercion = 타입캐스팅 )

ㄴ개발자가 의도적으로 값타입 변환하는 것 

let x = 10;
let str = x.toString();  // '10' 숫자 => 문자열
String(1); // 1
Infinity + '' //'Infinity' 암묵적 타입변환을 의도적으로 이용

Number('0'); // 0
ParseInt('0'); // 0 문자열 => 숫자열 (문자열만 변환가능) 
parseFloat('10.2');  // 10.2. 문자열 => 숫자열 (문자열만 변환가능)
+'10';   // 10 문자열 => 숫자열
'10' * 1 // 10 문자열 => 숫자열
+true;   // 1 boolean => 숫자열
true * 1 // 1 boolean => 숫자열

Boolean('x'); //true
Boolean('');  //false
Boolean({});  //true
Boolean([]);  //true
!!'x';      //true
!!'';       //false
!!0;        //false
!!1;        //true
!!Infinity; //true
!!null;     //false
!!undefined;//false
!!{}        //true
!![]        //true

 

- 암묵적 타입변환 (= implicit coercion = 타입강제변환)

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

let x = 10;
let str = x + ""; //숫자가 문자열로 변경됨

"10" + 2 //"102" 문자열 타입으로 변환

5 * '10' //50
!0 // true
if(1) {} //true라면

  - 1) 문자열로 타입변환

숫자 + '' = 문자열

boolean + '' = 문자열 

null + '' =문자열 

undefined + '' = 문자열

symbol + '' = 타입에러 

객체 + '' = 문자열

(function(){}) + '' = 'function(){}'

Array + '' = 'function Array(){ [native code] }'

 

  - 2) 숫자 타입으로 변환

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

+'' //0
+'0' //0
+'1' //1
+'string'  // NaN
+true  // 1
+false // 0
+null  //0
+undefined  // NaN
+Symbol()   // typeError
+{}         // NaN
+[]         // 0
+[10, 20]   // NaN
+(function(){}) // NaN

 

  - 3) boolean으로 타입변환

ㄴ자바스크립트엔진은 boolean아닌 값을 truthy/ falsy로 구분함  => 암묵적 타입변환 

if('') console.log(1);
if(true) console.log(2);
if(0) console.log(3);
if('str') console.log(4); //빈문자열아닌 문자열은 truthy
if(null) console.log(5);
//2 
//4

 

2) 단축평가 

 

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

ㄴ if 문 대체 가능 

 

&&는 피연산자가 모두 true로 평가 될때 true를 반환 

첫번째 피연산자 고양이가 truthy이기 때문에 두번째 피연산자까지 평가해 보아야 함  

논리 연산의 결과를 결정하는 피연산자를 그대로 반환

'고양이' && '강쥐' // '강쥐'
false && '강쥐'  // false

let message = '';

if (true) message = '완료';

message = true && '완료';

 

|| 는 두개의 피연산자중 하나만 true로 평가되어도 true 반환

첫번째 피연산자 고양이가 truthy이기 때문에 두번째 피연산자 평가하지 않아도 표현식 평가가능 

'고양이' || '강쥐'  // '고양이'
false || '고양이'  // '고양이'

let message = '';

if(!true) message = '미완';

message = !true || '미완';

 

객체를 가리키기를 기대하는 변수값이 객체가 아니라 null이나 undefined인지 확인하고 참조하고 싶을 때 

let el = null;
let value = el.value         // typeError
let value = el && el.value;  // null

 

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

ㄴ함수호출시 인수를 전달하지 않으면 매개변수에는 undefined 할당 되어 에러 날수 있는데 

매개변수의 기본값을 설정해서 에러 방지 할수 있음 

function 문자열길이내놔 (str){  // (str ='') <= ES6에서는 매개변수 기본값 직접 설정가능 
	str = str || '';   //단축평가를 이용한 매개변수 기본값설정
    return str.length; 
  }
  
문자열길이내놔();     // 0
문자열길이내놔('hi'); // 2

 

 

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

ㄴES11

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

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

let el = null;
let value = el?.value; //undefined
let VALUE = el && el.value; // null

다만 &&는 좌항의 피연산자가 falsy인 값(false, undefined, null, 0 , -0, NaN, '')이면 좌항의 피연산자를 그대로 반환함 

let str = '' ;
let length = str?.length;   // 0   => 좌항이 falsy여도 null또는 undefined가 아니면 프로퍼티 참조함
let LENGTH = str && str.length; //''  => 문자열의 길이를 참조하지 못 함

 

 

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

ㄴES11

ㄴ좌항의 피연산자가 null또는 undefined경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환

ㄴ변수의 기본값 설정시 유용 

let name = null ?? 'default'; //'default'

let NAME = '' || 'default';   // 'default' <=공백자체도 유효한 값이어야 하는 경우엔 ||단축평가 안좋음 

let MyName = '' ?? 'default';  // '' <=좌항이 null이나 undefined아니면 falsy한 값도 그대로 반환됨