{JS} 04.연산자

• operator : 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만드는 것
• 연산의 대상은 피연산자라 하고, 값으로 평가될 수 있는 표현식 이여야함
  (피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식)

// 산술 연산자
5 * 4 // 20

// 문자열 연결 연산자
' My name is ' + ' Lee ' // 'My name is Lee'

// 할당 연산자
color = 'red' // red

// 비교 연산자
3 > 5 // false

// 논리 연산자
true && false // false

// 타입 연산자
typeof 'Hi' // string

---

4.1 산술 연산자

• arithmetic operator : 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만들고 연산이 불가한 경우 NaN을 반환
• 피연산자의 개수에 따라 이항 산술 연산자와 단항 산술 연산자로 구분

4.1.1 이항 산술 연산자

• binary : 2개의 피연산자를 산술 연산하여 숫자값 만듦
• 피연산자의 값이 바뀌는 부수 효과 없음, 새로운 값만 만듦

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

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

4.1.2 단항 산술 연산자

• unary : 1개의 피연산자를 산술하여 숫자 값 만듦
• 증가/감소(++/--) 연산자는 피연산자 값을 변경하는 부수 효과 있음

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

증가/감소(++/--) 연산을 하면 피연산자의 값을 변경하는 암묵적 할당 이뤄짐

var x = 1;

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

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

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

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 increment operator)
result = x--;
console.log(result, x); // 7 6

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

• (+)단항 연산자는 피연산자에 어떤 효과도 없음, 음수를 양수로 반전하지도 않음
• 숫자 타입이 아닌 피연산자에 (+)단항 연산자를 사용하면 피연산자를 숫자 타입으로 변환해 반환 (피연산자를 변경하는 것 아님)

// 아무런 효과 없음
+10; // 10
+(-10); // -10

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

// 문자열을 숫자로 타입 변환할 수 없어 NaN 반환
x = 'Hello';
console.log(+x); // NaN
// 부수 효과 없음
console.log(x); // "Hello"

• (-)단항 연산자는 피연산자의 부호를 반전한 값을 반환
• (+)단항 연산자와 동일하게 숫자 타입이 아닌 피연산자에 사용하면 피연산자를 숫자 타입으로 변환하여 반환 (피연산자를 변경하는 것 아님)

// 부호 반전
-(-10); // 10

// 문자열을 숫자로 타입 변환
-'10'; // -10

// 불리언 값을 숫자로 타입 변환
-true; // -1

// 문자열은 숫자로 타입 변환할 수 없어 NaN 반환
-'Hello'; // NaN

4.1.3 문자열 연결 연산자

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

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

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

암묵적 타입 변환 or 타입 강제 변환

true를 숫자 타입인 1로 강제 변환한 후 연산 수행

// true는 1로 타입 변환됨
1 + true; // 2

// false는 0으로 타입 변환됨
1 + false; // 1

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

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

---

4.2 할당 연산자

• assignment operator : 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당
• 변수 값이 변하는 부수효과 있음

할당 연산자	예	동일 표현	부수 효과
=	x = 5	x = 5	O
+=	x += 5	x = x + 5	O
-=	x -= 5	x = x - 5	O
*=	x *= 5	x = x * 5	O
/=	x /= 5	x = x / 5	O
%=	x %= 5	x = x % 5	O

var x;

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

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

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

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

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

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

var str = 'My name is';

// 문자열 연결 연산자
str += 'Kim'; // str = str + 'kim';
console.log(str); // 'My name is Kim'

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

var x;
// 할당문은 표현식인 문
console.log(x = 10); // 10

• 이런 특징을 활용해 여러 변수에 동일한 값 연쇄할당 가능

var a,b,c;
// 연쇄 할당, 오른쪽에서 왼쪽으로 진행
// 1️⃣ c = 0 : 0으로 평가
// 2️⃣ b = 0 : 0으로 평가
// 3️⃣ a = 0 : 0으로 평가
a = b = c = 0;
console.log(a, b, c); // 0 0 0

---

4.3 비교 연산자

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

4.3.1 동등/일치 비교 연산자

• 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값 반환
  ( 비교하는 엄격성의 정도 다름 )
• loose equality : 느슨한 비교
• strict equality : 엄격한 비교

비교 연산자	의미	사례	설명	부수 효과
==	동등 비교	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 반환 ( 암묵적 타입 변환 하지 않고 값 비교 )

// 일치 비교
5 === 5; // true
// 암묵적 타입 변환을 하지 않고 값을 비교
// 값과 타입이 모두 같은 경우만 true 반환
5 === '5'; // false

동등 비교 연산자는 예측 어려움, 일치 비교 연산자는 예측이 쉬움

• 일치 비교 연산자에서 NaN과 숫자0 주의
  NaN은 자신과 일치하지 않는 유일한 값, 숫자가 NaN인지 확인하려면 빌트인 함수 Number.isNaN 사용

// NaN은 자신과 일치하지 않는 유일한 값
NaN === NaN; // false
// Number.isNaN 함수는 지정한 값이 NaN인지 확인하고 결과를 불리언 값으로 반환
Number.isNaN(NaN); // true
Number.isNaN(10); // false
Number.isNaN(1 + undefined); // true

