연산자

new

정의한 생성자 (객체 생성 메서드)를 통해 객체를 생성하여 할당하는 연산자


Optional Chaining ( ?. )

왼쪽 피연산자가 null이거나 undefined라면 undefined를 반환하고 아니면 오른쪽 피연산자를 반환하는 연산자

주로 객체에 접근할때 사용하는데, 만약 중첩객체라고 한다면, 중간 프로퍼티가 undefined라면 그 아래의 데이터에는 접근을 하지못하고 error가 뜨는 것을 방지하기 위함이다.

let user = {
  name: 'hong',
  likes: {
    fruit: 'apple',
    sports: 'tennis',
  },
};

console.log(user.pw?.createdDate); //undefined
console.log(user.pw.createdDate); //TypeError

본래라면 undefined의 프로퍼티를 찾으려고 하기 때문에 에러가 뜨는데 이를 막아주는 역할을 한다.


단항 연산자

연산자 의미
a++ 후위 증가
a– 후위 감소
! 논리 NOT
~ 비트 NOT
+ 양의 부호 (숫자가 아닌 자료형은 숫자로 변환)
- 단항 부정 (부호를 뒤집는다)
++a 전위 증가
–a 전위 감소

◾ typeof

피연산자의 자료형을 나타내는 연산자로 자동형변환 되기 전의 자료형을 표시한다.

console.log(typeof 12); //"number"
console.log(typeof true); // "boolean"

◾ void

피연산자(표현식)을 수행 후 undefined 반환

console.log(void console.log('12') === undefined); // 12 출력후 true출력

◾ delete

객체 자기 자신의 프로퍼티를 제거하는 연산자로 성공 시 true반환

let user = {
  lastName: 'hong',
};
delete user.lastName;
console.log(user.lastName); //undefined

let fruit = ['apple', 'oragne', 'banana'];
delete fruit[1];
console.log(fruit); //["apple", empty, "banana"]

◾ await

async 메서드 내에서 Promise를 기다리기 위해 사용


산술 연산

◾ **

지수 (거듭 제곱)을 표현하기 위한 연산자

console.log(2 ** 3); //8

◾ + , - , * , %

다른 언어들과 대부분 비슷하나 /, % 연산은 소숫점까지 계산된다.

console.log(1 / 2); //0.5
console.log(1 / 3); //0.3333333333333333
console.log(4.5 % 3); //1.5


시프트 연산

◾ «

32 bit로 표현된 숫자 데이터를 왼쪽으로 옮기는 연산자로 over된 bit는 버려지고 새로 채워지는 bit는 0으로 채워진다.

◾ »

<<와 반대로 동작하는 연산자 이지만 옮기려는 왼쪽 피연산자가 음수이면 1로 채워지고 양수이면 0으로 채워진다.

◾ »>

왼쪽 피연산자의 부호에 상관없이 왼쪽은 0으로 채워진다.

console.log(-2 << 2); // 8
console.log(2 << 2); //-8
console.log(5 >> 1); // 2
console.log(-5 >> 1); //-3
console.log(-5 >>> 1); //2147483645


instanceof

생성자의 prototype 속성이 객체 프로토타입 체인 안에 존재하는 지 판별

let user = {
  lastName: 'hong',
};
console.log(user instanceof Object); // true

let str = new String('123');
console.log(str instanceof String); // true
console.log(str instanceof Object); // true


in

프로퍼티 in 객체와 같이 쓰이며 프로퍼티가 객체 안에 있는지 판별

let user = {
  lastName: 'hong',
  firstName: null,
  likes: '',
};
console.log('lastName' in user); // true
console.log('hong' in user); // false
console.log('__proto__' in user); // true


비교 연산자

왼쪽 피연산자를 오른쪽 피연산자와 비교해 조건이 충족 된다면 true 리턴

연산자 의미
> 초과
>= 이상
< 미만
<= 이하

◾ 일치 연산자 ( === / !== )

형변환 없이 값을 비교 => 자료형까지 같아야한다.

◾ 동등 연산자 ( == / !=)

비교하려는 두개의 값의 자료형이 같으면 그대로 비교하고 다르면 숫자로 바꾸어 비교한다.

이때 문제가 발생하는데 0과 false를 구별하지 못하고, null과 undefined는 형변환을 하지 않고 null과 undefined를 비교시 true가 반환된다.

때문에 정확히 비교를 하고자 하면 일치 연산자를 사용하자

console.log(3 == '3'); //true
console.log(3 === '3'); //false

console.log(0 == false); //true
console.log(0 === false); //false
console.log(0 == 'false'); //false : 숫자가 아니 문자열을 숫자로 바꾸면 NaN반환

console.log(0 == null); //false
console.log(undefined == null); //true
console.log(undefined === null); //false

console.log(0 === -0); //true
console.log(Infinity == -Infinity); //false
console.log(NaN === NaN); //false
console.log(Object.is(0,0-)); //false
console.log(Object.is(NaN,NaN)); //true

추가적으로 NaN은 자기 자신 포함해서 어느것과 같지 않고 0과 -0은 0으로 같지만 이마저도 정확하게 표현하고 싶다면 Object.is()를 사용하면 된다.


비트 연산자

| : 비트 OR

  • 1 | 1 = 1
  • 1 | 0 = 1
  • 0 | 0 = 0

^ : 비트 XOR

  • 1 ^ 1 = 0
  • 1 ^ 0 = 1
  • 0 ^ 0 = 0

& : 비트 AND

  • 1 & 1 = 1
  • 1 & 0 = 0
  • 0 & 0 = 0


널 병합 연산자 (Nullish coalescing)

왼쪽 피연산자가 null or undefined일 때 오른쪽 피연산자를 반환 하고 아니면 왼쪽 피연산자를 반환하는 연산자

||단락 회로 평가로 인해 왼쪽 연산자가 true거나 false면 바로 반환을 하는데 0/""/NaN/null/undefined인 경우에는 boolean타입으로 변환이 되지 않아 오른쪽 피연산자를 반환한다.
이 때, 왼쪽 피연산자가 0, ““을 데이터로 갖고있는 경우의 문제를 피하기 위한 연산자이다.

??도 마찬가지로 단락 회로 평가된다.

let user = {
  lastName: 'hong',
  firstName: null,
  likes: '',
};
var name = user.firstName ?? '이름은 없습니다.'; //"이름은 없습니다"
var like = user.likes ?? '사과'; //""


논리 연산자

  • && : 논리 AND
  • || : 논리 OR


조건 ( ? : )

(조건) ? x : y 의 형태로 조건식이 참이면 x를 false면 y를 반환하는 연산자이다.

let user = {
  lastName: 'hong',
  firstName: 'GilDong',
};
var name = user.firstName !== undefined ? user.firstName : '이름은 없습니다.';


대입 (=)

오른쪽 피연산자를 왼쪽의 피연산자에 할당하는 연산자

◾ 복합 대입연산자

연산자 의미
x += y x = x + y
x -= y : x = x - y
x *= y x = x * y
x /= y x = x / y
x %= y x = x % y
x **= y x = x^y(제곱)
x <<= y x = x << y
x >>= y x = x >> y
x >>>= y x = x >>> y
x &= y x = x & y
x ^= y x = x ^ y
x |= y x = x | y




Refernece

https://ko.javascript.info/