[JavsScript] 자바스크립트의 마법사: Unary Plus(+) 연산자 활용법

| 서론

let num = '123';
console.log(+num);

 

123을 문자가 아닌 숫자로 출력하려고 하는데, 혹시 위의 코드에서 의문이 드시는 점이 있으신가요? 

저는 이 코드를 봤을 때, "문자가 아닌 숫자로 형변환은 어디서하지? +는 왜 있지?"라는 생각이 가장 먼저 들었습니다.

 

이처럼, 자바스크립트 코드를 보다 보면 변수 앞에 뜬금없이 + 기호가 붙어 있는 것을 본 적이 있을 겁니다. 이것을 Unary Plus(단항 더하기) 연산자라고 부릅니다. 단순히 숫자를 더하는 기호가 아니라, 실전에서는 강력한 형 변환 도구로 사용됩니다.

 

오늘은 Unary Plus에 대해서 다뤄보려고 합니다.

 

 

 

| Unary Plus(+)란 무엇인가?

단항 연산자 +는 피연산자 앞에 위치하여 해당 값을 숫자(Number) 타입으로 변환하려고 시도합니다.

 

내부적으로는 Number(value)를 호출하는 것과 동일하게 작동하지만, 문법이 훨씬 간결하다는 장점이 있습니다.

 

let value = "123";
console.log(+value); // 123 (Number)
console.log(Number(value)); // 123 (Number)

 

 

 

 

| 타입별 변환 결과 (Cheat Sheet)

이 표는 자바스크립트 엔진이 내부적으로 어떻게 타입을 다루는지 보여주는 지표입니다.

단순히 외우기보다는 '값이 존재하지 않거나 비어 있으면 0, 해석이 불가능하면 NaN'이라는 규칙을 기억하면 쉽습니다.

 

입력 값 (Value)	결과 (+Value)	비고
true	1	Boolean → Number
false	0	Boolean → Number
"10"	10	숫자 형태의 문자열
"3.14"	3.14	소수점도 유지
"" (빈 문자열)	0	주의! 0으로 변환됨
"abc"	NaN	숫자로 바꿀 수 없는 문자열
null	0	Null은 0으로 취급
undefined	NaN	정의되지 않음은 숫자가 아님
[]	0	빈 배열은 0
[5]	5	요소가 하나인 배열은 그 요소의 숫자값

 

 

 

 

| 실전 활용: 코딩 테스트와 현업 꿀팁

1) 문자열 배열을 숫자 합계로 구하기

: 코딩 테스트에서 문자열로 된 숫자를 다룰 때 reduce와 조합하면 코드가 극단적으로 짧아집니다.

const str = "12345";

// 일반적인 방법
const sum1 = [...str].reduce((acc, cur) => acc + Number(cur), 0);

// Unary Plus 활용 (가독성과 간결함)
const sum2 = [...str].reduce((acc, cur) => acc + +cur, 0); 

Tip: + +cur 처럼 띄어쓰기를 해주는 것이 좋습니다. ++로 붙여 쓰면 증감 연산자로 오해받아 에러가 발생할 수 있습니다.

 

 

2) Boolean을 0과 1로 즉시 치환

: 특정 조건이 참일 때 1점, 거짓일 때 0점을 부여해야 하는 로직에서 유용합니다.

const isPremium = true;
const bonus = +isPremium; // 1

// 조건문 대신 사용
return +str.includes("apple"); // 포함되면 1, 아니면 0 리턴

 

 

 

 

| 주의할 점: parseInt()와의 차이점

많은 초보자가 +와 parseInt()를 혼동합니다. 하지만 이 둘은 "엄격함"에서 차이가 납니다.

• Unary Plus (+): 전체 문자열이 완벽한 숫자여야 합니다. 조금이라도 문자가 섞이면 NaN을 반환합니다.
• parseInt(): 숫자로 시작하면 문자열 중간에 문자가 있어도 숫자만 뽑아냅니다.

const price = "100px";

console.log(+price);        // NaN (엄격함)
console.log(parseInt(price)); // 100 (유연함)

 

 

 

| 왜 사용하는가?

단순히 Number()의 대체재를 넘어, 현업에서 Unary Plus를 선호하는 이유는 크게 세 가지입니다.

1. 속도: Number() 함수 호출보다 미세하게 빠릅니다.
2. 간결함: 코드의 길이가 줄어들어 선언적인 느낌을 줍니다.
3. 전문성: JS 엔진의 작동 원리를 이해하고 사용하는 인상을 줍니다.

 

 

 

| 결론

Unary Plus(+)는 자바스크립트의 유연함과 강력함을 동시에 보여주는 연산자입니다.

• 핵심: 어떤 값이든 숫자 타입으로 강제 변환한다.
• 강점: 간결한 문법과 빠른 성능.
• 주의: NaN이 발생할 수 있는 '엄격한 변환'임을 인지하고 사용하자.

처음에는 + 기호가 낯설게 느껴질 수 있지만, 익숙해지면 자바스크립트 특유의 간결한 코드를 작성하는 데 큰 도움이 됩니다.