형 변환 |

처음에 값으로 정해진 자료형을 다른 자료형으로 바꾸는 것을 말한다.
자바스크립트에서 기본으로 제공하는 함수 활용하면 됨.
문자열로 바꾸고 싶을 때는 String 이라는 함수 사용, 숫자로 바꾸고 싶을 때는 Number,
불린으로 바꾸고 싶으면 Boolean을 사용하면 됨.

	console.log('10' + '5');
    console.log(10 + 5);

위 코드를 실행하면 105, 15가 출력된다. 첫 번째 코드는 자료형이 문자열인 값을 더했기 때문에 두 문자열을 연결한 문자열 105가 출력이 되었고 두 번째 코드는 자료형이 숫자인 값들을 서로 더했기 때문에 두 숫자 값을 더한 결과로 숫자 15가 출력이 된 것이다.

아래에 형변환을 시킨 코드를 작성해 보았다.

	console.log(Number('10') + Number('5'));
    console.log(String(10) + String(5));

이 코드를 실행시키면 15, 105가 출력된다. 좀 전과 결과가 완전히 반대로 바뀐 것을 확인할 수 있다.

문자형으로 형 변환

	// 형 변환 (Type Conversion)
	// 숫자 -> 문자
	let x = 123;
	console.log(x);
    console.log(String(x));
    console.log(typeof x);
    console.log(typeof String(x));
    
    console.log('');
    
	//불린 -> 문자
    let y = true;
    console.log(y);
    console.log(String(y));
    console.log(typeof y);
    console.log(typeof String(y));

코드를 보면 변수 x에 숫자 123을 할당해 주었고 이 값을 그대로 출력하고, 문자열로 형 변환 한 값을 출력하고, 각 자료형을 확인하기 위해 typeof 연산자를 사용했다. 아래도 같은 코드지만 변수 y에 boolean 형태의 값을 할당해 주었다. 코드를 실행하면 아래와 같은 결과가 나온다. 같은 결과지만 색이 다른 걸 볼 수 있고, number가 string이 되고, boolean이 string이 되는 결과를 볼 수 있다.
이처럼 문자열 형 변환은 형 변환 중에서 가장 간단하다.

숫자형으로 형 변환

	// 형 변환 (Type Conversion)
	// 문자 -> 숫자
	let x = '문자';
	console.log(x);
    console.log(Number(x));
    console.log(typeof x);
    console.log(typeof Number(x));
    
    console.log('');
    
	//불린 -> 숫자
    let y = true;
    console.log(y);
    console.log(Number(y));
    console.log(typeof y);
    console.log(typeof Number(y));

이번에는 변수 x에 '문자'라는 문자열을 할당하고 Number 함수를 통해 숫자형으로 형 변환을 했다. 코드를 실행시키면 아래와 같은 결과가 도출된다.

일반적으로 숫자가 아닌 형태의 문자 값들은 숫자로 변환할 때 NaN 값이 된다. 숫자가 아니라는 의미.
불린의 경우 true가 숫자 1로 형 변환 된 모습을 볼 수 있다. 변수 y에 false를 주면 0으로 형변환이 된다. 이렇게 불린 값은 숫자 형태로 형 변환할 때 0과 1로 값이 변한다는 점 기억해두기.

불린형으로 형 변환

      // 형 변환 (Type Conversion)
      // 문자 -> 불린
      let x = "문자";
      console.log(x);
      console.log(Boolean(x));
      console.log(typeof x);
      console.log(typeof Boolean(x));

      console.log("");

      // 숫자 -> 불린
      let y = 123;
      console.log(y);
      console.log(Boolean(y));
      console.log(typeof y);
      console.log(typeof Boolean(y));

문자와 숫자를 불린 형태로 형 변환해 주었다. 아래와 같이 변환되었다.

console.log(Boolean(x)); console.log(Boolean(y)); 부분이 둘 다 true로 변환된 것을 확인할 수 있다.

일반적으로 어떤 값을 불린으로 변환할 때는 true 값이 된다.
그래서 불린형 변환을 이해할 때는 false로 변환 되는 경우 몇 가지를 알아두면 좋음.
쉽게 생각했을 때 뭔가 없거나, 비어있는 듯한 느낌을 주는 값이 false로 변함.

문자열의 경우에 ''만 있는 빈 문자는 false로 변환된다.
숫자의 경우에는 숫자 0이 false로 변환되고, NaN 값도 false로 변환된다.

문제

Q1) 다음 코드의 출력 결과로 알맞은 것을 선택하세요.

	console.log(Number('1' + '2' + '3') - Number(true));

