자바스크립트 암묵적 타입 변환

자바스크립트의 암묵적 타입 변환은 파이썬을 배웠던 나로선 너무 불편했다..

가벼운 시동 코드를 짠다면 편할 수 있지만.. 분명 코드가 15줄만 넘어도 헷갈릴 것 같다.

백준 문제를 풀다가 암묵적으로 타입 변환이 일어나 정답이 아닌줄 알았는데 정답이 되어서 몸소 체험해보니 모던 자바스크립트 딥 다이브 책에서 알게 된 암묵적 타입 변환에 대해서 따로 정리를 하자는 마음으로 글을 씁니다!

---

https://dev.to/promhize/what-you-need-to-know-about-javascripts-implicit-coercion-e23

What you need to know about Javascript's Implicit Coercion

 

implicit coercion 임플리싯 코워션 

암묵적 타입 변환

 

- 이항 연산자가 좌항과 우항의 데이터 타입이 다를 때, 혹은 일항 연산자나 그룹 연산자가 나올 때 데이터 타입이 개발자의 의도가 드러나지 않은 상태로 데이터 타입이 변환된다. 그래서 알아차리기 어렵고, 유지보수 단계에서 문제가 생길 수 있어서 되도록 피하는게 좋다. 타입스크립트가 그래서 대안이 되지 않을까..? 싶다

 

// 곱하기는 숫자로 변환
3 * "3" //9 

// 더하기는 문자열로 변환
1 + "2" + 1 //121

// 불린 데이터 타입은 더하기에서 숫자로 변환
true + true //2
// 빼기는 숫자로 변환 (불린 포함)
10 - true //9


const foo = {
  valueOf: () => 2
}
3 + foo // 5
4 * foo // 8

const bar = {
  toString: () => " promise is a boy :)"
}
1 + bar // "1 promise is a boy :)"


4 * [] // 0
4 * [2] // 8
4 + [2] // "42"
4 + [1, 2] // "41,2"
4 * [1, 2] // NaN

"string" ? 4 : 1 // 4
undefined ? 4 : 1 // 1

숫자 변환 방법

// 숫자로 변환 방법들
3 * "3" // 3 * 3
3 * Number("3") // 3 * 3
Number("5") // 5

Number("1.") // 1
Number("1.34") // 1.34
Number("0") // 0
Number("012") // 12

// 숫자로 변환 불가능한 사례
Number("1,") // NaN
Number("1+1") // NaN
Number("1a") // NaN
Number("one") // NaN
Number("text") // NaN

string concatenation 하는 방법

// concatenation
1 + "2" // "12"
1 + "js" // "1js"

// addition
1 + 2 // 3
1 + 2 + 1 // 4

//addition, then concatenation
1 + 2 + "1" // "31"
(1 + 2) + "1" // "31"

//concatenation all through
1 + "2" + 1 // "121"
(1 + "2") + 1 // "121"

자바스크립트 객체Object 활용

const baz = {
  toString: () => "I'm object baz"
}

baz + "!" // "I'm object baz!"

- 자바스크립트의 객체는 toString 메소드를 상속한다.

 

배열 객체

[1, 2, 3].toString() // "1,2,3"
[1, 2, 3].join() // "1,2,3"
[].toString() // ""
[].join() // ""

"me" + [1, 2, 3] // "me1,2,3"
4 + [1, 2, 3] // "41,2,3"
4 * [1, 2, 3] // NaN

 

정리하다보니 더이상 정리하는 것은 무의미하다는 생각이 들었다. 이런 암묵적 타입 변환을 의도하는 부분은 코드의 가독성을 낮추는 문제가 있다는 생각이 들어서 이정도면 코드를 파악하는데 충분할 것 같다.

 

헷갈리거나 모를 때 찾아보자!