[JavaScript] 타입 변환과 단축 평가

 

 

안녕하세요, 성조입니다.

AI가 폭발적으로 성장하면서 개발자의 역량을 확인하기 어려운 시대에 개발자로 돌아온 만큼, 기본기를 안정화 하는 것이 중요하다 생각되어 초기에 학습했던 내용들을 하나씩 정리해 나아가보려 해요.

---

 

서론

JS(JavaScript)는 연산 과정에서 값을 자주 다른 타입으로 바꾸는(타입 변환이 가능한) 언어이다. 여기에 &&, ||, ??, ?. 같은 단축 평가/옵셔널 체이닝이 얹어지면 '불리언만 변환'한다고 착각하기 쉬운데 실제로 이 연산자들은 피연산자 '값 자체'를 직접 변환할 수 있기 때문에 사용된다. 다만, 자유도가 높으면 늘 역효과가 발생될 수 있기 때문에 웹 개발을 진행하다 보면 타입 스크립트라는 별도의 타입을 지정하여 개발을 진행하게 된다. 이번 포스팅에서는 자바스크립트(JS)에 대한 타입 변환과 함께 정리해 나아가는 것이므로 타입 스크립트를 딥하게 다루지 않는다.

 

 

타입 변환이란?

개발자가 의도적으로 값의 타입을 변환하는 것으로 명시적 타입 변환(Explicit) or 타입 캐스팅(type casting), 암묵적 변환(implicit coercion) or 타입 강제 변환(type coercion) 등으로 나눠진다.

명시적 변환과 암묵적 변환으로 크게 두가지 타이븡로 정의할 수 있는데 조금 더 이해하면 다음과 같이 나눠진다.

 

명시적 변환 - String(), Number(), Boolean(), 단항 +, 템플릿 리터럴 등 의도를 표현하기 위해 드러내는 변환을 뜻한다.

암묵적 변환 - 덧/곱셈, 느슨한 동등 표현 (==), 논리 연산 등 연산 규칙에 의해 자동으로 형이 변환되는 것을 뜻한다.

 

명시적, 암묵적 템플릿 리터럴 뒤에 객체를 변환하는 등의 다양한 변환 방법들이 존재한다.

 

더 깊게 학습하기를 원한다면 다음의 공식 문서에 추상 작업 - 유형 변환 값들까지 모두 번역하면서 학습하는 것도 방법이다.

https://tc39.es/ecma262/multipage/abstract-operations.html?utm_source=chatgpt.com

ECMAScript® 2026 Language Specification

(딥하게 학습하며 진행되면 이번 포스팅이 다른 길로 나아가기 때문에 생략한다.)

 

 

명시적 타입은 왜 사용하는가?

자바스크립트는 동적 타입 언어기 때문에(타스랑 다름) 타입을 명시하지 않는데 자스 프로젝트에서 명시적 타입은 '개발자의 의도'를 드러내는 것이므로 본인이 아닌 다른 개발자가 코드를 읽었을 때 '이 변수는 어떤 값이 들어와야 하는구나'하고 생각하고 이해할 수 있도록 도와주기 때문에 사용되는 것이다.

 

(포인트?) 개발자 문서도 없이 프로젝트 코드를 읽다보면 정말 어마어마하게 방대한 코드를 읽어야 하기 때문에 최소한으로 필요하다 생각된다.

 

다음과 같이 명시적으로 타입들을 코드로 보여줄 수 있다.

String(123) // '123' 문자열이 된다.
Number('45') // '45' 문자열이 -> 45의 숫자값으로 변화한다.
Boolean([]) // true 값으로 반환된다.
+'12.3' // 12.3 (단항 +) 값이 된다.
'' + 6 // '' 문자열과 + 숫자를 더하게 되면 명시적인 문자열로 변경한다는 의미이다. 즉, '6'의 값이 되며 6은 숫자가 아닌 문자로 형변환이 이뤄진다.

 

 

암묵적 타입 변환?

명시적 타입 변환과 다르게 자바스크립트 엔진이 자동으로 규칙에 맞게 타입을 변환하여 연산을 수행하는 것이다.

 

Falsy 값 목록

false, 0, -0, 0n, NaN, '', null, undefined

if, while, 논리 연산자 등의 조건문에서 자동으로 false 값으로 평가되어 반영된다.

 

 

Truthy 값 목록

if ('0') console.log('실행됨'); // 문자열 '0'은 truthy
if ([]) console.log('실행됨');  // 빈 배열도 truthy 값을 가져간다.

Falsy에서 정의된 값들을 제외하고 모두 true 값으로 평가되며, 비교식(==, &&, || -> 단축 평가(Short-circuit)라고 불리며, 논리 연산자라고도 불림)이나 조건문 같은 경우는 판단에 따라 내부적으로 자동 적용되어 참인지 거짓인지 값을 반환하게 된다.

 

암묵적 변환은 왜 사용하는가?

