[JavaScript] 3. 형변환

 

 

자바스크립트의 '묵시적 형변환(Implicit Type Conversion)'은 프로그래밍 언어가 데이터 타입을 자동으로 바꾸어 계산하는 아주 편리하지만 주의해야 할 기능이다. 

 

.

1. 덧셈(+) 연산자: "문자열이 깡패다"

자바스크립트에서 + 연산자는 문자열이 하나라도 섞이면, 숫자를 문자열로 바꿔서 이어 붙여버린다. 이를 '문자열 연결'이라 한다.

• console.log(1 + "1");
  • 숫자 1과 문자열 "1"이 만났다. 자바스크립트는 숫자 1을 문자열 "1"로 변환한 뒤, 두 문자열을 붙인다.
  • 결과: "11" (문자열)
• console.log("5" + 3);
  • 문자열 "5"와 숫자 3이 만났다. 역시 숫자 3을 문자열 "3"으로 변환하여 이어 붙인다.
  • 결과: "53" (문자열)

2. 뺄셈(-), 곱셈(*), 나눗셈(/) 연산자: "숫자가 우선이다"

덧셈과 달리, 뺄셈이나 곱셈은 문자열로 계산할 수 없기 때문에, 자바스크립트는 문자열을 숫자로 바꿔서 수학 계산을 시도한다.

• console.log(1 - "1");
  • 문자열 "1"을 숫자 1로 변환, 1 - 1을 계산
  • 결과: 0 (숫자)
• console.log("5" * "2");
  • 문자열 "5"와 "2"를 각각 숫자 5와 2로 변환,. 5 * 2를 계산
  • 결과: 10 (숫자)

3. 마지막 문제: true - "20"

. 자바스크립트에서 true는 숫자 1로, false는 0으로 취급

• console.log(true - "20");
  • true는 숫자 1로 변환
  • "20"은 숫자 20으로 변환됩
  • 결과: 1 - 20이 되어 -19가 출력

요약하자면

• +: "문자열이 하나라도 있으면 다 문자열로 합치자!"
• -, *, /: "수학 계산을 해야 하니 일단 다 숫자로 바꿔보자!"

 

 

 

 

<명시적 형변환>

명시적(Explicit) 형변환은 말 그대로 "내가 직접 타입을 바꾸겠어!"라고 개발자가 코드로 의도를 명확하게 드러내는 것이다.

 '암묵적 형변환'이 JS 엔진이 몰래(자동으로) 바꾸는 것이라면, 명시적 형변환은 함수나 기호를 사용해 개발자가 강제로 형식을 지정하는 것입으로 이해하면 된다. 

 

예시로 보는 명시적 형변환의 이유

1. Number("123")

• 의도: "이 문자열 데이터를 반드시 숫자로 처리하겠다."
• 이유: typeof를 찍어보면 확실히 string이었던 값이 number로 바뀜. 연산 시 에러를 방지하기 위해 사용

2. parseInt("12px")

• 의도: "이 문자열 앞부분에 있는 숫자만 추출해서 정수(Integer)로 쓰겠다."
• 이유: "12px"라는 문자열에서 숫자 12만 쏙 뽑아내어 계산에 쓰고 싶을 때 사용합니다. Number("12px")를 쓰면 NaN(Not a Number, 숫자가 아님)이 나오는데, parseInt를 쓰면 똑똑하게 숫자만 골라줌.

3. String(123)

• 의도: "숫자 123을 화면에 보여주기 위해 문자열로 바꾸겠다."
• 이유: 숫자를 그대로 쓰면 안 되고, 다른 글자와 합치거나 HTML에 텍스트로 넣어야 할 때 명확하게 문자열로 변환

4. Boolean(0)

• 의도: "숫자 0을 참(true)인가 거짓(false)인가 하는 논리값으로 변환하겠다."
• 이유: JS에서 0은 false로 취급됩니다. 이를 명시적으로 확인하고 싶을 때 사용

5. !!"hello" (이중 부정)

• 의도: "문자열을 확실한 true/false 값으로 바꾸겠다."
• 이유:
  • ! (부정): "hello"는 참인데 부정(!)하면 false가 됨
  • !! (이중 부정): false를 다시 부정하면 true가 됨
  • 즉, 어떤 데이터든 !!를 붙이면 그 데이터가 "참 같은 값(truthy)"인지 "거짓 같은 값(falsy)"인지 확실하게 true나 false로 바꿔주는 트릭

 

 

<암묵적 형변환(Implicit Type Conversion)>

은 자바스크립트 엔진이 개발자의 의도와 상관없이 "데이터의 형식이 맞지 않으니,

