자바스크립트 DeepDive 7장 연산자

• 연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행하여 하나의 값을 만든다.
• 이 때 연산의 대상을 피연산자라고 함.

7.1. 산술 연산자

• 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만듬. 산술 연산이 불가능한 경우, NaN을 반환함.
• 이항 산술 연산자
  • 2개의 피연산자를 산술 연산하여 숫자 값을 만듬.
  • 부수 효과가 없음.

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

• 단항 산술 연산자
  • 1개의 피연산자를 산술 연산하여 숫자 값을 만듬.
  • 증가/감소(++/—) 연산자는 피연산자의 값을 변경하는 부수 효과가 있음.

let x = 5, result; 

result = x++;
console.log(result); 5

result = x--; 
console.log(result); 6

result = ++x; 6
console.log(result); 6

result = --x; 5
console.log(result); 5

• 단항 연산자

var x = '1';

// 문자열을 숫자 타입 변환함.

console.log(+x); 1
console.log(x); '1'

x = true;
console.log(+x); // 1
console.log(x);

x = false;
console.log(+x); // 0

x = 1;
console.log(-x); // -1;

• 문자열 연결 연산자
  • 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작함.
  • 그 외의 경우는 산술 연산자로 동작함.

// 문자열 연결 연산자
'1' + 2; = '12'
1 + '2'; = '12'

// null은 0으로 타입 변환
1 + null = 1

+undefined; // NaN
1 + undefined; // NaN

 

7.2. 할당 연산자

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

 

var x; 

x = 10;
console.log(x); 10

x += 5;
console.log(x); 15

x -= 5;
console.log(x); 10 

x *= 5;
console.log(x); 50

x /= 5;
console.log(x); 10

x %= 5;
console.log(x); 0

var str = 'My name is';

// 문자열 연결 연산자
str += 'Lee';

 

7.3. 비교 연산자

• 비교 연산자는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언으로 반환
• 동등/일치 비교 연산자

동등 비교: x == y (x와 y의 값이 같음)
일치 비교: x === y (x와 y의 값과 타입이 같음) 
부동등 비교: x != y (x와 y의 값이 다름)
불일치 비교: x !== y (x와 y의 값과 타입이 다름)

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

// 안티패턴이므로 굳이 기억안해도 됨. 

* '0' == '' // false -> 좀 더 공부 필요 -> '0'이고 '' 자체가 ''가 되서 ''
0 == '' // true
0 == '0' // true
false == null; // false
false == undefined // false

• 일치 비교(===) 연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환
• NaN 은 자신과 일치하지 않는 유일한 값

isNaN(NaN); true
isNaN(10); false
isNaN(1 + undefined); true

• Object.is
  • NaN 과 NaN 을 비교하면 다른 값이라고 평가하지만 이 메서드를 이용하면 예측 가능한 정확한 비교 결과를 반환함.

Object.is(-0, +0); false

Object.is(NaN, NaN); true

 

7.4. 삼항 조건 연산자

• 삼항 조건 연산자는 조건식의 평가 결과에 따라 반환할 값을 결정함.
• 자바스크립트의 유일한 삼항 연산자이며, 부수 효과는 없음.

let result = score >= 60? 'pass' : 'fail';

```jsx
let x = 2; 

let result = x % 2? '홀수' : '짝수';

console.log(result);
```

 

7.5. 논리 연산자

• 논리 연산자는 우항과 좌항의 피연산자를 논리 연산함.

true || true  true
true || false true
false || true true
false || false false

true && true true
true && false false
false && true false
false && false false

!true -> false
!false -> true

 

7.6. 쉼표 연산자

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

var x, y, z;

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

 

7.7. 그룹 연산자

• 연산자의 우선순위가 가장 높음.

10 * (2 + 3);

 

7.8 typeof 연산자

• typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환.
• “string”, “number”, “boolean”, “undefined”, “symbol”, “object”, “function” 중 하나 반환

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

• 선언하지 않은 식별자를 typeof 연산자로 연산해 보면 undefined를 반환함.

typeof undeclared; -> undefined

 

7.9 지수 연산자

• ES7에서 도입된 지수 연산자는 좌항의 피연산자를 밑으로 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값을 반환

2 ** 2; // 4

2 ** 2 ** 2 // 16
Math.pow(Math.pow(2, 2), 2); // 16

• 지수 연산자는 할당 연산자와 함께 사용할 수 있음. 

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

 

 

7.10. 그 외의 연산자

• 옵셔널 체이닝(?.)
• ES11(ECMAScript2020)에서 도입된 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어감.
• 옵셔널 체이닝 연산자 ?는 좌항 피연산자가 false로 평가되는 Falsy 값(false, undefined, null, 0, -0, NaN, ‘’)이라도 null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어감.

let str = 'data';

let length = str?.length;

console.log(length);

• null 병합 연산자
• ES11(ECMAScript2020)에서 도입된 null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환함.

let elem = null;
let foo = elem ?? 'default string';

console.log(foo); 'default string';

elem = 'ee';
foo = elem ?? 'default string';

console.log(foo); // ee

 

• 프로퍼티 삭제
  • delete 연산자는 객체의 프로퍼티를 삭제함.
  • 이 때의 delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 함.

let person = {
	name: 'Lee'
}

person.age = 20;
delete person.age;