암묵적 변환은 코드를 빠르게 구현할 때 본인만 인지할 수 있는 프로젝트라면 매우 적합하게 사용하여 개선해 나아갈 수 있는 무기가 될 수 있기 때문에 사용되는 것이다. 실제로 유지보수성을 모두 내려놓고 실시간으로 생각을 줄이고 코딩한다면 빠르게 작성하는데 타입이 없다는 것은 편리하긴 하다. 하지만, 추후 리팩터링 또는 유지보수하는 단계에 접어들면 정말 상상도 하기 어려울 정도로 난이도가 올라가기 때문에 가급적이면 암묵적 변환을 난발하지 않는 것이 좋으며, 자스를 사용하는 프로젝트도 좋지만, MVP 개발까지 끝난 프로젝트의 경우 개발 속도가 조금 늦어지더라도 타입스크립트로 전환하거나 개발 문서화를 진행한 다음에 이어서 작업하는 것을 권장한다.

 

논리 연산자 정리하기

1) && (AND)

논리 연산으로 AND 조건문을 경험한 케이스가 많을 것이다.

자바스크립트에서는 첫 값과 두번 째 값 두개가 모두 참인 경우에만 마지막 값을 반환한다.

 

예시

'a' && 0 && 'b'   // 0
'a' && 'b'        // 'b'

 

 

2) || (OR)

자스에서 '||' 연산자는 첫 번째 또는 두번 째 중 참을 반환하는 방식이 아니다.

첫 참을 만나면 그 값을 반환하고, 모두 거짓이면 마지막 값을 반환하는 형식이다.

실무에서는 '기본값 초기화'에서도 자주 사용될 수 있지만, 0/''도 바꿔버리는 문제로 런타임 에러를 동반할 수 있기 때문에 주의하는 것이 좋다.

 

예시

0 || 'fallback'   // 'fallback'
'' || 123         // 123

 

 

3)  ?? (Nullish coalescing)

null 또는 undefined만 '비어있음'으로 간주하여 오른쪽으로 대체하는 방법이다. 

0/''/false는 유효한 값으로 유지해주는 방법이다.

 

예시 -> 조금 더 이해를 도우면 왼쪽 값이 null 또는 undefined일 때만 오른쪽을 반환한다는 의미이다. 

0 ?? 7        // 0
'' ?? 'x'     // ''
undefined ?? 'x' // 'x'

 

 

4) ?.

옵셔널 체이닝(?.)은 안전 접근, 기본값, 가드 패턴이 있다.

이 방법은 대상이 null, undefined라면 예외 대신 undefined를 반환하는 것이다.

 

예시 -> ?.(옵셔널 체이닝)

handler?.();

- handler가 함수일 때만 실행하고, 없다면(undefined/null) 그냥 undefined를 반환하고 에러 없이 넘겨주는 것을 말한다.

추가 예시

let handler;
handler?.(); // 아무 일도 안 일어남 (에러 안 남)

handler = () => console.log('실행!');
handler?.(); // "실행!"

함수가 존재하는지 여부를 매번 if (handler)로 체크할 필요 엇이 한 줄로 안전하게 실행할 수 있도록 만들어주는 것이다.

 

기본값 전략(Default Value Strategy)

// 모두 대체(0, ''까지 대체): OR
const page = input.page || 1;

OR (||) - 모든 falsy 값이면 대체하는 방법이다.

||는 왼쪽 값이 falsy면 오른쪽 값으로 대체한다. (false, 0, '', null, undefined, NaN 등의 값들이 반환 값일 때를 의미한다.)

 

예시

input.page = 0;
const page = input.page || 1;
console.log(page); // 1 (0은 falsy라 1로 대체됨)

0이나 빈 문자열도 없는 값으로 취급하고 있기 때문에 모든 값을 거짓의 반환 값으로 덮어씌워준다.

 

Null 병합 연산자(??) -> null, undefined만 대체한다.

const limit = input.limit ?? 20;

??는 오직 null 또는 undefined일 때만 오른쪽 값으로 대체하기 때문에 0이나 ''와 같은 값은 그대로 유지된다.

 

예시

input.limit = 0;
const limit = input.limit ?? 20;
console.log(limit); // 0 (유효한 값으로 간주.)

즉, 0이나 빈 문자열을 반환 받는 값이 들어와도 정상적인 올바른 값이라고 판단하는 경우에 유용하게 사용된다.

 

 

실행 가드(Execution Guards)

실행 가드는 조건이 참일 때만 실행하도록 만드는 패턴 방식이다.

ready && run();

ready가 참이면 run()이 실행되고, falsy이면 run()을 아예 평가하지 않고 넘어가게 만든다.

 

즉, 다음과 같이 나온다. (예시)

let ready = true;
ready && console.log("실행!"); // 실행됨

ready = false;
ready && console.log("이건 안 찍힘"); // 실행 안 됨

 

 

---

Truthy(참과 같은 즉, 참으로 평가되는 값), Falsy(거짓과 같은 값)은 다음의 번역된 좋은 문서를 읽어보면 도움될 것입니다.

https://developer.mozilla.org/ko/docs/Glossary/Falsy

거짓 같은 값 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

 

 

 

AI로 인해 미들급 개발자 시장까지 위기가 왔다고 볼 수 있지만, 다른 한편으로는 기회가 왔다고 생각되네요.

사수가 있고 학원을 다니면서 찾아봐야 했던 자료들을 더욱 빠르고 다양하게 접근하면서 학습할 수 있는 시기가 찾아온만큼 시대에 맞는 인재로 안광이 빛나는 사람이 될 수 있도록 성실히 성장해 나아가야겠습니다.

 

감사합니다.

다음 포스트에서 또 뵐게요.