// 양의 0과 음의 0 비교, 일치 비교/동등 비교 모두 결과는 true
0 === -0; // true
0 == -0; // true

• 동등 비교 (==) 연산자의 반대개념 : 부동등 비교 연산자 (!=)
• 일치 비교 (===) 연잔자의 반대개념 : 불일치 비교 연산자 (!==)

// 부동등 비교
5 != 8; // true
5 != 5; // false
5 != '5'; // false

// 불일치 비교
5 !== 8; // true
5 !== 5; // false
5 !== '5'; // true

4.3.2 대소 관계 비교 연산자

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

대소 관계 비교 연산자	예제	설명	부수 효과
>	x > y	x가 y보다 크다	X
<	x < y	x가 y보다 작다	X
>=	x >= y	x가 y보다 크거나 같다	X
<=	x <= y	x가 y보다 작거나 같다	X

// 대소 관계 비교
5 > 0; // true
5 > 5; // false
5 >= 5; // true
5 <= 5; // true

---

4.4 삼항 조건 연산자

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

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

(score >= 60) === false
var result = score >= 60 ? 'pass' : 'fail';
(score >= 60) === true

[ ? ] 앞의 첫번째 피연산자는 조건식 (불리언 타입의 값으로 평가될 표현식)
조건식이 참이면 콜론(:) 앞의 두 번째 피연산자가 평가되어 반환
거짓이면 콜론(:) 뒤의 세번째 피연산자가 평가되어 반환

var x = 2;
// 2 % 2는 0이고 0은 false로 암묵적 타입 변환
var result = x % 2 > '홀수' : '짝수';
console.log(result); // 짝수

---

4.5 논리 연산자

• logical operator : 우항과 좌항의 피연산자( 부정 논리 연산자의 경우 우항의 피연산자 )를 논리 연산

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

// 논리 합 (||) 연산자
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

논리 부정 연산자는 불리언 값을 반환, 단 피연산자가 반드시 불리언 값일 필요는 없음 불리언 값이 아니면 불리언 타입으로 암묵전 타입 변환됨

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

---

4.6 쉼표 연산자

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

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

---

4.7 그룹 연산자

• 소괄호()로 피연산자를 감사는 그룹연산자는 자신의 피연산자인 표현식을 가장 먼저 평가
• 그룹 연산자를 사용하면 연산자의 우선순위 조절

10 * 2 + 3; // 23
// 그룹 연산자를 사용하여 우선순위를 조절
10 * (2 + 3); // 50

---

4.8 typeof 연산자

• 피연산자의 데이터 타입을 문자열로 반환
• 7가지 문자열 중 하나를 반환 : 'string', 'number', 'boolean', 'undefined', 'sybol', 'object', 'function'

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 Data() 		// object
typeof /test/gi 		// object
typeof function () {}   // function

❗️ 값이 null 타입인지 확인할땐 일치 연산자(===) 사용
(null이 아닌 object를 반환하는 버그 때문)

var foo = null;
typeof foo === null; // false
foo === null; // true

❗️ 선언하지 않은 식별자를 typeof 연산자로 연산하면 ReferenceError가 아닌 undefined 반환

// undeclared 식별자를 선언하지 않음
typeof undeclared; // undefined

---

4.9 지수 연산자

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

2 ** 2; // 4
2 ** 2.5; // 5.65685424949238
2 ** 0; // 1
2 ** -2; // 0.25

// 지수 연산자의 결합 순서는 우항에서 좌항, 우결합성을 가짐
2 ** (3 ** 2); // 512

❗️ 음수를 거듭제곱의 밑으로 사용해 계산하려면 괄호로 묶어야함

-5 ** 2;
(-5) ** 2; // 25

❗️ 할당 연산자와 함께 사용 가능

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

❗️ 이항 연산자 중에서 우선순위가 가장 높음

2 * 5 ** 2; // 50

---

4.10 연산자의 부수 효과

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

var x;
// 할당 연산자는 변수 값이 변하는 부수효과, x 변수 사용하는 다른 코드에 영향
x = 1;
console.log(x); // 1
// 증가/감소 연산자는 피연산자의 값을 변경하는 부수효과
// 피연산자 x 값이 재할당되어 변경, x 변수를 사용하는 다른 코드에 영향
x++;
console.log(x); // 2
var o = {a : 1};
// delete 연산자는 객체의 프로퍼티를 삭제하는 부수효과, o 객체를 사용하는 다른 코드에 영향
delete o.a;
console.log(o); // { }

---

4.11 연산자 우선순위

• 여러 개의 연산자로 이뤄진 문이 실행될 때 연산자가 실행되는 순서
• 우선순위가 높을수록 먼저 실행

우선순위	연산자
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	,

---

4.12 연산자 결합 순서

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

결합 순서	연산자
좌항 -> 우항	+, -, /, %, <, <=, >, >=, &&,
우항 -> 좌항	++, --, 할당연산자(=, +=, -, -=, ...), !x, +x, -x, ++x, --x, typeof, delete, ? ... : ..., **