jslounge 4번째 모임에서 발표한 내용입니다. (2013/02/26) about implicit coercion and type casting in JavaScript.

1. 자바스크립트의
암묵적인 강제형변환과
타입캐스팅
@ jslounge 4번째 모임
skplanet 김준기
13년 2월 27일 수요일

2. 암묵적인 강제형변환
• Dynamically(Weak, Loosely) Typed
Language의 특성
• 자바스크립트는 동적 타입 언어
• type error를 최소화
• 1 == true (간편하지 않나요?)
13년 2월 27일 수요일

3. common case
• 산술 연산자 (+, -, *, /)
•5 + “4”
•5 - “4”
• 비교 연산자 (==, >, >=, <=)
• true == “1”
• “123” > 1234
• if, ||, &&
• if (value)
• value = value || “test”;
• (test) && doSomething();
13년 2월 27일 수요일

4. 산술연산자
+ 연산자는 양쪽의 인자에 따라
• number type
• 또는 string 반환
기타 산술연산자 (-, *, /)
• 항상 number type을 반환
13년 2월 27일 수요일

5. +
• 1+2
• 1 + 2 + “3”
• 1 + “2” + 3
• “There are ” + 100 + 17 + “ people”
• "the Math object: " + Math
• 1 + (new Date())
13년 2월 27일 수요일

6. +
• 1 + 2 >> 3
• 1 + 2 + “3” >> “33”
• 1 + “2” + 3 >> “123”
• “There are ” + 100 + 17 + “ people”
>> “There are 10017 people”
• "the Math object: " + Math
>> "the Math object: [object Math]"
• 1 + (new Date())
>> "1Tue Feb 26 2013 00:00:00 GMT+0900 (KST)"
13년 2월 27일 수요일

7. +
양쪽이 모두 숫자일때만 덧셈수행
양쪽의 타입이 다른 경우,
• 문자열을 병합할수도
• 덧셈을 할수도 있음
• 이때 암묵적인 강제형변환을 시도
13년 2월 27일 수요일

8. 암묵적인 toString
13년 2월 27일 수요일

9. 숫자를 toString
NaN >> "NaN"
+0 || -0 >> "0"
0보다 작은 수이면 "-" + ToString()한 값.
Infinity >> "Infinity"
... (see ECMA-262 9.8.1)
13년 2월 27일 수요일

10. 객체를 toString
1. toPrimitive (hint String)
(see ECMA-262 8.12.8)
2. 그 결과를 string으로 변환
13년 2월 27일 수요일

11. toPrimitive
(hint String)
1. (anyobject).toString()
>> 값이 primitive 타입이면 그 값을 리턴
아니면 계속
2. (anyobject).valueOf()
>> 값이 primitive 타입이면 그 값을 리턴
아니면 TypeError
13년 2월 27일 수요일

12. toPrimitive
(hint String)
• String(Math)
>> “[object Math]”
• String(new Date())
>> "Mon Feb 25 2013 00:00:00 GMT+0900 (KST)"
• 모든객체는 toString()으로 문자열을 리턴하므로,
한마디로 (anyobject).toString()
13년 2월 27일 수요일

13. 암묵적인 toNumber
13년 2월 27일 수요일

14. 문자열을 toNumber
+“t” >> 0
+”-010” >> -10
+“ 555 “ >> 555
+“1e3” >> 1000
+”123test” >> NaN
... (see ECMA-262 9.3.1)
13년 2월 27일 수요일

15. 객체를 toNumber
1. toPrimitive (hint Number)
(see ECMA-262 8.12.8)
2. 그 결과를 number으로 변환
13년 2월 27일 수요일

16. toPrimitive
(hint Number)
1. (anyobject).valueOf()
>> 값이 primitive 타입이면 그 값을 리턴
아니면 계속
2. (anyobject).toString()
>> 값이 primitive 타입이면 그 값을 리턴
아니면 TypeError
13년 2월 27일 수요일

17. toPrimitive
(hint Number)
•
13년 2월 27일 수요일

18. + 연산자는
1. 우선 양쪽 변수를 모두 toPrimitive로 변환
2. 하나라도 String 타입이면 문자열 병합
3. 둘 다 Number 타입이면 덧셈
13년 2월 27일 수요일

19. 그렇다면...
• 1 + {toString : function() {return “2”}}
• 1 + {valueOf : function() {return 1}}
• 1 + {valueOf : function() {return 1},
toString : function() {return “2”}}
• 1 + String({valueOf : function() {return 1},
toString : function() {return “2”}})
13년 2월 27일 수요일

20. toPrimitive시
hint가 없으면
• hint Number가 디폴트
(valueOf -> toString)
• Date 객체는 hint String이 디폴트
(toString -> valueOf)
• (see ECMA-262 8.12.8)
13년 2월 27일 수요일

21. 따라서,
• 1 + {toString : function() {return “2”}}
>> “12”
• 1 + {valueOf : function() {return 1}}
>> 2
• 1 + {valueOf : function() {return 1},
toString : function() {return “2”}}
>> 2
• 1 + String({valueOf : function() {return 1},
toString : function() {return “2”}})
>> “12”
13년 2월 27일 수요일

22. 비교연산자 ==
비교대상1 == 2 결과
null undefined TRUE
null과 undefind를
null 또는 undefined FALSE
제외한 모두
number string number == toNumber(string)
==
boolean any toNumber(boolean) == any
string | number object x == toPrimitive(object)
NaN NaN FALSE
13년 2월 27일 수요일

23. 비교연산자 ==
• null == undefined
• null == {}
• 1234 == “1234”
• true == “1.0”
• 1234 == [1234]
• NaN == NaN
13년 2월 27일 수요일

24. 비교연산자 ==
• null == undefined >> true
• null == {} >> false
• 1234 == “1234” >> true
• true == “1.0” >> true
• 1234 == [1234] >> true
• NaN == NaN >> false
13년 2월 27일 수요일

25. if, ||, &&
• false, 0, -0, “”, NaN, null, undefined 이외에는
항상 true
13년 2월 27일 수요일

26. so what?
• + 사용시 양변을 모두 명시적으로 타입캐스팅
• 덧셈이 하고 싶다면, number로
• 문자열 병합이 하고 싶다면, string으로
• 괄호를 명확히 지정
• 객체는 산술연산하지 않는다!
• == 대신에 반드시 === 사용
• if (조건), ||, && 사용시 주의
13년 2월 27일 수요일

27. 명시적인 타입캐스팅
• to String
• to Number
• to Boolean
13년 2월 27일 수요일

28. casting to String
• String(variable)
• “” + variable
• variable + “”
13년 2월 27일 수요일

29. casting to Number
• Number(variable)
• variable - 0
• variable * 1
• variable / 1
• +variable
13년 2월 27일 수요일

30. casting to Boolean
• Boolean(variable)
• !!variable
13년 2월 27일 수요일

31. References
• ECMA-262
(http://www.ecma-international.org/
publications/standards/Ecma-262.htm)
• Effective JavaScript
(http://www.amazon.com/Effective-
JavaScript-Specific-Software-Development/
dp/0321812182)
13년 2월 27일 수요일

32. Thanks!
13년 2월 27일 수요일