[자바스크립트] 자바스크립트 형 변환 (type conversion)

 

형 변환 (type conversion)

• 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환된다.
• alert가 전달받은 값의 자료형과 관계없이 문자열로 자동 변환하여 보여주는 것 or 수학 관련 연산자가 전달받은 값을 숫자로 변환하는 경우가 형 변환의 대표적인 예시
• 전달받은 값을 의도적으로 명시적 변환해주는 것도 형 변환이라고 할 수 있다.

 

 

문자형으로 변환

• alert 메서드는 매개변수로 문자형을 받기 때문에 alert(value)에서 value는 문자형이어야 한다. 만약 다른 형의 값을 전달받으면 문자형으로 자동 변환된다.

<script>
    let value = true;
    alert(typeof value); //boolean

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

</script>

 

 

숫자형으로 변환

• 수학과 관련된 함수와 표현식에서 자동으로 형 변환이 일어난다.
• 숫자형이 아닌 값에 /를 하는 경우
  • 문자열로 입력했지만 숫자형으로 자동변환 되어서 연산 수행
• alert("6" / "2"); // 3

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

let str = "123"
alert(typeof str); // string - 문자열

let num = Number(str); // 문자 "123"을 숫자 123으로 형변환
alert(typeof num); // number

• 문자 기반 form을 통해 숫자형 값을 입력 받을 때 명시적 형 변환이 필수이다.
• 형 변환 하려는 곳에 숫자 이외에 다른 글자가 들어 있으면 NaN(Not a Number)으로 실패

alert(Number("    123     ")); // 123, * 문자열은 처음과 끝 공백이 제거된다. 공백 제거 후 문자열 없으면 0, 그렇지 않으면 문자열에서 숫자를 읽기. 변환에 실패하면 NaN
alert(Number("aa234")); // NaN

alert(Number(true)); // 1
alert(Number(false)); // 0
alert(Number(null)); // 0 
// null과 undefined를 숫자형으로 변환 시 null은 0, undefined은 NaN이 된다.

 

 

Boolean형으로 변환

• 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)

⚠️ 주의 : 문자열 "0"은 true이다.

• PHP등의 일부 언어에서는 문자열 "0"을 false취급한다.
• 그러나 자바스크립트에서 비어 있지 않은 문자열은 언제나 true

alert( Boolean("0") ); // true
alert( Boolean(" ") ); // 공백이 있는 문자열도 비어있지 않은 문자열이기 때문에 true로 변환된다.

 

 

요약

• 문자형으로 변환은 무언가 출력할 때 주로 일어난다.
• String(value)를 사용하면 문자형으로 명시적 변환 가능
• 숫자형으로 변환은 연산 시 주로 발생, Number(value)로 형 변환

전달받은 값	형 변환 후
undefined	NaN
null	0
true / false	1 / 0
string	전달받은 문자열을 “그대로” 읽되, 처음과 끝의 공백을 무시합니다. 문자열이 비어있다면 `0`이 되고, 오류 발생 시 `NaN`이 된다.

전달받은 값	형 변환 후
0, null, undefined, NaN, ""	false
그 외의 값	true

 

 

📌 참고

• 모던 JavaScript 튜토리얼