① NaN
② 7
③ 122
④ 123

console.log 안쪽을 뺄셈 기호 중심으로 나눠서 봤을 때 뺄셈 기호의 왼편을 보면 문자열 1, 2, 3을 더한 다음 그 값을 숫자형으로 형 변환 하고 있다. 일단 문자열의 더하기 연산은 각 문자열을 연결하는 연산이기 때문에 문자열 1, 2, 3을 더하면 문자열 '123'이 된다. 이 문자열을 숫자형으로 형 변환 했으니 결국 숫자 123이 되고, 오른편을 봤을 때 불린 true를 숫자형으로 형 변환하고 있는데 true는 1로 변환되기 때문에 123 - 1이 되어서 콘솔창에는 122가 출력된다.

정답 : 3

Q2) 다음 보기들 중 코드의 결과가 true인 것을 모두 선택하세요.

① Boolean("false")
② Boolean(6 % 2)
③ Boolean(NaN) || Boolean('0')
④ Boolean(typeof false)

(1)불린 false가 아니라 문자열 false이기 때문에 결과는 true
(2) 6 % 2의 결과는 0. 결국 Boolean(0)이 되기 때문에 결과는 false
(3) Boolean(NaN)은 false고, Boolean('0')은 문자열 0을 불린형으로 형 변환 한 것이기 때문에 true. 결국 false || true 가 되기 때문에, 결과는 true
(4) typeof 연산자를 사용하고 있는데, 다시 정리하면 Boolean('boolean') 이 된다. 문자열 boolean을 불린형으로 형 변환 하기 때문에 결과는 true

정답 : 1,3,4

형 변환 ||

직접 함수를 써서 형 변환하는 것 외에도 Javascript는 일반적으로 연산을 할 때 일정한 규칙에 따라서 자동으로 형 변환하는 특징이 있다.

아래 코드를 보면 문자열 4와 불린 true를 연산하는 식이 있다. 대부분의 프로그래밍 언어에서는 서로 다른 자료형의 연산을 오류로 처리하지만 이 코드를 실행시키면

	console.log('4' - true);

오류가 아니라 3이라는 결과를 출력한다. 실제로 문자열 4와 불린 true가 연산이 된 결과가 아니라 일정한 규칙에 따라서 이 두 값이 자동으로 변환된 다음에 연산이 이루어진 결과라고 할 수 있다.

이 규칙을 이때까지 배웠던 연산자 별로 나눠서 살펴보자.

산술 연산

	// 산술 연산 ( +, -, *, /, %, ** )
	console.log(4 + '2');
    console.log(4 + 2);
    console.log(4 - true);
    console.log(4 * false);
    console.log(4 / '2');
    console.log('4' ** true);
    console.log(4 % 'two');

일반적으로 연산자들은 연산 되어지는 두 값을 모두 숫자형으로 변환한 다음 연산한다. 한 가지 주의해야 될 부분은 더하기 연산자. 다른 연산자들은 숫자를 연산하는 기능밖에 없기 때문에 모든 값을 숫자로 바꿔서 연산하지만 더하기 연산자는 문자열을 연결하는 기능도 있기 때문이다. (상황에 따라 조금 헷갈릴 수도 있음)

코드를 실행시키면 콘솔창에 이렇게 나온다.

첫번째 결과는 문자열 42로 문자열 연산이 된 걸 확인할 수 있다.
쉽게 생각해서 Javascript에서 더하기 기호는 숫자를 더하는 것보다 문자열을 연결하는 기능이 조금 더 강하다고 볼 수 있다. 그래서 더하기를 할 때 순서에 상관없이 어느 한 쪽이라도 문자열이 있다면 양쪽 모두를 문자열로 바꾼 다음 문자열 연산으로 동작한다는 것 기억하기.

마지막 코드 4 % 'two'를 보면 two 라는 문자열은 숫자형으로 형 변환했을 때 NaN 값이 나온다. NaN 값은 어떤 것과 연산을 해도 NaN 값이 나온다는 것 기억하기.

관계 비교 연산

	// 관계 비교 연산( <, <=, >, >= )
	console.log(2 < '3'); //true
    console.log(2 > true); //true
    console.log('2' <= false); //false
	console.log('two' >= 1); //false

부등호로 두 값의 크고 작음을 비교하는 관계 연산은 특별한 경우 제외하면 산술 연산자처럼 두 값을 모두 숫자형으로 바꿔서 비교하는 경우가 일반적임.
마지막 코드를 봤을 때 'two' >= 1에서 'two'는 NaN으로 변환된다. 값을 비교하는 연산에서는 true or false 중 하나의 결괏값을 내야 하기 때문에 거짓인 경우에도 false가 나오지만 비교가 불가능한 경우에도 false가 출력된다.

