07 연산자

• 연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다.
• 피연산자 : 연산의 대상, 값으로 평가될 수 있는 표현식
• 연산자는 값으로 평가된 피연사자를 연산해 새로운 값을 만든다.

7.1 산술 연산자

• 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다.
• 산술 연산이 불가능한 경우, NaN을 반환
• 피연산자의 개수에 따라 이항 산술 연산자와 단항 산술 연산자로 구분

7.1.1 이항 산술 연산자

• 이항 산술 연산자는 2개의 피연산자를 산술 연산하여 숫자 값을 만든다.
• 모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수효과가 없고 언제 새로운 값을 만든다.

+ 덧셈
- 뺄셈
* 곱셈
/ 나눗셈
% 나머지

7.1.2 단항 산술 연산자

• 단항 산술 연산자는 1개의 피연산자를 산술 연산하여 숫자 값을 만든다.

++ 증가 / 부수효과 O
-- 감소 / 부수효과 O
+ 어떠한 효과도 없다.
- 양수를 음수로, 음수를 양수로 반전한 값을 반환

• 증가/감소 연산자는 위치에 의미가 있다.
  - 전위 : 먼저 피연산자의 값을 증가/감소 시킨 후, 다른 연산자 수행
  - 후위 : 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소

var x = 5, result;

// 선할당 후증가
result = x++;
console.log(result, x); // 5 6

// 선증가 후할당
result = ++x;
console.log(result, x); // 7 7

• 숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용하면 피연산자를 숫자 타입으로 변환하여 반환
• 이때 피연산자를 변경하는 것은 아니고 숫자 타입으로 변환한 값을 생성해서 반환

var x = '1';

//문자열을 숫자로 타입변환
console.log(+x) // 1
console.log(x) // '1'

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

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

x = 'hello';
console.log(+x); // NaN 문자열을 숫자로 변환할 수 없다
console.log(x); // "hello"

• - 단항 연산자는 피연산자의 부호흘 반전한 값을 반환

-(-10); // 10

7.1.3 문자열 연결 연산자

• + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작

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

• 이렇게 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 변환된다.

7.2 할당 연산자

• 할당 연산자는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.
• 할당 연산자는 좌항의 변수에 값을 할당하므로 변수 값이 변하는 부수효과가 있다

= 
x = 5
+=
x += 5 | x = x + 5
-=
x -= 5 | x = x - 5
*=
x *= 5 | x = x * 5
/=
x /=5 | x = x / 5
%=
x %= 5 | x = x % 5

• 할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가된다.

7.3 비교 연산자

• 비교 연산자는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다.
• 주로 if 문이나 for 문과 같은 제어문의 조건식에서 주로 사용

7.3.1 동등/일치 비교 연산자

• 동등 비교 연산자와 일치 비교 연산자는 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환한다.
• 동등 비교 연산자는 느슨한 비교, 일치 비교 연산자는 엄격한 비교

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

• 동등 비교 연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.
• 따라서 결과를 예측하기 어렵고 실수하기 쉽다. 사용하지 않는 편이 좋다.
• 일치 비교 연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환한다.
• Object.is 메서드는 예측 가능한 정확힌 비교 결과를 반환하고 그 외에는 일치 비교 연산자와 동일하게 동작

7.3.2 대소 관계 비교 연산자

• 대소 관계 비교 연산자는 피연산자의 크기를 비교하여 불리언 값을 반환

> 
x > y x가 y보다 크다
<
x < y x가 y보다 작다
>=
x >= y x가 y보다 크거나 같다
<=
x <= y x가 y보다 작거나 같다

7.4 삼항 조건 연산자

• 삼항 조건 연산자는 조건식의 평과 결과에 따라 반환할 값을 결정한다.

  조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값

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

• 삼항 조건 연산자는 표현식은 값으로 평가할 수 있는 표현식인 문이다.
• 조건에 따라 수행해야 할 문이 하나가 아니라 여러개라면 if...else 문이 가독성이 더 좋다.

7.5 논리 연산자

• 논리 연산자는 우항과 좌항의 피연산자를 논리 연산한다

|| 논리합(or)
&& 논리곱(and)
! 부정(not)

• 논리 부정 연산자는 언제나 불리언 값을 반환
• 피연산자가 불리언 값이 아니면 불리언 타입으로 암묵적 타입 변환

!0; // true
!'hello'; // false

• 논리합 또는 논리곱 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다.
• 2개의 피연산자 중 어느 한쪽으로 평가된다.

'cat' && 'dog' // 'dog'

7.6 쉼표 연산자

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

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

7.7 그룹 연산자

• 소괄호('()')로 피연산자를 감싸는 그룹 연산자는 연산자의 우선순위를 조절할 수 있다.

7.8 typeof 연산자

• typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환
• number, boolean, undefined, symbol, object, function 중 하나를 반환
• null을 반환하는 경우는 없다(object로 반환)
• null 타입인지 확인할 때는 일치 연산자를 사용
• 선언하지 않은 식별자를 연산해보면 참조에러가 아닌 undefined를 반환한다.

7.9 지수 연산자

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

2 ** 2; //4

• 지수 연산자가 도입되기 이전에는 Math.pow 메서드를 사용했다.

Math.pow(2, 2); //4

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

(-5) ** 2; // 25

• 다른 산술 연산자와 마찬가지로 할당 연산자와 함께 사용할 수 있다.

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

• 이항 연산자 중에서 우선순위가 가장 높다

2 * 5 ** 2; // 50

7.10 그 외의 연산자

?. 옵셔널 체이닝 연산자
?? null 병합 연산자
delete 프로퍼티 삭제
new 생성자 함수를 호출할 때 사용하여 인스턴스를 생성
instaneof 좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별
in 프로퍼티 존재 확인

7.11 연산자의 부수 효과

• 대부분의 연산자는 다른 코드에 영향을 주지 않는다.
• 부수효과가 있는 연산자 : 할당 연산자, 증가/감소 연산자, deleta 연산자

7.12 연산자 우선순위

1 ()
2 new(매개변수 존재), [](프로퍼티 접근), ()(함수 호출), ?.(옵셔널 체이닝 연산자)
3 new(매개변수 미존재)
4 x++, x--
5 !x, +x, -x, ++x, --x, typeof, delete
6 **(이항 연산자 중에서 가장 높다)
7 *, /, %
8 +, -
9 <, <=, >, >=, in, instanceof
10 ==, !=, ===, !==
11 ??(null 병합 연산자)
12 &&
13 ||
14 ? ... : ...
15 할당 연산자(=, +=, -= ...)
16 ,

• 외우기 어려우므로 그룹 연산자를 사용하여 명시적으로 조절

7.13 연산자 결합 순서

• 연산자의 어느 쪽부터 평가를 수행할 것인지를 나타내는 순서

좌항 -> 우항 +, -, /, %, <, <=, >, =>, $$, ||, ., [], (), ??, ?., in, instanceof
우항 -> 좌항 ++, --, 할당 연산자, !x, +x, ++x, --x, typeof, delete, ? ... : ..., **