자바스크립트에서 문자열을 숫자로 변환할 때 parseInt()parseFloat() 혹은 조금 더 빠른 Number()를 사용하곤 합니다.

하지만 더욱 간단하고 멋있게 쓸 수 있는 +를 사용해 보는건 어떨까요? 뭔가 더 있어보일 수 있습니다

 

목차


    0. 단항 연산자가 뭔데?

    단항 연산자한 개의 피연산자와 결합하는 연산자를 의미합니다.

    단항 연산자가 앞에 오고 뒤에 요소가 오는 방식으로 사용합니다.

    ex) -10

     

    위 예시에서 봤듯이 우리는 그동안 알게 모르게 단항연산자를 많이 사용해왔죠.

     

    가장 대표적으로 - 단항 연산자를 숫자 앞에 붙이면? 기존에는 양수값이었던 숫자형 데이터를 음수값으로 바꿔줄 수 있습니다.

     


    1. +도 단항연산자라고?

    맞습니다. -가 단항연산자인데, +도 질수 없었는지, 이 친구도 단항연산자의 역할을 할 수 있다고 합니다.

     

    그렇다면.. 진짜로 앞에 어떠한 요소도 없이 어떤 요소의 뒤에 +를 붙이면 어떻게 될까요?

     

    숫자형 데이터 앞에는 +를 붙여봤자 아무 의미도 없습니다.

     

    let a = 10;
    console.log(+a) // 10
    console.log(typeof +a) // number

     

    그렇다면 문자형 데이터 앞에 +를 붙이면 어떻게 될까요?

     

    let a = "10";
    console.log(typeof a) // string
    console.log(+a) // 10
    console.log(typeof +a) // number

     

    와!!! string 형태의 데이터가 number 형태로 바뀌었습니다!

     

    이처럼 + 단항연산자데이터를 숫자형 데이터로 바꿔줄 수 있는 경우 바꿔주는 연산자입니다.

     

    문자열 뿐만 아니라 true, false, null, 16진수값 역시 숫자 타입으로 반환해줍니다.

    아래 예시에서는 다양한 요소들을 + 단항연산자의 피연산자로 넣어봤습니다.

     

    let a = true;
    let b = false;
    let c = null;
    let d = "-10";
    let e = "0xAAAA";
    
    console.log(+a) // 1
    console.log(+b) // 0
    console.log(+c) // 0
    console.log(+d) // -10
    console.log(+e) // 43690 <- 16진수를 number형태로 변환
    
    console.log(typeof +a) // number
    console.log(typeof +b) // number
    console.log(typeof +c) // number
    console.log(typeof +d) // number
    console.log(typeof +e) // number

     

    하지만 당연히 숫자로 표현할 수 없는 요소들은 정상적으로 number 형태로 바꿀 수 없습니다.

    이런 경우에는 숫자가 아니라는 의미의 NaN (Not a Number)를 출력하게 됩니다.

     

    let a = "abc";
    console.log(+a) // NaN
    console.log(typeof +a) // undefined

     

     

    지금까지 직접 예제를 통해 살펴봤는데, 아래 mdn 사이트에서도 이와 관련된 내용이 나와있으니 참조하시면 좋습니다!

     

    Number Type으로 바꿔준다는 내용이 나와있네요!!

     

     

    Expressions and operators - JavaScript | MDN

    This chapter documents all the JavaScript language operators, expressions and keywords.

    developer.mozilla.org

     

    반응형
    • 네이버 블로그 공유하기
    • 네이버 밴드에 공유하기
    • 페이스북 공유하기
    • 카카오스토리 공유하기