9. 타입 변환과 단축 평가

in 모던자바스크립트




타입 변환이란?

  • 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환, 또는 타입 캐스팅이라 한다.
  • 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 js 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다. (암묵적 타입 변환, 타입 강제 변환)
  • 명시적,암시적 타입 변환이 기존 원시값을 직접 변경하지는 않는다. (원시값은 immutable value)
  • 타입 변환 : 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것
  • 암묵적 타입 변환은 기존 변수 값을 재할당하여 변경하는 것 x
  • js엔진은 표현식을 에러없이 평가하기 위해, 피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한번 사용하고 버린다.
  • 명시적 타입 변환은 개발자의 의도로 분명히 드러나지만, 암묵적 타입 변환은 드라나지 않기 때문에, 코드를 예측할 수 있어야 한다..!
    • 그럼 명시적으로만 하는게 좋은 거 아냐? No! 10 + “” 이게 더 가독성이 좋잖아!
    • 암묵적 형변환이 때로는 가독성 측면에서 더 좋을 수 있다.

암묵적 타입 변환

  • js엔진이 표현식을 평가할 때, 개발자의 의도와는 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입ㅇ르 강제 변환할 때가 있다.
// 피연산자가 모두 문자열 타입이어야 하는 문맥
console.log("10" + 2); //102
// 피연산자가 모두 숫자 타입이어야 하는 문맥
console.log("10" * 5); //50
// 피연산자 또는 표현식이 불리언 타입이어야 하는 문백
console.log(!0); //true
if (1) {
} //true
  • 원래는 에러가 나야하지만 Js엔진에서 가급적 에러가 나지 않게끔 암묵적 타입 변환을 한다.
  • 암묵적 타입 변환이 발생하면, 원시 타입 중 하나로 타입을 자동 변환한다.

문자열 타입으로 변환

1 + "2" //12
    • 연산자는 피연산자중 하나 이상이 문자열이면 문자열 연결 연산자로 동작한다.
  • 문자열 연결 연산자의 역할은 문자열은 만드는 것
  • 따라서 모든 피연산자는 코드의 문맥상 모두 문자열 타입이어야 한다.
  • 연산자 표현식의 피연산자만이 암묵적 타입 변환의 대상이 아니다!
  • 템플릿 리터럴의 표현식 삽입은 표현식의 평가 결과를 문자열 타입으로 암묵적 형 변환한다.
`1 + 1 = ${1 + 1}` // "1 + 1 = 2"

console.log(0 + "") //0
console.log(-0 + "") //0
console.log(1 + "") //1
console.log(-1 + "") //-1
console.log(NaN + "") //NaN
console.log(Infinity + "") //Infinity
console.log(-Infinity + "") //-Infinity
console.log(true + "") //true
console.log(false + "") //false
console.log(null + "") //null
console.log(undefined + "") //undefined
// console.log(Symbol() + "") //TypeError: Cannot convert a Symbol value to a string
console.log({} + "") //[object Object]
console.log(Math + "")//[object Math]
console.log([] + "") //""
console.log([10,20] + "") //10,20
console.log(function(){} + "") //function(){}
console.log(Array + "") //function Array() { [native code] }

숫자 타입으로 변환

  • 산술 연산자의 역할은 숫자 값을 만드는 것 (-, * /, %)
  • 모든 피연산자는 코드 문맥상 모두 숫자여야 한다.
  • 피연산자중 숫자 타입이 아닌 피연산자를 숫자타입으로 암묵적 타입 변환을 한다.
  • 숫자 타입으로 변환할 수 없는 경우 NaN
  • 비교 연산자에서도 피연산자를 숫자 타입으로 암묵적 타입 변환을 한다.
"1" > 0 /// true
  • 비교 연산자의 역할 : 불리언 값 만드는 것
  • 비교 연산자는 피연산자의 크기를 비교하므로, 모든 피연산자는 문맥상 숫자 타입이어야 한다.
console.log(+"") //0
console.log(+"0") //0
console.log(+"1") //1
console.log(+"string") //NaN
console.log(+true) //1
console.log(+false) //0
console.log(+null) //0
console.log(+undefined) //NaN
console.log(+Symbol()) //TypeError: Cannot convert a Symbol value to a number
console.log(+{}) //NaN
console.log(+[]) //0
console.log(+[10,20]) //NaN
console.log(+(function(){})) //NaN

불리언 타입으로 변환

  • 조건식은 불리언 값이 되어야 하는 표현식이다.
  • js 엔진은 불리언 타입이 아닌 값을 Truthy 값 (참으로 평가되는 값) 또는 Falsy(거짓으로 평가되는 값)으로 구분한다.
  • 불리언 값으로 평가되어야 할 문맥에서 Truthy 값은 true, Falsy값은 false로 암묵적 타입 변환 된다.
  • falsy 값 : false, undefined, null, 0, -0, 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)
if ([]) console.log(6)
if ({}) console.log(7)
if ('0') console.log(8)

// 2
// 4
// 6
// 7
// 8

명시적 타입 변환

  • 개발자의 의도에 따라 명시적으로 타입을 변경하는 방법
  • 표준 빌트인 생성자 함수(String, Number, Boolean) 을 new 연산자 없이 호출하는 방법
  • 빌트인 메서드를 사용하는 방법
  • 암묵적 타입 변환을 이용하는 방법

문자열 타입으로 변환

  • String 생성자 함수를 new 연산자 없이 호출
  • Obejct.prototype.toString 메서드 사용
  • 문자열 연결 연산자를 사용하는 방법
