형 변환

자세히 보면 서로 출력된 색깔이 다른데 

105는 문자열

15는 숫자열이다

 

하지만 때로는 저 문자열을 숫자열로

저 숫자열을 문자열로 더하고 싶을수도 있는데 

그럴 때 형변환을 활용하면 된다

 

형변환

형변환은 말그대로 처음에 값으로 정해진 자료형을 다른 자료형으로 바꾸는 것이다

기본적으로 자바스크립트에서 제공한 함수를 활용하면 된다

문자열 String 숫자열 Number, Boolean

을 활용하면된다

 

이렇게 바꿔주면

각각 숫자열 문자열로 바뀐다

함수는 서로다른 형변환이 어떻게 이루어질까?

문자열 형변환

이렇게 형변환 되어 나타난다

문자열 형변환은 형변환 중에서 가장 간단하다

그냥 '따옴표' 만 있다고 생각하면된다

 

숫자열 형변환

 

 

이렇게 형변환 되는데 숫자열로 형변환 할 때는 반드시 기억해야 할 것이 있다

일반적으로 숫자가 아닌형태의 문자 값들은 숫자로 변환할 때 NaN 값이 된다

하지만 숫자형태의 문자열은 

이렇게 자연스럽게 형변환 된다

 

boolean 숫자 형변환도 조금 특이한데

true를 숫자로 형변환 헀더니 1이 나온다

이것을 false로 바꾸면?

이렇게 boolean값을 숫자열로 형변환 할 떄 0 과 1 로 변하게 된다

true = 1 

false = 0

 

불린 형변환

두 값 모두 true 로 변하는 것을 볼 수 있는데

일반적으로 어떤 값을 boolean 으로 변환하면 true 값이 된다

 

단 예외가 있다

boolean 으로 형변환 했을 때 false 가 되는경우

쉽게 생각 했을 때 없거나 비어있는 느낌을 주는 값이 boolean으로 형변환 했을 때 false가 된다

문자열의 경우에는 아무것도 없을 때

숫자열의 경우에는 0이거나 NaN일떄

 

이렇게 false 로 형변환 된다

// '' , 0 , NaN <-- falsy 값이라고 부른다

 

자바스크립트는 일반적으로 연산을 할 때 일정한 규칙에 따라서 자동으로 형변환을 해준다

대부분의 프로그래밍 언어는 서로다른 자료형의 연산을 오류로 처리한다 하지만 실행시켜보면

자동으로 true 가 규칙에 따라 형변환 된 뒤 연산이 이루어졌다 

상황에 따라서 유연하게 연산하는 자바스크립트의 특징이 장점이 되기도 하고 자동적으로 형변환되는 특성을 이해하지

못했을 때 이렇게 예상하지 못한 형태로 연산이 될 수가 있다

 

일반적으로 이연산자들은 연산되어지는 두 값을 모두 숫자형으로 변환한 다음 연산을 한다

주의 해야할 부분은 + 연산자이다 다른 연산자들은 숫자를 연산하는 기능밖에 없지만

+는 문자열을 연결하는 기능이 있다 

첫번쨰 코드는 문자열 '42' 로 출력이 되어있다

+는 숫자열을 연산하는 것 보다 문자열을 연결하는 기능이 더 강화되어 있다

그래서 +를 할때는 순서에 상관없이 어느 한쪽이 문자열이라면 문자열이 된다

나머지는 전부 숫자열로 바꿔서 연산이 되어진다!

부등호로 두값의 크고작음을 비교하는 관계연산은 특별한 경우를 제외하면 산술연산자 처럼 두값을 숫자형으로 변환하여

비교한다

마자믹 코드는 'two'인데 이것이 형변환되면 NaN이 된다 따라 NaN과 1이 비교대상이 되지 않는다 이럴때는 그냥 false로 처리가 된다

===은 일치하냐? 이런 뜻이고 ==은 동등하냐? 란 뜻이다

일치 형태(===) 는 형변환이 일어나지 않지만 

동등 형태(==)는 형변환이 일어나기 때문에 이런 결과가 나온다

 

그래서 특별한 경우가 아니면 === 을 써주는게 좋다 ==는 형변환이 일어나기 때문에 코드가 이상해 질 수 있다