자바스크립트의 데이터 형변환

·2023년 2월 1일
0

개발 지식

목록 보기
20/96
post-thumbnail
post-custom-banner

자바스크립트 데이터 형변환에는 어떤 것들이 있나요?

키워드
암시적 형변환, 명시적 형변환

자바스크립트에서는 생각보다 다양한 형변환이 일어난다. 이를 크게 2개로 분류할 수 있는데, 코드가 실행됨에 따라 엔진이 필요성을 느끼고 타입을 변형시키는 암시적 형변환 implicit type conversion 과 개발자의 의도에 의해 타입을 변형시키는 명시적 형변환 explicit type conversion 으로 나눌 수 있다.

암시적 형변환

산술 연산에 의한 변환

  • + 의 경우 숫자보다 문자열이 우선시 된다. 문자열과 다른 타입이 만나면 상대 타입은 문자로 변환된다.
  • + 외 다른 산술 연산자 %, /, -, * 는 문자열보다 숫자가 우선시 된다. 숫자와 다른 타입이 만나면 상대 타입은 숫자로 변환된다.
    // + 
    number + number // number
    number + string // string
    string + string // string
    string + boolean // string
    number + boolean // number
    
    // %, /, -, *
    string * number // number
    string * string // number
    number * number // number
    string * boolean //number
    number * boolean //number

비교 연산자

  • 비교 연산자 가운데 엄격하지 않은 비교 == 의 경우, 비교하기 전 두 피연산자를 같은 타입으로 변화시킵니다. 여기서 중요한 점은 타입만 변화시키지 값은 변화시키진 않습니다.
    // == 
    "10" == 10 // true
    true == 1  // true
    0 == " " // true
    0 == null // true
    0 == NaN // false
    
    // 타입만 변화시킨다.
    true == 100 // false

boolean 조건문

  • 값을 평가하는 경우, 필요에 따라 값을 boolean 으로 형변환 합니다. 예를 들어 조건문에서 숫자 0 은 false 로 이외의 숫자는 true 로 변환합니다. (음수 역시도 true 로 형변환 됩니다)



명시적 형변환

형변환 함수

  • 자바스크립트에는 데이터 형변환을 가능하게 하는 내장 메서드가 존재합니다.
  • Number(), String() , Boolean()
    Number() // number
    String() // string
    Boolean() // boolean
    

toString()

  • toString() 메서드는 모든 데이터 유형의 값을 문자열로 변환하는 것이 가능합니다.

valueOf()

  • valueOf() 메서드는 모든 데이터 유형의 값을 원시 값으로 변환하는 것이 가능하다.
  • toString()valueOf() 의 차이가 있다고 하는데, 너무 복잡하고 취업에 도움이 되나 싶은 항목이다.
    // 메서드 재정의
    var x = {
        toString: function () { return "foo"; },
        valueOf: function () { return 42; }
    };
    
    alert(x); // foo
    "x=" + x; // "x=42"
    x + "=x"; // "42=x"
    x + "1"; // 421
    x + 1; // 43
    ["x=", x].join(""); // "x=foo"
    
    // 요약하자면
    // valueOf() 연산을 위한 값. 원시 값을 뱉어서 연산에 필요한 기능 제공한다.
    // toString() 문자열로 표시할 값. 오로지 문자열로만 표시하기 위해 사용한다.

parseInt(), parseFloat()

  • parseInt() : 문자열을 정수로 반환하는 것이 가능하다. 문자열이 0 으로 시작하면 8진수 0x 로 시작하면 16진수로 변환한다. 앞부분 빈 공백은 숫자 변환 시 무시되며, 숫자로 표현할 수 없는 글자가 포함되어 있다면 NaN 의 반환한다.
  • parseFloat() : 문자열을 부동소수점 숫자로 변환하다. 앞부분 빈 공백은 숫자 변환 시 무시되며, 숫자로 표현할 수 없는 글자가 포함되어 있다면 NaN 을 반환한다.

toFixed()

해당 메서드의 인자만큼 반올림하여 소수점을 표현한다. 만약 들어가는 인자가 기존 소수점 자리보다 많다면 남은 자리를 0 으로 채운다. 이때 반환 값은 string 타입으로 반환되니 유의하자.

단항 연산자를 이용한 변환

이러한 형변환도 가능하다고 하니 참조하자.

+'1000'; // 1000
+'-1000'; // -1000
+'Infinity'; // Infinity
-'1000'; // -1000
+true; // 1
+[]; /// 0
+false; // 0
+null; // 0
+'';// 0

참고
(JS) 자바스크립트의 형변환(Type Casting)
valueOf 메소드, 뭐하러 있냐?
JavaScript 자바스크립트 형변환 - Int, String 바꾸기
자바스크립트의 형변환은 두가지다
JavaScript / 연산자 / 비교 연산자
Javascript에서 String을 Number타입으로 바꾸기 :: Outsider's Dev Story

profile
새로운 것에 관심이 많고, 프로젝트 설계 및 최적화를 좋아합니다.
post-custom-banner

0개의 댓글