console.log(String(12))
console.log(String(NaN))
console.log(String(true))

console.log((1).toString())
console.log((NaN).toString())
console.log((true).toString())

console.log(1 + "")
console.log(NaN + "")
console.log(true + "")

숫자 타입으로 변환

  • Number 생성자 함수를 new 연산자 없이 호출
  • parseInt, parseFloat 함수를 사용 (문자열만 숫자 타입으로 변환 가능ㄴ)
    • 단항 산술 연산자 이용
    • 산술 연산자 이용
Number("0"); //0
Number("-1"); //1
Number("true"); //1
Number("false"); //0

// 문자열만 사용 가능
parseInt("0"); //0
console.log(parseInt("-1")); //-1
console.log(parseInt(true)); //NaN
console.log(parseInt("false")); //NaN

console.log(+"0"); //0
console.log(+"-1"); //-1
console.log(+true); //1
console.log(+false); //0

console.log("0" * 1); //0
console.log("-1" * 1); //-1
console.log(true * 1); //1
console.log(false * 1); //0

불리언 타입으로 변환

  • Boolean 생성자 함수를 new 연산자 없이 호출
  • ! 부정 논리 연산자를 두번 사용하는 방법
console.log(Boolean("x")); //true
console.log(Boolean("")); //false
console.log(Boolean(false)); //false
console.log(Boolean(0)); //false
console.log(Boolean(1)); //true
console.log(Boolean(NaN)); //false
console.log(Boolean(Infinity)); //true
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean([])); //true
console.log(Boolean({})); //true

console.log(!!"x");
console.log(!!"");
console.log(!!false);
console.log(!!0);
console.log(!!1);
console.log(!!NaN);
console.log(!!Infinity);
console.log(!!null);
console.log(!!undefined);
console.log(!![]);
console.log(!!{});

console.log(!!-5); //true

단축 평가

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

  • 논리합, 논리곱 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다.
  • 논리합, 논리곱 연산자의 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다
  • 논리곱 연산자는 좌항 > 우항 평가
  • 논리곱 연산자는 논리 연산의 결과를 결정하는 두번째 피연산자, 즉 문자열 dog를 그대로 반환한다.
console.log('cat' && 'dog') //dog
console.log('cat' || 'dog') //cat
console.log(false || 'dog') //dog
  • 논리합 연산자도 좌항 > 우항 평가
  • 첫번째 피연산자인 cat에서 이미 true 확정이므로 논리 연산의 결과를 결정한 첫 번째 피연산자 cat 반환
  • 논리합, 논리곱은 피연산자 타입을 변환하지 않고 그대로 반환한다. (=== 단축 평가)
  • 단축 평가 : 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것
  • true anything > true
  • false anything > anything
  • true && anything > anything
  • false && anything > false
  • 단축 평가를 사용하면 if문을 대체할 수있다.
  • 어떤 조건이 Truthy 값일 때, 무언가를 해야한다면 논리곱 연산자로 if 문 대체 가능하다
var done = true
var message = ""

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

// if (done) message = '완료'
  • 어떤 조건이 Falsy값일때, 무언가를 해야한다면 논리합 연산자로 if문 대체 가능하다.
var done = false;
var message = "";

message = done || "미완료";
done || ?? > 이 표현식의  평가값을 알고싶은데 done 이 false면 뒤를 알아야해! 그래서 뒤가 수행되어야해!
// 평가값으로 나가는 것은 실행이 된다.
console.log(message); //미완료

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

단축 평가가 유용하게 사용될 때

  • 객체를 가리키기를 기대하는 변수가 null / undefined가 아닌지 확인하고 프로퍼티를 참조할 때
var elem = null;
var value = elem && elem.value;
// elem 이 참인 값이면, value = elem.value
// 거짓인 값이면 value = elem(null)
  • 함수 매개변수에 기본값을 설정할 때
// 함수 호출시 인수를 전달하지 않으면 매개변수에는 undefined 할당. > 에러 유발
function getStringLength(str) {
  str = str || "";
  return str.length;
}

getStringLength() // 0
getStringLength('hi') // 2

// es6부터는
function getStringLength(str = "") {
  return str.length;
}

옵셔널 체이닝 연산자

  • ES11에 도입. ?.
  • 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티를 참조
var elem = null;
var value = elem?.value;
console.log(value); //undefined
  • 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참ㅉ조할 때 유용
  • 도입 이전에는 &&를 사용한 단축 평가로 함.
  • 단축 평가는 Falsy값이면 false로 판단하여 좌항 피연산자를 그대로 반환
  • 옵셔널 체이닝은 Falsy값이어도 null, undefiend가 아니면 우항의 프로퍼티 참조를 이어간다.
var str = "";
var value = str && str.length;
console.log(value); //""(빈문자열)

var length = str ?.length;
// str ? (str.length)가 생략된 개념
console.log(length) //0

null 병합 연산자

  • ES11 에 도입 ??
  • 좌항의 피연산자가 null 또는 undefined인 경우, 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.
  • 변수에 기본값을 설정할 때 유용
var foo = null ?? "default string";
console.log(foo); //default string
  • 이전에는 단축평가를 통해 기본값을 설정
  •  사용할 경우, 좌항의 피연산자가 Falsy값이면 우항의 피연산자를 반환
  • 만약 Falsy 값인 0이나 ““이 기본값으로서 유효한 경우라면, 예기치 못한 동작 발생할 수 있다.
var foo = "" || "default string";
console.log(foo); //default string

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