[ 모던 자바스크립트 스터디 ] 암묵적 타입 변환 & 명시적 타입 변환

지난 포스팅에서 다뤘던 

암묵적 타입 변환이 행해지는 문자열, 숫자, 불리언 타입을 자세하게 하지 못했던 것 같아서

다시 포스팅해보려고 한다.

 

문자열 타입 변환

 

+ 연산자는 피연산자 중 하나 이상이 문자열이라면 문자열 연결 연산자로 동작한다.

따라서 아래 코드는 문자열 '22' 를 반환한다.

 

2 + '2'

 

 

자바스크립트 엔진은 문자열 연결 연산자 표현식을 평가하기 위해 숫자타입 2 를 암묵적으로 문자열으로 변환 시키는 것이다.

 

아래는 헷갈릴 수 있는 암묵적 문자열 타입변환 케이스이다.

 

true + '' // "true"
false + '' // "false"

null + '' // "null"

undefined + '' // "undefined"

(Symbol()) + '' // TypeError: Cannot convert a Symbol value to a string

({}) + '' // "[object Object]"
[] + '' // ''
[10, 20] + '' // "10, 20"
(function(){}) + '' // "function(){}"
Array + '' // "function Array() {[native code]}"

 

내가 생소한 부분은(개인적으로 왜 언어가 이렇게 만들어졌냐,,, 하고 생각하는 부분은)

 

array 부분이다.

 

우선 여기서 빈 배열은 빈 문자열과 똑같은 결과이다.

자 이걸 머리에 심고 우선 다음 파트로 넘어가보겠다.

 

 

숫자 타입 변환

 

+ 연산이 아닌 산술연산자는 전부 암묵적 숫자타입 변환이 이루어질 수 있다.

 

아래의 예시를 보면 바로 이해가 갈 것이다.

 

3 - '2' // 1
3 * '10' // 30

4 / 'a' // NaN

 

 

만약 해당 문자열이 숫자로 변환될 수 없는 값이라면 NaN 을 반환할 것이다.

 

 

아래는 헷갈릴 만한 암묵적 숫자타입 변환 케이스들이다.

 

+true // 1
+false // 0
-true // -1
-false // 0

+null // 0
+undefined // NaN

+Symbol() // TypeError: Cannot convert a Symbol value to a number

+{} // NaN
+[] // 0
+[10, 20] //NaN
+(function(){}) // NaN

 

 

불리언 타입 변환

 

아래 것들은 false 로 변환되는 값이다.

 

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

 

내가 정말 의아한 부분은, 왜 저기에 빈 배열이 들어가있지않지? 라는 궁금증이다.

아직 해결되지않아서 일단은 언어가 그럴 수도 있지 하는 관대한 마음.. 보다는 찾아보기 귀찮은 마음으로 알고 넘어가야겠다.

 

 

 

명시적 타입 변환

 

개발자의 의도가 듬뿍 들어간 명시적 타입변환은 그 방법이 다양하다.

표준 빌트인 생성자 함수를 new 연산자 없이 호출하거나, 빌트인 메서드를 사용하거나, 암묵적 타입 변환을 이용하거나...

 

여기서 표준 빌트인 생성자 함수는 객체 생성을 위한 함수이고(new 연산자와 함께 호출됨),

표준 빌트인 메서드는 자바스크립트에서 기본으로 제공하는 빌트인 객체의 메서드이다.

 

 

문자열 타입변환

 

방법 세개를 나열해보겠다.

 

• String 생성자 함수를 new 연산자 없이 호출
• Object.prototype.toString 메서드 사용
• 문자열 연결 연산자 이용(암묵적 타입 변환 이용)

 

 

첫번째 케이스는 굉장히 심플하고 직관적이다.

아래 사용 예시와 같이 사용하면 된다.

 

String(123); // "123"

 

 

두번째 Object.prototype.toString 메서드를 이용하는 방법은 아래와 같다.

 

(123).toString();

 

 

세번째 케이스인 문자열 연결 연산자 이용은 위에서 다룬 것 처럼 + 연산을 이용하면 된다.

 

 

숫자 타입 변환

 

사실 숫자 타입 변환도 문자와 크게 다르지 않다.

 

• Number 생성자 함수를 new 연산자 없이 호출
• ParseInt, parseFloat 함수 사용
• + 단항 산술 연산자 이용
• * 산술 연산자 이용

 

Number('123'); // 123

ParseInt('123') // 123
ParseFloat('12.34') // 12.34

+'123' // 123
+'-123' // -123
+'12.34' // 12.34

+true // 1
+false // 0

'123' * 1 // 123
false * 1 // 0

 

 

 

불리언 타입 변환

 

• Boolean 생성자 함수 new 없이 호출
• ! 부정 논리 연산자 두 번 사용

 

Boolean('123'); // true
Boolean('false'); // true
Boolean(0); //false

!!'123' // true
!!null // false

 

 

 

자, 이렇게 형 변환과 관련된 포스팅은 정리가 된 것 같다!