연산이 가능하도록 알아서 타입을 바꾸자!"라고 판단하여 자동으로 처리하는 과정.

이를 '타입 강제 변환(Type Coercion)'이라고도 부르는데,. 핵심은 '연산자'에 따라 자바스크립트가 어떤 전략을 취하느냐다.

 

1. + 연산자: "문자열이 우선이야"

+ 연산자는 덧셈도 하지만 문자열을 이어 붙이는(연결) 역할도한다.

자바스크립트는 둘 중 하나라도 문자열이 있으면, 나머지 하나도 문자열로 바꿔서 연결하는 것을 우선으로 한다.

• 1 + "1" → 1을 문자열 "1"로 변환 → "1" + "1" = "11"
• true + "1" → true를 문자열 "true"로 변환 → "true" + "1" = "true1"

2. -, *, / 연산자: "숫자가 우선이야" (앞에도 강조했지만...) 

이 연산자들은 오직 수학적 계산만을 위해 존재한다. 따라서 문자열이 섞여 있어도 일단 숫자로 변환하려고 시도한다.

• "5" * 2 → "5"를 숫자 5로 변환 → 5 * 2 = 10
• "10" - 5 → "10"을 숫자 10으로 변환 → 10 - 5 = 5

3. 논리 평가 (if, &&, ||): "참인지 거짓인지가 중요해"

if 문이나 논리 연산자(&&, ||) 안에서는 데이터의 값이 '참 같은 값(Truthy)'인지 '거짓 같은 값(Falsy)'인지가 중요하다. 그래서 모든 데이터를 불린(Boolean) 타입으로 평가한다.

• Falsy한 값 (거짓으로 평가되는 것들): 0, "" (빈 문자열), null, undefined, NaN, false
• Truthy한 값: 위를 제외한 나머지 전부 (심지어 "0" 같은 문자열도 참)

왜 암묵적 형변환을 조심해야 할까?

자바스크립트 엔진이 똑똑하게 변환해주지만, 때로는 개발자의 예상을 벗어나는 결과를 냄.

• [] + 1의 결과는 무엇일까요? 배열을 비우면 ""(빈 문자열)이 되어 "1"이 됨.
• null + 1은 어떻게 될까요? null을 0으로 변환하여 1이 됨

 암묵적 형변환은 편리하지만, "내가 의도하지 않은 결과"를 낳을 위험이 큼

 그래서 코드의 안전성을 위해서는 최대한 Number(), String() 등을 사용해 명시적으로 타입을 변환하는 것이 좋다.

 

 

<1 + "1"이 "11"인 이유>

자바스크립트에서 + 연산자는 두 가지 의미가 있다.

• 숫자 더하기: $1 + 2 = 3$
• 문자열 연결: "안녕" + "하세요" = "안녕하세요"

그런데 +의 한쪽이라도 문자열(String)이 있으면, 자바스크립트는 다른 한쪽도 문자열로 바꿔서 "연결"해 버림

• "1"은 문자열이므로, 앞에 있는 1도 문자열 "1"로 바뀐다.
• 결과적으로 "1" + "1"이 되어 "11"이 된다.

< "5" * 2가 10인 이유>

*(곱하기), -(빼기), /(나누기) 연산자는 오직 숫자 계산을 위해서만 존재합니다. 따라서 문자열 "5"가 섞여 있어도 자바스크립트는 "아, 이건 곱하기를 해야 하니까 문자열을 숫자로 바꿔야겠다!"라고 판단

• "5"를 숫자 5로 자동 변환
• $5 \times 2 = 10$

< true + 1이 2인 이유>

자바스크립트에서 불린(Boolean) 타입은 숫자와 계산될 때 true는 1로, false는 0으로 변환되는 약속

• true는 1로 바꿘다.
• $1 + 1 = 2$가 됨

 

한눈에 정리하는 규칙

상황	변환 방식	이유
+ 연산자	문자열 우선	문자열과 만나면 무조건 '연결'
*, -, /	숫자 우선	계산을 하려면 무조건 '숫자'여야 함
true	1로 변환	불린이 숫자와 계산될 때의 약속

처음엔 당황스럽겠지만, 이는 "사용자가 어떤 데이터를 넣든 에러를 내지 않고 최대한 결과를 만들어내겠다"는

자바스크립트의 철학 때문이다. 

하지만 이런 암묵적 형변환은 코드가 커지면 버그의 원인이 되기도 한다고, 

그래서 실무에서는 보통 Number("5") * 2처럼 명시적으로 타입을 바꾸는 것을 더 권장한다고 한다.