JavaScript기초 : 자료형 5. 형 변환ⅰ,ⅱ

JavaScript 자료형

JavaScript자료형에는 숫자형, 문자형, 불린 등이 있다. 

각 자료형은 형 변환이 가능하다. 

이번 글에서는 형 변환에 대해 알아보도록 하자!

 

 

5-1. 형 변환(Type Conversion)

 

형 변환이란 처음 값으로 정해진 자료형을 다른 자료형으로 변환하는 것이다. 

이 때 다른 복잡한 코드를 작성할 필요 없이 자바스크립에서 제공하는 함수를 사용하면 된다. 

 

문자열로 바꾸고 싶으면 String, 숫자로 바꾸고 싶으면 Number, 불린으로 바꾸고 싶으면 Boolean 함수

를 사용할 수 있다. 

위의 그림을 보면 콘솔에서 문자는 검정 글씨, 숫자는 파란 글씨로 나온다. 

형변환을 시킨 line6과 7을 보면 line 2와 3의 검정, 파란 글씨의 순서가 파란, 검정 글씨로 바뀌어 있다. 

형 변환이 잘 되었다는 것을 보여준다. 

 

 

좀 더 연습해보자!

 

 

Boolean값으로 형 변환은 따로 살펴보려한다. 

 

어떤 값을 불린으로 변환할 때는 대부분 true값이 된다. 

false값으로 나오는 경우는 몇 가지 안되는데 형 변환을 했을 때 false가 나오는 값을 falsy값이라고 한다.

 

falsy값 : 형 변환을 했을 때 false가 나오는 값

 없거나 비어있는 값이라면 false가 된다. 

 

1) 따옴표만 있는 빈 문자는 false로 변환

2) 숫자 0과 NaN도 false로 변환된다. 

 

 

예시를 살펴보자!

문자 → 불린의 경우를 분석해보자!

문자에서 '안녕'이라는 값이 있기 때문에 불린으로 형 변환을 했을 떄 true값이 나온다.

h변수에 안녕이라는 문자열을 지우고 그냥 빈 공간으로 두었다면 ( let h = '') false가 나오게 된다. 

 

숫자 → 불린의 경우를 분석해보자!

j 변수값에 123이 저장되었기 때문에 true가 나왔다.

j변수에 0을 쓰거나 NaN을 썼다면 false가 나왔을 것이다. 

숫자에 0 이외의 값이 들어 있다면 true가 나오고 0이나 NaN이라면 false다. 

 

 

 

 

5-2. 형 변환(Type Conversion) 심화 

 

자바스크립는 일정한 연산을 할 때 자동으로 형 변환을 하는 특징이 있다. 

위의 그림처럼 '4'는 문자열이고 true는 불린인데 결과 값은 숫자 3이 나왔다. 

 

1) 산술 연산 형 변환 

'더하기'의 경우 한쪽이라도 문자열이 포함되어 있다면 양쪽 모두를 문자열로 형 변환하여 연산이 된다.

true는 숫자1로 연산하고, false는 숫자0으로 형 변환되어 연산된다.

나누기나 곱하기 연산의 경우 문자열 '2'이더라도 숫자형 2로 연산한다.

양쪽 모두 숫자가 아니더라도 숫자로 변환하여 연산할 수 있다.

NaN값은 어떤 값과 연산해도 NaN이 된다. 

 

 

2) 관계 비교 연산

기본적으로 산술 연산 형 변환을 따르며 비교가 불가능한 경우( 예를 들어, 문자열 > 숫자) false가 나온다. 

line72를 보면 문자열 'two'와 숫자 1의 관계를 비교하고 있다. 하지만 문자열과 숫자는 비교 자체가 성립이 되지 않는다. 그렇기 때문에 콘솔에는 false가 출력된다. 

 

 

3) 같음 비교 연산

일치, 불일치의 경우 형 변환이 일어나지 않고 동등, 부등의 경우 형 변환이 일어난다. 

값이 일치하는지, 일치 하지 않는지는 === !==를 사용한다. 

이 경우에는 형 변환이 일어나지 않는다. 좀 더 정확하게 판단할 수 있따.

하지만 동등, 부등을 따질 때는 ==, != 기호를 사용한다. 

이 경우에는 형 변화이 일어나기 때문에 line87은 숫자 1과 숫자 1의 비교, line79는 숫자1과 숫자1의 비교가 된다. 

 

 

 

어려운 문제 도전!!

//1번
console.log(Number(true) == String(1));

//2번
console.log(5%2 === Boolean(2) * true);

1번의 경우 

불린 true를 숫자형으로 형 변환한 값과 숫자 1을 문자열로 형 변환한 값의 동등 비교이다. 이 연산식을 간단하게 정리하면 1 == '1'이 된다.

문자열 1과 숫자 1은 형 변환 시 값이 서로 같을 수 있기 때문에 두 값의 동등 비교는 true 가 반환된다.

 

2번의 경우

숫자5와 숫자 2의 나머지 연산의 결괏값과 숫자 2를 불린 형태로 형 변환한 값에 불린 true를 곱한 결괏값의 일치비교다.

일치비교의 왼편부터 살펴보면, 숫자 5와 숫자 2의 나머지연산의 결과는 숫자 1이다. 다음으로 오른편을 보면 일단 숫자 2를 불린 형태로 형 변환한 값은 true다. 이 연산식을 다시 정리하면 true * true가 된다. 그런데 곱셈연산자에 의해서 true가 모두 숫자형으로 또 형 변환이 되서 1 * 1의 결과인 숫자 1이 오른쪽 부분의 결괏값이 됩된다.

숫자 1과, 숫자 1의 일치비교니깐 결과적으로 true가 반환된다. 

 

 

형 변환을 잘 이해해야 자바스크립 코드를 정확하게 쓰고 읽을 수 있다.

헷갈리는 부분이 많으니 여러 번 복습이 필요할 듯 싶다!

 

 

 

다음 글에서는 템플릿 문자열에 대해 정리해보려 한다!