코딩딩/Javascript

날것 - 타입 변환과 단축 평가

전낙타 2026. 4. 1. 21:07

개요

명시적 타입변환과 암묵적 타입변환이 있음
명시적 타입 변환은 타입 캐스팅이라고도 함
반대로 암묵적 타입변환은 타입 강제 변환이라고도 함

책에서는 잘 쓰면 가독성이 좋다고 하는데 난 이건 동의 못하겠음 ex) !!x -> boolean
암묵적 타입 변환은 앞에서 지겹도록 공부했으나 한번 더 확실하게 집고가자

핵심 개념

  • 명시적 타입 변환(타입 캐스팅): 개발자가 의도적으로 값의 타입을 변환
  • 암묵적 타입 변환(타입 강제 변환): 자바스크립트 엔진이 표현식을 평가할 때 자동 변환

암묵적 타입 변환 (Implicit Coercion)

자바스크립트는 문맥에 부합하지 않는 상황을 용납 못하는것같음
그냥 다 말이 되게 해

'10' + 2 // '102'

5 * '10' // 50

!0 // true
if (1) {} // 이것도 실행됨

문자열 타입으로 변환

이건 + 연산자랑 문자열이랑 붙이면 다 문자열로 바꿔버림

// 이런것도 가능
({}) + '' // '[object Object]' ㅋㅋ 어이가없네
Math + '' // '[object Math]'
[] + '' // ''
[10, 20] + '' // '10,20'
(function(){}) + '' // 'function(){}' 익명 함수도 예외는 없다
Array + '' // 'function Array() { [native code] }'

근데 딱 하나 Symbol 타입만 문자열로 변환을 못함

(Symbol()) + '' //  TypeError

왜일까?
심볼 타입의 목적은 애초에 유니크한 식별자라고 함
근데 str로 타입이 변환되는 순간 그 의미를 잃음

const s1 = Symbol('id');
const s2 = Symbol('id');

s1 !== s2 // true

String(s1) // "Symbol(id)"
String(s2) // "Symbol(id)" 고유성이 박살나버리는거임

그래서 암묵적 타입 변환이 금지되어있다고 함
근데 또 명시적으로는 허용임

Symbol('id').toString() // "Symbol(id)"
Symbol('id').toString() // "Symbol(id)"

참 손많이 가는 친구네

숫자 타입으로 변환

산술 연산자, 비교 연산자에서 들어가면 숫자타입으로 변환된다 (+는 str이 더 쌤)
그래서 일단 숫자 모양만 띄고있어도 연산해보려는 노력은 함 (해보기나 했어?)

1 - '1' // 0
1 * '10' // 10
1 / 'one' // NaN <- 심지어 NaN도 숫자는 숫자다

산술 연산자는 숫자로, 비교 연산자는 불리언으로 값 만들어버림

단항 연산자도 숫자 타입으로 만들기는 매한가지

true, false도 1, 0 으로 바꿔버리고 안되는건 NaN으로 만든다 ex) +undefined

근데 또 웃긴게 +[] 은 0으로 치환되는 ㅋㅋ

+[] // 0
+{} // NaN <- 얘는 객체라 그렇다 쳐
+[10, 20] // NaN
+[10] // 10 아오 ㅋㅋ

배열은 객체라 primitive 타입으로 바뀐다고 함
보통은 toString으로 가게 되는데 그럼 "" 빈 문자열
그럼 0인것임 ㅋㅋ
그래서 10만 들어있을땐 10으로 변환이 된다
변환 많이된다~~

명시적 타입 변환 (Explicit Coercion)

문자열 타입으로 변환

String(), toString(), 템플릿 리터럴 을 사용하는 방법이 있는데 앵간하면 toString 쓰자
String() 은 null, undefined도 string으로 만들어버림
에러가 절 대 안 터진다는 것
근데 toString()은 에러가 터짐 문제를 사전에 발견하던가 error를 명시적으로 핸들링할 수 있음

숫자 타입으로 변환

Number(), parseInt(), + 단항 연산자, * 산술 연산자 를 사용하는 방법이 있는데 이것도 parseInt 쓰는게 좋아보임
parseInt는 문자열만 변환 가능함
난 개인적으로 타입을 명시하고 기대하는 타입이 아니면 에러를 발생시키는게 맞는 패턴이라고 생각함
자바진영에 오래 있어서 그런가 그냥 그럼
반박시 당신말이 맞음 (진짜입니다)

