연산자 (Operators)

다른 언어와 마찬가지로 자바스크립트도 다양한 연산자를 가집니다.

 

연산자의 종류

수학연산자 (arithmetic operators)

1. 더하기 addition ( + )

const result = 2 + 3;

더하기 연산자의 경우 문자를 연결하는 기능 (concatenation)도 합니다. 주의할 점은 문자와 숫자를 연결할 경우 결과는 텍스트로 표시됩니다.

const result = "one" + " " + "and" + " " + 2;

따라서 문자형태의 숫자와 일반 숫자를 +로 연결하면 연산된 결과가 아닌 결합된 문자의 형태로 반환됩니다.

const result = "1" + 2;

2. 빼기 subtraction ( + )

const result = 2 - 3;

3. 곱하기 multiplication ( * )

const result = 2 * 3;

4. 나누기 division ( / )

const result = 2 / 3;

5. 나머지 modulus ( % )

const result = 5 % 3;

6. 제곱 exponentiation ( ** )

const result = 2 ** 3;  // Math.pow(2, 3)과 같은 결과

 

7. 증가 increment ( ++ )

가치를 1씩 증가시킴

let x = 2;
x++;
++x;

8. 감소 decrement ( -- )

가치를 1씩 감소시킴

let x = 2;
x--;
--x;

9. 음수 Unary negation ( - )

let x = -2;

 

Bitwise 연산자

bit연산자는 입력된 숫자를 32bit 숫자(0과 1로 구성)로 변환하고 연산된 결과를 다시 일반 숫자로 표시합니다.

1. AND ( & )

2. OR ( | )

3. NOT ( ~ )

4. XOR ( ^ )

5. left shift ( << )

6. right shift ( >> )

7. unsigned right shift ( >>> )

 

 

정의 assignment operator( = )

1. 일반정의

const num = 10; // variable 'num'에 가치 10을 지정

 

2. 더하기 addition assignment ( += )

let x = 2;
x += 3

+ 수학연산자와 마찬가지로 텍스트 결합도 가능합니다.

let t = "Good";
t += "morning";

3. 빼기 subtraction assignment ( -= )

let x = 2;
x -= 3

3. 곱하기 multiplication assignment ( *= )

let x = 2;
x *= 3

4. 나누기 division assignment ( /= )

let x = 2;
x /= 3

5. 나머지 modulus assignment ( %= )

let x = 2;
x %= 3

6. 제곱 exponentiation assignment ( **= )

let x = 2;
x **= 3

7. Shift assignment operators

 

let x = 2;
x <<= 3

 

let x = 2;
x >>= 3

 

let x = 2;
x >>>= 3

8. bitwise assignment operators

let x = 2;
x &= 3

 

let x = 2;
x ^= 3

 

let x = 2;
x |= 3

9. logical assignment operators

1. ( &&= )

첫 번째 가치가 'true'일 경우 두 번째 가치가 지정됨

let x = 2;
x &&= 3

2. ( ||= )

첫 번째 가치가 'false'일 경우 두 번째 가치가 지정됨

let x = 2;
x ||= 3

3. nullish coalescing assignment ( ??= )

첫 번째 가치가 'undefined'이거나 'null'일 경우 두 번째 가치가 지정됨

let x = 2;
x ??= 3

10. Destructuring assignment

정의를 통해 객체나 배열 안의 값을 분리하여 사용할 수 있게 해 줍니다. 예를 들어 아래와 같은 구조의 배열 또는 객체가 존재할 때

const array = ['one', 'two', 'three'];
const object = {one: 1, two: 2, three: 3};

아래와 같이 개별값 (키)에 다시 지정하여 배열이나 객체를 통하지 않고 바로 사용이 가능합니다.

const [one, two, three] = array;
const {one, two, three} = object;

 

비교연산자

비교 연산자는 연산자의 좌측 값을 우측 값과 비교합니다.

 

1. 값 일치 ( == )

