[JavaScript] 7장 연산자 (1)

---

// 예제 7-01
// 산술 연산자
5 * 4 // 20

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

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

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

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

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

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

  7.1 산술 연산자  

• 산술 연산자 : 피연산자를 수학적 계산을 수행해 새로운 숫자 값을 만듦. 연산이 불가능한 경우 NaN을 반환함.

  7.1.1 이항 산술 연산자  

• 이항 산술 연산자 : 2개의 피 연산자를 산술 연산

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

  7.1.1 이항 산술 연산자  

• 이항 산술 연산자 : 1개의 피 연산자를 산술 연산

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

// 예제 7-03
var x = 1;

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

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

- 증가/감소(++/--) 연산자는 피연산자의 값을 변경하는 부수효과가 있음.

// 예제 7-04
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

- 증가/감소(++/--) 연산자는 위치에 의미가 있음.

// 예제 7-05
// 아무런 효과가 없다.
+10; // 10
+(-10); // -10

- +단항 연산자는 피연산자에 어떠한 효과도 없음.

// 예제 7-06
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"

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

// 예제 7-07
// 부호를 반전한다.
-(-10);  // 10

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

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

// 문자열은 숫자로 타입 변환할 수 없으므로 NaN을 반환한다.
-'Hello'; // NaN

- -단항 연산자는 피연산자의 부호를 반전한 값을 반환. 이때 피연산자를 변경하는 것은 아니고 숫자 타입으로 변환한 값을 생성해서 반환.

 

  7.1.3 문자열 연결 연산자  

// 예제 7-08
// 문자열 연결 연산자
'1' + 2; // '12'
1 + '2'; // '12'

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

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

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

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

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

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

- true, false등 숫자타입인 1과 0으로 강제 변환한 후 연산을 수행 -> 암묵적 타입 변환 또는 타입 강제 변환.

 

  7.2 할당 연산자  

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

할당 연산자	예	동일 표현	부수 효과
=	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

// 예제 7-10
var x;

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

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

// 예제 7-11
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

- 여러 변수에 동일한 값을 연쇄 할당이 가능.

  7.3 비교 연산자   

• 비교 연산자 : 좌항과 우항의 피연산자를 비교한 다음 결과를 불리언 값으로 반환.

 

  7.3.1  동등/일치 비교 연산자  

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

- 동등 비교/일치 비교 연산자는 좌항과 우항의 피연산자가 같은 같으로 평가되는지 비교해 불리언 값을 반환.

// 예제 7-12
// 동등 비교
5 == 5; // true

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

// 예제 7-13
// 동등 비교. 결과를 예측하기 어렵다.
'0' == ''; // false
0 == ''; // true
0 == '0'; // true
false == 'false'; // false
false == '0'; // true
false == null; // false
false == undefined; // false

- 동등 비교 연산자는 암묵적 타입 변환을 통해 타입을 일치시킨후 비교함. 편리한 경우도 있지만 결과 예측하기 어려움.

// 예제 7-14
// 일치 비교
5 === 5; // true

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

- 일치 비교 연산자는 좌항과 우항의 피연산자가 타입, 값이 같은 경우에 한하여 true를 반환.

// 예제 7-15
NaN === NaN; // false

// 예제 7-16
// Number.inNaN 함수는 지정한 값이 NaN인지 확인하고 그 결과를 불리언 값으로 반환.
Number.isNaN(NaN); // true
Number.isNaN(10); // false
Number.isNaN(1 + undefined); // true

- NaN은 자신과 일치하지 않는 유일한 값. Number.isNaN을 사용하여 숫자가 NaN인지 조사가능.

// 예제 7-17
// 양의 0과 음의 0비교. 모든 결과는 true.
0 === -0; //true
0 == -0; //true

- 양의 0과 음의 0을 비교할시 결과는 true.

 

  Object.is 메서드  

// 예제 7-18
-0 === +0; // true
Object.is(-0, +0); // false

NaN === NaN; // false
Object.is(NaN, NaN); // true

- ES6에서 도입된 Object.is 메서드는 예측 가능한 정확한 비교 결과를 반환함.

// 예제 7-19
// 부동등 비교
5 != 8; // true
5 != 5; // false
5 != '5'; // true

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

- 부동등 비교 연산자, 불일치 비교 연산자는 각각 동등 비교, 일치 비교 연산자의 반대 개념.

 

  7.3.2  대소 관계 비교 연산자  

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

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

---

* 위 내용은 모던 자바스크립트 Deep Dive를 참고하여 개인적인 공부를 목적으로 정리하였습니다.

http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791158392239&orderClick=LEa&Kc=

모던 자바스크립트 Deep Dive - 교보문고