[JavaScript] 7장 연산자 (2)

---

  7.4 삼항 조건 연산자  

• 삼항 조건 연산자 : 두 번째 피연산자 또는 세번째 피연산자로 평가되는 표현식.

// 예제 7-21
var x = 2;

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

// 예제 7-23
var x = 10;

// if ... else 문은 표현식이 아닌 문이다. 따라서 값처럼 사용할 수 없다.
var result = if (x % 2) { result = '홀수'; } else { result = '짝수'};
// SyntaxError: Unexpected token 'if'

// 예제 7-24
var x = 10;

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

- 삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만 if...else문은 값처럼 사용할 수 없음.

  7.5 논리 연산자  

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

// 예제 7-25
// 논리합(||) 연산자
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-26
// 암묵적 타입 변환
!0; // true
!'Hello'; // true

// 예제 7-27
// 단축 평가
'Cat' && 'Dog'; // 'Dog'

- 논리 부정 연산자는 언제나 불리언 값을 반환한다.

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

 

  드 모르간의 법칙  

// 예제 7-28
!(x || y) === (!x && !y)
!(x && y) === (!x || !y)

- 드 모르간의 법칙을 통해 복잡한 표현식을 좀 더 가독성 좋은 표현식으로 변환 가능.

  7.6 쉼표 연산자  

// 예제 7-29
var x, y, z;
x = 1, y = 2, z = 3; //3

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

  7.7 그룹 연산자  

// 예제 7-30
10 * 2 + 3; // 23

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

- 소괄호로 피연산자를 감쌀 경우 그 표현식을 가장 먼저 평가함.

  7.8 typeof 연산자  

// 예제 7-31
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 연산자 : 피연산자의 데이터 타입을 문자열로 반환. 7가지 문자열 "string", "number", "boolean", "symbol", "object", "function" 중 하나를 반환하고 null을 반환하는 경우는 없다.

// 예제 7-32
var foo = null;

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

- typeof 연산자로 null 값을 연산하면 "object"이 반환되는데 이는 자바스크립트의 첫번째 버전의 버그이다. 따라서 값이 null타입인지 확인할 때는 일치 연산자(===)를 사용해야한다.

// 예제 7-33
// undefined 식별자를 선언한 적이 없다.
typeof undefined; // undefined

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

  7.9 지수 연산자  

// 예제 7-34
2 ** 2; // 4
2 ** 2.5; // 5.65685424949238
2 ** 0; // 1
2 ** -2; // 0.25

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

// 예제 7-35
Math.pow(2, 2); // 4
Math.pow(2, 2.5); // 5.65685424949238
Math.pow(2, 0); // 1
Math.pow(2, -2); // 0.25

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

// 예제 7-36
// 지수 연산자의 결합 순서는 우항에서 좌항이다. 즉, 우결합성을 갖는다.
2 ** (3 ** 2); // 512
Math.pow(2, Math.pow(3, 2)); // 512

- 다음과 같은 경우 Math.pow 메서드보다 가독성이 좋다.

// 예제 7-37
-5 ** 2;
// SyntaxError: Unary operator used immediately before exponentiation expression.
// Parenthesis must be used to disambiguate operator precedence

(-5) ** 2; // 25

- 음수를 거듭제곱의 밑으로 사용해 계산하려면 괄호로 묶어야 한다.

// 예제 7-38
var num = 5;
num **= 2; // 25

- 지수 연산자는 할당 연산자와 함께 사욜할 수 있음.

// 예제 7-39
2 * 5 ** 2; //50

- 지수연산자는 이항 연산자 중에서 우선순위가 가장 높음.

  7.10 그 외의 연산자  

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

  7.11 연산자의 부수 효과  

// 예제 7-40
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); // {}

  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-41
10 * ( 2 + 3 ); // 50

- 우선순위를 다 외우기 어려우니 연산자 우선순위가 가장 높은 그룹 연산자를 사용하여 우선순위를 명시적으로 조절하는 것을 권장.

  7.13 연산자 결합 순서  

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

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

---

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

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

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