[JavaScript] 형 변환

반응형

형 변환

 형 변환은 서로 다른 자료형 사이의 연산에서 의도치 않은 동작을 방지 하기 위해 필요하다.

 아래의 코드는 평균 점수를 구하는 코드이다.

math = prompt("수학점수를 입력하세요.");
eng = prompt("영어점수를 입력하세요.");
result = (math + eng)/2;
console.log(result);

 

 수학점수는 50, 영어점수는 70을 입력한다. 평균은 60이 나와야 한다.

 

 하지만 전혀 다른 값이 출력된다.

 prompt()로 입력받은 정보가 문자형으로 저장되기 때문이다.

 수학점수와 영어점수를 더한 값이 120이 아닌 5070으로 저장됐기 때문에 5070을 2로 나눈 2535가 출력된다.

 여기서 한가지 의문점이 생긴다. 문자열을 더해서 5070이 됐다면, 왜 2로 나누는 것은 정상적으로 작동할까?

문자형 10을 문자형 2로 나누면 숫자형 5가 된다.

 

 / 와 같은 표현식은 숫자형이 아니더라도 자동으로 숫자형으로 변환된다.

 이러한 과정을 자동 형 변환 이라고 한다. 이러한 기능은 원인을 알기 힘든 오류를 발생시키기 때문에 의도적으로 형변환을 시켜줘야 하는데 이를 명시적 형 변환이라고 한다. 아래는 명시적 형 변환을 하기 위한 방법이다.

● String()

 괄호안의 자료형을 문자형으로 변환

console.log(String(3));
console.log(String(true));
console.log(String(null));
console.log(String(undefined));

● Number()

 괄호안의 자료형을 숫자형으로 변환

console.log(Number("123"));
console.log(Number("123abc"));
console.log(Number(true));
console.log(Number(false));

 

 Number() 는 숫자와 문자가 같이 있는 문자열을 숫자형으로 바꾸지 못한다.

 true 는 숫자형으로 변환할 경우 1의 값을 가진다.

 false 는 숫자형으로 변환할 경우 0의 값을 가진다.

 

● Boolean()

 괄호안의 자료형을 불린형으로 변환

 Boolean() 은 false 로 변환되는 값만 기억하자.

console.log(Boolean(0));
console.log(Boolean(""));  // 빈 문자열
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(NaN));

 

 이 외의 경우는 모두 true 로 변환한다.

 

주의사항

console.log(Number(null));
console.log(Number(undefined));

 

 Number(null) 은 0 으로 변환된다.

 Number(undefined) 는 NaN 으로 변환된다.

 

console.log(Boolean(0));  // 숫자형 0
console.log(Boolean('0'));  // 문자형 0

 

 Boolean(0) 은 false로 변환되지만, Boolean('0') 은 true로 변환된다.

 

console.log(Boolean(""));  // 빈 문자열
console.log(Boolean(" "));  // 공백이 포함된 문자열

 

Boolean("") 은 false로 변환되지만, Boolean(" ") 은 true로 변환된다.