[JS] 형변환

형변환 (type conversion)

함수와 연산자에 전달되는 값들은, 값에 알맞는 자료형을 갖게 됩니다.
기존의 자료형이 다른 타입의 자료형으로 변환하는 것을 형 변환이라고 합니다.

1) 문자열 형변환

문자열이 아닌 자료형을 문자열로 형 변환 하는 것을 말합니다.

• String(value) 함수를 호출해서 전달받은 값을 문자열로 변환할 수 있습니다.
• 피연산자가 숫자인경우 단항 덧셈 연산자 + 를 사용하면 문자열로 형 변환 할 수 있습니다.

❤️ 형식 

let value = true;		// boolean 자료형 
alert(typeof value)		// boolean 출력 , true의 자료형은 논리형이기 때문에

value = String(value)	// value 변수의 자료형타입(논리형)을 문자열로 형변환 
alert(typeof value)		// string 출력 , 형변환을 통해 기존의 논리형이 문자형으로 변경됩니다. 


let str = '7';		// 자료형 : String
alert(typeof +str);	// 자료형 Number 출력

코드 확인

❤️ 빈 문자열을 통한 형 변환

let str = 123;
str += '';

alert( typeof str );	// string


/* */
빈 문자열과 다른 자료형을 덧셈하면 자료형과 상관없이 문자열로 변환되어 병합하게 됩니다.

❤️ 이항 덧셈 연산자에서 문자열이 있다면 병합 된다.

let str = '1414'
let number = 2345;

alert( str+number );	// '14142345', 문자열과 다른 자료형이 문자열로 병합 됩니다.

2) 숫자형 형변환

숫자형으로의 변환은 수학과 관련된 함수와 표현식에서 자동으로 변환됩니다.
숫자형이 아닌 값에 연산자를 사용해서 알아볼 수 있습니다.

❤️ 형식 

alert("10" / "2");	/* 문자열 10과 2가 수학연산자로 인해서 숫자형으로 변환 됩니다.
					   숫자형 10과 2을 나눈 결과 값 5가 출력됩니다. */

❤️ Number(value) 함수로 숫자형 형 변환

let str="123";		// 문자열 '123' 저장
alert(typeof str);	// string , 자료형이 문자열이기 때문에 string이 출력

str = Number(str);	// str 변수에 데이터를 숫자형으로 형변환
alert(typeof str)	// number , 형 변환을 통해 문자열이 숫자열로 변경됩니다.

코드 확인

❤️ 단항 덧셈 연산자로 형 변환

let str = "151";

alert(typeof +str);	/* number, 문자열에 단항 덧셈 연산자를 사용하면 숫자로 형 변환
					   이 방법은, 문자열이 숫자인 경우에맨 해당 됩니다.
                       문자열이 숫자가 아닌 asdr 같은 문자라면 변환할 수 없음 */

숫자형 형변환 규칙

전달받은 값	형 변환 이후의 값
undefined	NaN (오류 발생)
null	0
true and false	1 또는 0
string	문자열의 처음과 끝의 공백이 제거됨
	공백을 제거한후에 남아있는 문자열이 없을시 0
	문자열에 숫자만 읽고, 문자와 숫자가 같이 있다면 NaN

❤️ 다른 자료형을 숫자형으로 형 변환 

alert( Number("123") ); 		// 문자열에 숫자만 있기 때문에, 숫자가 출력됨
alert( Number("1234zzzz") );	// 문자열에 문자가 있기 때문에 형변환실패 => NaN
alert( Number(true) );			// 논리형은 형변환시 true = 1 / false = 0
alert( Number(null) );			// null값은 형변환시 0이 출력됩니다.

코드 확인

3) 논리형 형변환

논리연산을 수행할 때 발생합니다.
논리형 형변환은 매우 간단합니다. 어떠한 값이라도 들어있다면 true, 값이 없다면 false

Boolean()함수를 사용해서 형변환 합니다.

alert( Boolean() ) ;		// undefined , false 출력
alert( Boolean(null) ) ;	// null , false 출력
alert( Boolean("") ) ;		// 비어있는 문자열 , false 출력 ( 만약 공백이 있다면, true 처리 )
alert( Boolean(1234124) ) ; // 값이 있는 정수 , true 출력

코드 확인

논리형 형변환 규칙

값	형변환 이후의 값
숫자 0	false
비어있는 문자열	false
null, NaN	false , NaN도 비어있다고 판단합니다.
undefined	false
그외의 모든 값	true

• 문자열 "0"과 " " 같은 공백은 논리형으로 변환할 때 true로 반환됩니다.