같음 비교 연산

	// 같음 비교 연산( ===, !==, ==, != )
	console.log(1 === '1'); //일치, 불일치(!==)  //false
    console.log(1 === true); 				   //false
    console.log(1 == '1'); //동등, 부등(!=)     //true
	console.log(1 == true); 				  //true

등호를 통해 양쪽 값이 같은지를 판단하는 비교 영상은 등호 세 개와 두 개의 두 종류가 있다. 세 개를 사용하는 쪽을 '일치'라고 부르고 두 개를 사용하는 쪽을 '동등'이라고 부른다. (느낌표 붙여주면 불일치, 부등) 일치 비교는 형 변환이 일어나지 않지만 동등 비교는 형변환이 일어난다.

코드를 실행해보면 일치와 동등에 대한 결과가 서로 다르게 나오는 것을 확인할 수 있다.
특별한 경우가 아니라면 두 값이 서로 같은지를 비교할 때는 등호를 세 개를 이용하는 편이 조금 더 안전한 코드를 작성하는 데 도움이 된다.

문제

Q1) 다음 코드의 결과로 number 가 출력되는 것을 모두 선택하세요.

① console.log(typeof ('4' + 3));
② console.log(typeof (3 - true));
③ console.log(typeof (Boolean(5) * true));
④ console.log(typeof (true < false));

(1) 문자열 '4' 더하기 숫자 '3' 더하기 연산은 피연산자가 한쪽이라도 문자열이 있을 경우 양쪽 모두를 문자열로 형 변환한 다음 문자열 덧셈함. console.log(typeof ("43")); 가 되어서 콘솔에는 string 출력.

(2) 더하기 기호를 제외한 일반적인 산술연산자들은 연산 되는 값들을 모두 숫자형으로 변환한 다음 연산. 3 - true는 불린 true가 숫자 1로 형 변환 되면서 3 - 1 됨. console.log( typeof (2));가 되어서 콘솔에는 number 출력.

(3) 숫자 5를 불린형으로 변환한 뒤 true와 곱셈. console.log(typeof (true true));이 됨. 다시 정리하면 console.log(typeof (1 1));이 되어서 콘솔에는 number 출력.

(4) 부등호로 두 값의 크고 작음을 비교할 때도 특별한 경우를 제외하면 보통 숫자형으로 바꿔서 비교. console.log(typeof (1 < 0));가 되는데 1은 0보다 작다는 거짓이기 때문에 console.log(typeof (false));가 되어서 boolean 출력.

정답 : 2, 3

Q2) 다음 보기들 중 코드의 실행결과가 true로 출력되는 것을 모두 선택하세요.

① console.log(0 !== Number(false));
② console.log(Number(true) == String(1));
③ console.log('5' / true != '5');
④ console.log(5 % 2 === Boolean(2) * true);

(1) 숫자 0과, 불린 false를 숫자형으로 형 변환한 값의 불일치 비교. 불린 false를 숫자형으로 형 변환하면 숫자 0. 두 값은 서로 일치하기 때문에, 불일치 비교에서는 false가 반환.

(2) 불린 true를 숫자형으로 형 변환한 값과 숫자 1을 문자열로 형 변환한 값의 동등 비교. 간단하게 정리하면 1 == '1'이 되는데 문자열 '1'과 숫자 1은 형 변환 시 값이 서로 같을 수 있기 때문에 두 값의 동등 비교는 true 가 반환.

(3) 문자열 '5' 나누기 불린 true의 결괏값과 문자열 '5'의 부등 비교. 문자열 '5' 나누기 불린 true는 나누기 연산에 의해서 두 값 모두 숫자형으로 형 변환됨. 5 / 1이 되고 결과적으로 3번 선택지의 연산식은 5 != '5'. 숫자 5와 문자열 '5'는 동등하기 때문에, 부등 비교에서는 false가 반환.

(4) 숫자 5와 숫자 2의 나머지 연산의 결괏값과 숫자 2를 불린 형태로 형 변환한 값에 불린 true를 곱한 결괏값의 일치비교. 숫자 5와 숫자 2의 나머지연산의 결과는 숫자 1. 숫자 2를 불린 형태로 형 변환한 값은 true. true true가 되는데 곱셈연산자에 의해서 true가 모두 숫자형으로 또 형 변환이 되서 1 1의 결과인 숫자 1이 오른쪽 부분의 결괏값이 된다. 숫자 1과, 숫자 1의 일치비교니깐 true가 반환.

정답 : 2,4