형 변환 공부

찬찬잉·2022년 3월 7일
0
post-thumbnail

전 쓰면서 공부해야 이해가 되는 스타일입니다. 아래의 글은
https://ko.javascript.info/type-conversions
이글을 참고하였습니다.

형 변환

함수연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환됩니다.
이러한 과정을 형 변환(type conversion)이라고 합니다.

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

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

    let value = true;
    alert(typeof value);

    value = String(value);
    alert (typeof value);
    
	boolean 과 String으로 차례대로 나타난다.

숫자형으로 변환

숫자형으로의 변환은 수학과 관련된 함수와 표현식에서 자동으로 일어납니다.
숫자형이 아닌 값에 나누기 /를 적용한 경우와 같이 말이죠.

alert("6" / "2");  // 3, 문자열이 숫자형으로 자동 변환된 후 연산이 수행됩니다.

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

let str = "123";
alert(typeof str); // string

let num = Number(str); // 문자열 "123"이 숫자 123으로 변환됩니다.
console.log(str)

alert(typeof num); // number  

숫자형 값을 사용해서 무언가를 하려고 하는데 그 값을 문자 기반 폼(form)을 통해 입력받는 경우엔, 이런 명시적 형 변환이 필수입니다.

한편, 숫자 이외의 글자가 들어가 있는 문자열을 숫자형으로 변환하려고 하면, 그 결과는 NaN이 됩니다. 예시를 살펴보면

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

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

해당 화면에 NaN이 나타나는 것을 확인할 수 있다.

전달받는 값 : 형 변환 후

undefined : NaN
null : 0
true and false : 1 and 0
string : 문자열의 처음과 끝 공백이 제거됩니다. 공백 제거 후 남아있는 문자열이 없다면 0, 그렇지 않다면 문자열에서 숫자를 읽습니다. 변환에 실패하면 NaN이 됩니다.

예시

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

중요한 것은 nullundefined은 숫자형으로 변환 시 결과가 다르다는 점에 유의하여야합니다. null0이 되고 undefinedNaN 이 됩니다.

대부분의 수학 연산은 형 변환을 수반합니다.

불린형으로 변환

불린형으로의 변환은 아주 간단합니다.
이 형 변환은 논리 연산을 수행할 때 발생합니다.
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" 문자열 0true입니다!

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

또한 문자열 안에 스페이스 바(공백)도 true로 나타납니다.

요약

문자, 숫자, 논리형으로의 형 변환은 자주 일어나는 형 변환입니다.
문자형으로 변환은 무언가를 출력할 때 주로 일어납니다.String(value)을 사용하면 문자형으로 명시적 변환이 가능합니다. 원시 자료형을 문자형으로 변환할 땐, 대부분 그 결과를 예상할 수 있을 정도로 명시적인 방식으로 일어납니다.
숫자형으로 변환은 수학 관련 연산시 주로 일어납니다. Number(value)로도 형 변환을 할 수 있습니다.

profile
디자이너, 기획자 출신의 개발자

0개의 댓글