[자바스크립트(JavaScript)] 7장. 연산자(비교 연산자, 쉼표 연산자, typeof 연산자, 지수 연산자)

728x90
반응형

목차

1. 비교 연산자 - 동등/일치 비교 연산자

2. 쉼표 연산자

3. typeof 연산자

4. 지수 연산자

     


    7장. 연산자

    연산자(operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행하여 하나의 값을 만든다. 이때 연산의 대상을 피연산자(operand)라 한다. 피연산자는 값으로 평가될 수 있는 표현식이어야 한다. 그리고 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다.

     

    산술 연산자, 할당 연산자, 비교 연산자, 삼항 조건 연산자, 논리 연산자, 쉼표 연산자, 그룹 연산자, typeof 연산자, 지수 연산자 등의 연산자가 있는데, 대부분 C언어나 자바에서의 문법과 비슷해서 조금 새로운 연산자들만 다뤄보도록 하겠다.

     


    1. 비교 연산자

    비교 연산자(comparison operator)는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다.

    비교 연산자는 if문이나 for문과 같은 제어문의 조건식에서 주로 사용한다.

     

    동등/일치 비교 연산자

    좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환한다.

    동등 비교 연산자는 느슨한 비교를 하지만, 일치 비교 연산자는 엄격한 비교를 한다.

     

    비교 연산자 의미 사례 설명 부수 효과
    == 동등 비교 x == y x와 y의 값이 같음 X
    === 일치 비교 x === y x와 y의 타입이 같음 X
    != 부동등 비교 x != y x와 y의 값이 다름 X
    !== 불일치 비교 x !== y x와 y의 값과 타입이 다름 X

    동등 비교(==) 연산자: 좌항과 우항의 피연산자를 비교할 때, 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.

    ➡️ 좌항과 우항의 피연산자가 타입은 달라도 암묵적 타입 변환 후에 같은 값일 수 있다면 true 반환

    - 편리한 경우도 있지만 결과 예측이 어렵고 실수하기 쉽다.

    따라서, 동등 비교 연산자는 사용하지 않는 편이 좋다. 대신, 일치 비교(===) 연산자를 사용한다.

    // 동등 비교
    5 == 5; // true
    
    // 타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시키면 동등하다.
    5 == '5'; // true

     

    일치 비교(===) 연산자: 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true 반환

    ➡️ 암묵적 타입 변환을 하지 않고 값 비교 

    - 예측하기 쉽다.

    // 일치 비교
    5 === 5; // true
    
    // 암묵적 타입 변환을 하지 않고 값을 비교한다.
    // 즉, 값과 타입이 모두 같은 경우에만 true 반환
    5 === '5; // false

     

    일치 비교 연산자에서 주의할 것은 NaN

    NaN: 자신과 일치하지 않는 유일한 값. 따라서, 숫자가 NaN인지 조사하려면 빌트인 함수 isNaN을 사용한다. 

    숫자 0도 주의!

    자바스크립트에는 양의 0음의 0이 있는데 이를 비교하면 true를 반환한다.

    // NaN은 자신과 일치하지 않는 유일한 값이다.
    NaN === NaN; // false
    // isNaN 함수는 지정한 값이 NaN인지 확인하고 그 결과를 불리언 값으로 반환한다.
    isNaN(NaN); // true
    isNaN(10); // false
    isNaN(1 + undefined); // true
    
    // 양의 0과 음의 0 비교
    0 === -0; // true
    0 == -0; // true

     

    2. 쉼표(,) 연산자

    쉼표(,) 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.

    var x, y, z;
    x = 1, y = 2, z = 3; // 3

     


     

    3.  typeof 연산자

    typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환한다. 

    7가지 문자열 "string", "number", "boolean", "undefined", "symbol", "object", "function" 중 하나 반환

    "null"을 반환하는 경우는 없으며, 함수의 경우 "function"을 반환한다. 

    이처럼 typeof 연산자가 반환하는 문자열은 7개의 데이터 타입과 정확히 일치하지는 않는다.

     

    typeof 연산자로 null 값을 연산해보면 "null"이 아닌 "obejct"를 반환한다는 데 주의하자. 이것은 버그! 하지만 기존 커드에 영향을 줄 수 있기 때문에 아직까지 수정되지 못하고 있다고 한다.

    따라서 값이 null 타입인지 확인할 때는 typeof 연산자 말고 일치 연산자(===)를 사용하자!

     


     

    4. 지수 연산자

    지수 연산자 **: 좌항의 피연산자를 밑(base)으로, 우항의 피연산자를 지수(exponent)로 거듭 제곱하여 숫자 값을 반환한다.

    음수를 거듭제곱의 밑으로 사용해 계산하려면 괄호로 묶어야 한다.

    2 ** 2; // 4
    2 ** 2.5; // 5.65685424949238
    2 ** 0; // 1
    2 ** -2; // 0.25
    
    -5 ** 2; // SyntaxError
    (-5) ** 2; // 25

     


    참고) 모던 자바스크립트 Deep Dive

    728x90
    반응형