자바스크립트 타입의 변형이 자유로운 언어인데요. 다른 언어와 달리 ==를 사용 시 단순히 값만 비교하여 문자와 숫자를 비교하더라도 값이 일치하면 아래와 값이 참이 반환됩니다.

let flag = false
if(1 == '1') {
  flag = true
}

2. 값과 타입 일치 ( === )

대부분의 경우 다른 타입의 값이 일치가 참으로 반환되는 것보다 타입까지 일치하는 경우 참으로 반환되는 것을 원하는 경우가 많은데요. 이러한 경우 === 연산자를 사용합니다.

let flag = false
if(1 === '1') {
  flag = true
}

3. 값 불일치 ( != )

let flag = false
if(1 != '1') {
  flag = true
}

4. 값과 타입 불일치 ( !== )

let flag = false
if(1 !== '1') {
  flag = true
}

5.  초과 ( > )

let flag = false
if('2' > '1') {
  flag = true
}

6. 미만 ( < )

let flag = false
if(2 < 3) {
  flag = true
}

7. 이상 ( >= )

let flag = false
if('2' >= '2') {
  flag = true
}

8. 이하 ( <= )

let flag = false
if(2 <= 2) {
  flag = true
}

논리연산자

AND ( && )

연산자의 앞과 뒤에 오는 모든 조건이 참일 때 발동

let flag = false
if(2 <= 2 && true) {
  flag = true
}

OR ( || )

연산자의 앞과 뒤에 오는 모든 조건 중 하나라도 참일 때 발동

let flag = false
if(2 <= 2 || false) {
  flag = true
}

NOT / Negation ( ! )

조건이 거짓일 때 발동

let flag = false
if(2 != 3) {
  flag = true
}

부정

조건 앞에 붙어서 참은 거짓으로 거짓은 참으로 만듦

let flag = false
if(!false) {
  flag = true
}

 

 

Nullish coalescing operator ( ?? )

Nullish coalescing 연산자는 ?? 앞에 오는 값이 'null' 또는 'undefined'가 아닌 경우 그 값을 표시하고 'null' 또는 'undefined'인 경우 다음에 오는 값을 표시합니다.

Optional chaining operator ( ?. )

값이나 요소를 가져올 때 값이 존재하지 않아 'undefined' 또는 'null'이라도 오류를 발생시키지 않도록 하는 연산자입니다.

존재하지 않는 요소를 호출하여 어떤 요구를 하면 아래와 같이 에러가 발생하는데요. 

이때 ?.연산자로 연결할 경우 에러를 방지할 수 있습니다.

 

Conditional (Ternary) operator

Ternary 연산자는 조건의 참과 거짓을 바탕으로 코드를 실행하는 연산자로 if문에 비해 문법이 간결하나 복잡한 구조의 조건문은 소화하지 못하는 단점이 있습니다. 사용법은 "조건 ? 참조건 : 거짓조건"의 형태로 사용됩니다.

let result = true ? 'true' : 'false';

 

관계연산자

1. in

객체 안에 해당 값이 포함된 경우 참을 반환.

value in objectName

2. instanceof

객체 타입이 일치하는 경우 참을 반환.

objectName instanceof type

 

연산자 간 우선순위

연산자는 상호 간의 우선순위가 높은 연산자가 먼저 일어나고 우선순위가 같은 경우에는 결합법칙에 의해 좌에서 우로 또는 우에서 좌로 연산이 이루어집니다.

 

precedence (우선순위)

Operator precedence - JavaScript | MDN

 

associativity (결합법칙)

일반적으로 연산자는 같은 우선순위를 가질 때 좌에서 우로 연산이 일어나지만 정의와 제곱 연산자는 반대로 우에서 좌로 연산이 일어납니다.

 

---

 

참고

 

JavaScript Operators

 

JavaScript Comparison and Logical Operators

 

Expressions and operators - JavaScript | MDN