[JS] 모던 자바스크립트 - 03. 연산자

< 모든 내용을 세세하게 정리하지 않고, 아주 기본적인 것은 생략해서 정리하기도 합니다. >

 

 

※ 부수효과 : 피연산자의 값을 바꾸는 것.

산술 연산자

---

- 산술 연산이 불가능한 경우, NaN을 반환

- 산술 연산하여 숫자 값을 만듦

 

1. 이항 산술 연산자

- 2개의 피연산자를 산술 연산하여 숫자 값을 만든다

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

- 부수 효과 X

 

2. 단항 산술 연산자

- 1개의 피연산자를 산술 연산하여 숫자 값을 만든다

- +,- 단항 연산자는 부수효과 X

- 증가/감소(++,- - 연산자)는 부수효과 O

---

- 증가/감소 연산자는 위치에 따라 의미가 달라짐

  전위 증가/감소 연산자(prefix increment/decrement operator) : 피연산자 앞에 위치

// 선증가 후할당
var x = 5;
var result;

result = ++x;
console.log(result,x); // 6,6

  후위 증가/감소 연산자(postfix increment/decrement operator) : 피연산자 뒤에 위치

// 선할당 후증가
var x = 5;
var result;

result = x++;
console.log(result,x); // 5,6

- - 단항 연산자는 피연산자의 부호를 반전한 값을 반환, 숫자타입이 아닐 시 숫자타입으로 변환하여 반환

- + 단항 연산자는 숫자타입이 아닐 시 숫자 타입으로 변환하여 반환

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

x = true;
console.log(+x); // 1 → 불리언을 숫자타입으로 변환

x = 'Hello';
console.log(+x); // NaN → 문자열은 숫자타입으로 변환 불가하여 NaN 반환

 

3. 문자열 연결 연산자

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

'1' + 2 ; // → '12'
1 + '2' ; // → '12'

 

할당 연산자

---

- 우항의 피연산자 평가 결과를 좌항의 변수에 할당

- 부수효과 O

- = , +=, -=, *=, /=, %=

var x;

x = 10; // 10
x += 5; // 15 → x = x + 5; 
x -= 5; // 10 → x = x - 5; 
x *= 5; // 50 → x = x * 5;

 

비교 연산자

---

- 좌항과 우항의 피연산자를 비교 후 불리언 값을 반환

- 부수효과 X

1. 동등/일치 비교 연산자

- 동등 비교 연산자 (==) : 값이 같음

- 일치 비교 연산자 (===) : 값과 타입이 같음

- 동등 비교 연산 시 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교 

- 동등 비교 연산자는 예측하기 어려운 결과를 만들어내므로, 일치 비교 연산자(===)를 사용하는 것이 좋다

- 동등/일치 비교 연산자의 반대는 부동등/불일치 비교 연산자 (!=,!==)

---

- NaN은 자신과 일치하지 않는 유일한 값, NaN을 확인하기 위해서는 빌트인 함수 isNaN을 사용

// NaN은 자기 자신과 일치하지 않음
NaN === NaN; // false

// isNaN 함수는 값이 NaN인지 확인 후 불리언 값을 반환
isNaN(NaN); // true
isNaN(10); // false
isNaN(1+undefined); // true

- 자바스크립트에는 양의 0과 음의 0이 있지만 이 둘을 비교하면 true를 반환. 숫자 0도 주의가 필요. 

0 == -0; // ture
0 === -0; // true

- 위 두가지 문제를 모두 해결하는 것은 ES6에 도입된 Object.is 메서드. 예측 가능한 정확한 비교 결과를 반환

-0 === 0; // true
Object.is(-0,0); // false

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

 

2. 대소 관계 비교 연산자

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

- > , < , >= , <=

- 부수효과 X

 

삼항 조건 연산자

---

- 자바스크립트의 유일한 삼항 연산자

- 부수효과 X

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

- 조건에 따라 값을 결정해야할 경우 if문보다 유리, 조건에 따라 수행할 문이 여러개라면 if문이 가독성면에서 더 유리

 

논리 연산자

---

- 논리를 연산

- 부수효과 X

- || (논리합, OR), && (논리곱, AND), ! (부정, NOT)

- 논리 부정(!) 연산자는 언제나 불리언 값을 반환, 피연산자가 불리언이 아닐 경우 불리언으로 암묵적 타입 변환

 

 

쉼표 연산자

---

- 왼쪽 피연산자부터 차례대로 피연산자를 평가 

- 마지막 피연산자의 평가 결과를 반환

var x,y,z;

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

 

그룹 연산자

---

- 소괄호( ( ) )로 피연산자를 감싸서 사용 

- 자신의 피연산자 표현식을 가장 먼저 평가, 연산자 우선순위가 가장 높음

 

typeof 연산자

---

- 피연산자의 데이터 타입을 문자열로 반환

- 'String', 'Number', 'Boolean', 'undefined', 'symbol', 'object', 'function' 총 7가지 반환

- null을 typeof 연산자로 연산할 경우 'object'를 반환하는 것에 주의

- null을 확인할 때에는 일치 연산자(===)를 사용하여 확인

- 선언하지 않은 식별자를 typeof로 연산 시 ReferenceError가 아닌 undefined를 반환하는 것에 주의

typeof(null); // 'object'

 

지수 연산자

---

- 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱

- ES7에서 도입

- 이전에는 Math.pow 메서드를 사용 

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

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

2 ** 2 ** 2; // 16
Math.pow(Math.pow(2,2),2); // 16

- 음수를 거듭제곱 하려면 괄호로 묶어야 함

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

- 이항 연산자 중에서 우선순위가 가장 높음 → 거듭제곱의 지수 형태를 연산자로 풀어 놓은 것이라고 이해하면 쉬움

 

그 외의 연산자

---

- 옵셔널 체이닝 연산자( ?. ), null 병합연산자( ?? ), delete, new, instanceof, in 등의 연산자들이 있음

- 옵셔널 체이닝 연산자와 null 병합연산자 설명

[JS] 자바스크립트 개념 - 05. 타입 변환과 단축 평가

 

연산자의 부수효과

---

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

 

연산자 우선순위

---

- 연산자의 우선순위가 정해져 있지만, 모두 기억하기는 어려우니 연산자 우선순위가 가장 높은 그룹 연산자를 사용하여 우선순위를 명시적으로 조절하는 것이 좋다

 

 

 

 

 

 

출처

- 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리