불리언 타입으로 변환

Boolean(), !! 이중 부정 이 있음
이중부정은 처음봤을때 그 충격이 어마어마 했었지
뭔 이런문법이 다있지
근데 개인적으로 실무에서는 불리언 타입은 암묵적 타입 변환에 많이 의존하는것같음
불리언은 의미 중심 타입이라 암묵 변환이 자연스럽게 읽혀서인가? 몰루겠음...
근데 본능적으로 불리언 암묵적 타입 변환은 딱 보면 알수있음

단축 평가 (Short-Circuit Evaluation)

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

&&, || 의 동작 원리 — 불리언이 아닌 피연산자의 값을 반환함
다행히도 값을 변환하는 제어 연산자이지 | | 이런식으로 두번 작동하는 괴랄한 내부동작은 없다고 한다
아래 예제를 보자

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

쉽게 생각하면 || 연산자는 첫번째 게 True로 평가될 수 있다면 바로 return
&& 연산자는 두번째 값까지 평가하고 끝에 있는 값을 return

// a && b
if (!a) {
  return a;
} else {
  return b;
}

// a || b
if (a) {
  return a;
} else {
  return b;
}

로 풀어쓸 수 있음
특히 && 연산자는 실무에서 조건부 랜더링을 할때 요긴하게 사용하는 중 (가독성 GOAT)

추가로 null, undefined도 잘잡는다고 함

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

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

function getStringLength(str) {
	str = str || ''; // 가독성 GOAT ㅋㅋ
	return str.length;
}

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

이건 여기서 한번 더 압축함 가루삽겹살 같은 느낌

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

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

마찬가지로 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조함
논리 연산자 &&는 좌항 피연산자가 false로 평가되는 Falsy값이면 좌항 피연산자를 그대로 반환한다.
0이나 ''같은 Falsy 값은 null/undefined가 아님에도 &&에서 걸려버리는 문제가 있다

var str = '';
var length = str && str.length;

console.log(length); // ''

str은 빈 문자열이라 Falsy이므로 && 연산자가 좌항 ''을 그대로 반환한다
뒤에 있는 .length는 호출되지도 못함

사용자가 기대한 0이라는 결과를 받아볼 수 없다는 것

뭔가 애매한데 이걸 한번 더 걸러주는게 옵셔널 체이닝 연산자임

var str = '';
var length = str?.length;

console.log(length); // 0

얘는 null, undefined가 아니면 우항의 프로퍼티 참조를 이어간다고 함

null 병합 연산자 (??)

||는 좌항이 Falsy면 우항을 반환하지만, ??는 좌항이 null 또는 undefined일 때만 우항을 반환한다

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

|| 와의 핵심 차이:

var a = '' || 'default';   // 'default' — ''는 Falsy라 우항 반환
var b = '' ?? 'default';   // ''        — ''는 null/undefined가 아니라 좌항 유지

var c = 0 || 100;          // 100       — 0은 Falsy
var d = 0 ?? 100;          // 0         — 0은 null/undefined 아님

0이나 빈 문자열을 유효한 값으로 쓰고 싶을 때 ??를 사용하면 된다
근데 가독성적인 측면에서 난 잘 몰루겠다

핵심 포인트

  • 암묵적 타입 변환은 문맥에 따라 ToString, ToNumber, ToBoolean 추상 연산이 적용되며, 원본 값은 변하지 않고 변환된 값이 일시적으로 사용된다
  • Symbol만 유일하게 암묵적 문자열 변환이 금지되어 있다 — 고유성 보장 목적
  • 단축 평가(&&, ||)는 불리언이 아닌 피연산자 자체를 반환하는 제어 연산자다
  • ?.는 null/undefined 체크에 특화, && 대비 Falsy 값(0, '')을 정상 통과시킨다
  • ??는 null/undefined만 걸러주므로, 0이나 ''을 유효한 값으로 유지해야 할 때 || 대신 사용한다

참고 자료

  • 모던 자바스크립트 Deep Dive 9장
  • 8장 제어문 — 조건문에서의 암묵적 타입 변환과 연결
반응형