[JS] Operator

1. 산술 연산자

수학적 계산을 수행해 새로운 숫자 값을 만든다.
산술 불가일 경우, NaN을 반환.

5 + 2;  // 7
5 - 2;  // 3
5 * 2;  // 10
5 / 2;  // 2.5
5 % 2;  // 1

let x = 1;
x++;  // 2
x--;  // 1

+) ++/--가 피연산자 앞에 나올 경우, 먼저 피연산자의 값을 증가/감소시킨다.
반대의 경우, 먼저 다른 연산을 수행한 후 피연산자의 값을 증가/감소.

형변환이 되는 경우

개발자의 의도와는 상관없이ㅣ 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 경우. (=암묵적 타입 변환)

let x = '1';
+x;  // 1
x;  // '1'

x = false;
+x;  // 0

'1' + 2;  // '12'
1 + true;  // 2
+undefined;  // NaN

2. 할당 연산자

우항의 피연산자 평가 결과를 좌항의 변수에 할당.

let x;
x = 10;
x += 5;  // 15
x -= 5;  // 10
x *= 5;  // 50
x /= 5;  // 10
x %= 5;  // 0

3. 비교 연산자

좌항과 우항의 피연산자를 비교하여 불리언 값을 반환.
if 문이나 for문과 같은 제어문 조건식에서 주로 사용.

5 == '5';  // true (anti pattern)
5 === '5';  // fasle (type까지 비교)
5 !== '5';  // true
NaN === NaN;  // false (NaN은 자신과 일치하지 않는 유일한 값)

5 > 0;  // true
5 >= 5;  // true

+) 숫자가 NaN인지 확인하려면 빌트인 함수 isNaN을 사용할 수 있지만, 안티패턴임.
ES6에서 도입된 Object.is메서드를 사용하거나 Number.isNaN이 정확하다.

4. 삼항 조건 연산자

조건식의 평가 결과에 따라 반환 값을 결정.
조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값.

const x = 2;
const result = x % 2 ? '홀수' : '짝수';  // 짝수 (0은 falsy한 값으로 평가되니까)

5. 논리 연산자

우항과 좌항의 피연산자를 논리 연산

true || true;  // true
false || true;  // true
false || false; // false

true && true;  // true
true && false;  // false
false && true;  // false

!true; // false

// boolean이 아닌 값에 !를 붙이면 암묵적 타입 변환이 된다.
// 여기에 !를 한번 더 붙여 true/false값을 반환할 수 있다.
!0  // true
!!0  // false
!''  // true
!!'' // false

6. typeof 연산자

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

typeof ''  // 'string'
typeof 0  // 'number'
typeof NaN  // 'number'
typeof true  // 'boolean'
typeof undefined  // 'undefined'
typeof null  // 'object' (주의)
typeof Symbol()  // 'symbol'
typeof []  // 'object' (주의)
typeof {}  // 'object'
typeof new Date()  // 'object'
typeof /test/gi  // 'object'
typeof function () {}  // 'function'

7. 쉼표 연산자

왼쪽 피연산자부터 차례로 피연산자를 평가하고, 마지막 피연산자의 평가가 끝나면 해당 평가 결과를 반환.

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

8. 그룹 연산자

소괄호()로 감싸서 자신의 피연산자 표현식을 가장 먼저 평가. 연산 우선순위 조절할 때 쓰임.
연산자의 우선순위를 외우기 보다 그룹 연산자를 사용하는게 더 편하다.

9. 지수 연산자

좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭제곱해 숫자를 반환.

2 ** 2;  // 4
(-5) ** 2;  // 25
Math.pow(2, 2);  // 4

let num = 5;
num **= 2;  // 25

10. 그 외의 연산자

// 옵셔널 체이닝 연산자
const obj = {
  a: {
    b: 1
  }
}
obj?.a?.b;  // 1
obj?.a?.b?.c;  // undefined

// null 병합 연산자
!0  // true
!!0  // false
!''  // true
!!'' // false

// 프로퍼티 삭제
delete obj.a.b;  // {a: {}}

// 생성자 함수 호출할 때 인스턴스 생성
class Person {
  constructor (name, sex) {
    this.name = name;
    this.sex = sex;
  }
}
const me = new Person('suhyeon', 'female');
me;  // Person { name: 'suhyeon', sex: 'female' }

// 좌변의 객체가 우변의 인스턴스인지 판별
[] instanceof Array;  // true

// 프로퍼티 존재 확인
a in obj;  // true

참고: deep dive JS