자바스크립트 기본 - 형 변환

함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환되는데, 이를 ‘형 변환'이라고 한다.

alert 가 전달받은 값의 자료형과 관계없이 이를 문자열로 자동 변환하여 보여 주는 것, 수학 관련 연산자가 전달받은 값을 숫자로 변환하는 경우가 형 변환의 대표적인 예시이다.

이외에도, 전달받은 값을 의도를 갖고 원하는 타입으로 변환(명시적 변환)해 주는 경우도 형 변환이라고 한다.

문자형으로 변환

문자형으로의 형 변환은 문자형의 값이 필요할 때 일어난다.

alert 메서드는 매개변수로 문자형을 받기 때문에, alert(value) 에서 value 는 문자형이어야 한다. 만약 다른 형의 값을 전달받으면 이 값은 문자형으로 자동 변환된다. String(value)함수를 호출해 값을 문자열로 변환할 수도 있다.

let value = true;
alert(value); // true
alert(typeof value) // boolean

value = String(value); // 변수 value엔 문자열 "true"가 저장됩니다.
alert(value); // true
alert(typeof value); // string

value = null;
alert(value); // null
alert(typeof value); // object

숫자형으로 변환

숫자형으로의 변환은 수학과 관련된 함수와 표현식에서 자동으로 일어난다.

예를 들어 숫자형이 아닌 값에 나누기를 적용한 경우 숫자형으로 자동변환된 후 연산이 수행된다.

alert("6"/"2"); // 3
alert("6" / 2); // 3
alert(6/"2"); // 3
alert("6"/true); // 6
alert(true / "1"); // 1
alert("true" / "true"); // NaN

Number(value) 함수를 사용하면 주어진 값을 숫자형으로 명시해서 변환할 수 있다.

숫자형 값을 문자 기반 폼을 통해 입력받는 경우 이러한 명시적 형 변환이 필수이다.

한편, 숫자 이외의 글자가 들어가 있는 문자열을 숫자형으로 변환하려고 하면, 그 결과는 NaN 이 된다.

let age = Number("임의의 문자열 123");

alert(age); // NaN, 형 변환이 실패합니다.

아래는 Number 를 사용해 숫자형으로 변환 시 적용되는 규칙이다.

• undefinde : NaN
• null : 0
• true and false : 1과 0
• string : 문자열의 처음과 끝 공백이 제거된다. 공백 제거 후 남아있는 문자열이 없다면 0, 그렇지 않다면 문자열에서 숫자를 읽는다. 변환에 실패하면(숫자 이외의 글자가 들어가 있으면) NaN이 반환된다.

alert( Number("   123   ") ); // 123
alert( Number("123z") ); // NaN ("z"를 숫자로 변환하는 데 실패함)
alert( Number(true) ); // 1
alert( Number(false) ); // 0
alert(Number(NaN)); // NaN
alert(Number(undefined)) // NaN
alert(Number(null)) // 0

불린형으로 변환

불린형으로의 변환은 논리 연산을 수행할 때 발생한다. Boolean(value)를 호출하면 명시적으로 불리언으로의 형 변환을 수행할 수 있다. 불린형으로 변환 시 적용되는 규칙은 다음과 같다.

불린형으로 변환 시 적용되는 규칙은 다음과 같다.

• 숫자, 0, 빈 문자열, null, undefined, NaN과 같이 직관적으로 ‘비어있다'고 느껴지는 값들은 false 가 된다.
• 그 외의 값은 true 로 변환된다.

alert(Boolean(1)); // 숫자 1(true)
alert(Boolean(0)); // 숫자 0(false)
alert(Boolean("hello")); // 문자열(true)
alert(Boolean("")); // 빈 문자열(false)
alert(Boolean(undefined)); // false
alert(Boolean(null)); // false
alert(Boolean(NaN)); // false
alert(Boolean("0")); // true