[7장] 연산자

writed by hanryu1109

• 연산자(operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리 타입, 지수 연산 등을 수행해 하나의 값을 만든다.
• 연산의 대상을 피대상자(operand)라 한다. 피연산자는 값으로 평가될 수 있는 표현식이어야 한다.

1. 산술 연산자

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

1.1 이항 산술 연산자

• 이항(binary) 산술 연산자는 2개의 피연산자를 산술 연산하여 숫자 값을 만든다.
• 모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수 효과가 없다. 다시 말해, 어떤 산술 연산을 해도 피연산자의 값이 바뀌는 경우는 없고 언제나 새로운 값을 만들 뿐이다.

이항 산술 연산자	의미	부수효과
+	덧셈	X
-	뺄셈	X
*	곱셈	X
/	나눗셈	X
%	나머지	X

1.2 단항 산술 연산자

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

단항 산술 연산자	의미	부수효과
++	증가	O
--	감소	O
+	어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다.	X
-	양수를 음수로, 음수를 양수로 반전한 값을 반환한다.	X

• 이항 산술 연산자와는 달리 증가/감소(++/--) 연산자는 피연산자의 값을 변경하는 부수 효과가 있다. 다시 말해, 증가/감소 연산을 하면 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.

var x = 1;

// ++ 연산자는 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
x++; // x = x + 1;
console.log(x); // 2

// -- 연산자는 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
x--; // x = x - 1;
console.log(x); // 1

• 증가/감소(++/--) 연산자는 위치에 의미가 있다.
  • 피연산자 앞에 위치한 전위 증가/감소 연산자(prefix increment/decrement operator) 는 먼저 피연산자의 값을 증가/감소시킨 후, 다른 연산을 수행한다.
  • 피연산자 뒤에 위치한 후위 증가/감소 연산자(postfix increment/decrement operator) 는 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소 시킨다.

var x = 5,
  result;

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

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

// 선할당 후감소(postfix decrement operator)
result = x--;
console.log(result, x); // 7 6

// 선감소 후할당(prefix decrement operator)
result = --x;
console.log(result, x); // 5 5

• + 단항 연산자는 피연산자에 어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다.
• - 단항 연산자는 피연산자의 부호를 반전한 값으로 반환한다.
  -(-10); // → 10
  
  
  

1.3 문자열 연결 연산자

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

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

// 산술 연산자
1 + 2; // 3

// true는 1로 타입 변환된다.
1 + true; // 2

// false는 0으로 타입 변환된다.
1 + false; // 1

// null은 0으로 타입 변환된다.
1 + null; // 1

// undefined는 숫자로 타입 변환되지 않는다.
+undefined; // NaN
1 + undefined; // NaN

• 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다. 이를 암묵적 타입 변환 또는 타입 강제 변환이라고 한다.
  
  
  
  

2. 할당 연산자

• 할당 연산자(assignment operator)는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.
• 할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가된다.
  
  
  
  

3. 비교 연산자

• 비교 연산자(comparison operator)는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다.
  
  
  

3.1 동등/일치 비교 연산자

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

비교 연산자	의미	사례	설명	부수 효과
==	동등 비교	x == y	x와 y의 값이 같음	X
===	일치 비교	x === y	x와 y의 값과 타입이 같음	X
!=	부동등 비교	x != y	x와 y의 값이 다름	X
!==	부일치 비교	x !== y	x와 y의 값과 타입이 다름	X

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

// 동등 비교
5 == 5; // → true

// 타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시키면 동등하다.
5 == "5"; // → true

• 등등 비교(==) 연산자는 예측하기 어려운 결과를 만들어 낸다. 따라서 동등 비교 연산자는 사용하지 않는 편이 좋다. 대신 일치 비교(===) 연산자를 사용한다.
• 일치 비교(===) 연산자는 좌항과 우항의 피연산자고 타입도 값고 값도 같은 경우에 한하여 true를 반환한다. 다시 말해, 암묵적 타입 변환을 하지 않고 값을 비교한다.

• 일치 비교 연산자에 주의할 것은 NaN이다.
• NaN은 자신과 일치하지 않는 유일한 값이다. 따라서 숫자가 NaN인지 조사하려면 빌트인 함수 isNaN을 사용한다.

// NaN은 자신과 일치하지 않는 유일한 값이다.
NaN === NaN; // → false

// isNaN 함수는 지정한 값이 아닌 NaN인지 확인하고 그 겨로가를 불리언 값으로 반환한다.
isNaN(NaN); // → true
isNaN(10); // → false
isNaN(1 / undefined); // → false

3. 대소 관계 비교 연산자

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

4. 삼항 조건 연산자

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

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

• 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다. 따라서 삼항 조건 연산자 표현식은 값처럼 다른 표현식의 일부가 될 수 있어 매우 유용하다.

var x = 10;

// 삼항 조건 연산자 표현식은 표현식인 문이다. 따라서 값처럼 사용할 수 있다.
var result = x % 2 ? "홀수" : "짝수";
console.log(result); // '짝수'

5. 논리 연산자

• 논리 연산자는 우항과 좌항의 피연산자(부정 논리 연산자의 경우 우항의 피연산자)를 논리 연산한다.

논리 연산자	의미	부수 효과
||	논리합(OR)	X
&&	논리곱(AND)	X
!	부정(NOT)	X

• 논리 부정(!) 연산자는 언제나 불리언 값을 반환한다. 단, 피연산자가 반드시 불리언 값일 필요는 없다. 만약 피연산자가 불리언 값이 아니면 불리언 타입으로 암묵적 타입 변환된다.

// 암묵적 타입 변환
!0; // → true
!"Hello"; // → false

• 논리합(||) 또는 논리곱(&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다.

// 단축 평가
"Cat" && "Dog"; // → Dog

6. 쉼표 연산자

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

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

7. 그룹 연산자

• 소괄호("()")로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다. 따라서 그룹 연산자를 사용하면 우선순위를 조절할 수 있다.

8. typeof 연산자

• typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환한다.
• typeof 연산자가 반환하는 문자열은 7개의 데이터 타입과 정확히 일치하지 않는다.

typeof ""; // → "string"
typeof 1; // → "number"
typeof NaN; // → "number"
typeof true; // → "boolean"
typeof undefined; // → "undefined"
typeof Symbol(); // → "symbol"
typeof null; // → "object" 🔥
typeof []; // → "object"
typeof {}; // → "object"
typeof new Date(); // → "object"
typeof /test/gi; // → "object"
typeof function () {}; // → "function" 🔥

• 선언하지 않는 식별자를 typeof 연산자로 연산해 보면 ReferenceError가 발생하지 않고 undefined를 반환한다.
  
  
  
  

9. 지수 연산자

• ES7에서 도입된 지수 연산자는 좌항의 피연산자를 밑(base)으로, 우항의 피연산자를 지수(exponent)로 거듭제고하여 숫자 값을 반환한다.
• 지수 연산자는 이항 연산자 중에서 우선순위가 가장 높다.

2 ** 2; // 4
2 ** 3; // 8

10. 그 외의 연산자

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

11. 연산자의 부수 효과

• 부수 효과가 있는 연산자는 할당 연산자(=), 증가/감소 연산자(++/--), delete 연산자다.

var x;

// 할당 연산자는 변수 값이 변하는 부수 효과가 있다. 이는 x 변수를 사용하는 다른 코드에 영향을 준다.
x = 1;
console.log(x);

// 증가/감소 연산자(++/--)는 피연산자의 값을 변경하는 부수 효과가 있다.
// 피연산자의 x의 값이 재할당되어 변경된다. 이는 x 변수를 사용하는 다른 코드에 영향을 준다.
x++;
console.log(x); // 2

var o = { a: 1 };

// delete 연산자는 객체의 프로퍼티를 삭제하는 부수 효과가 있다. 이는 o 객체를 사용하는 다른 코드에 영향을 준다.
delete o.a;
console.log(o); // {}