07장 연산자

07장 연산자

---

✅ 연산자

값으로 평가된 피연산자를 연산해 새로운 값을 만든다.

7.1 산술 연산자

✅ 산술 연산자

피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값은 만든다.

산술 연산이 불가능한 경우 NaN을 반환한다.

7.1.1 이항 산술 연산자

✅ 이항 산술 연산자

2개의 피연산자를 산술 연산하여 새로운 숫자 값을 만들기 때문에 피연산자의 값을 변경하는 부수효과가 없다.

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

7.1.2 단항 산술 연산자

✅ 단항 산술 연산자

1개의 피연산자를 산술 연산하여 숫자 값을 만들며 부수효과가 있는 경우도 있다.

단항 산술 연산자	의미	부수 효과
++	증가	O
—	감소	O
+	효과 없음(음수를 양수로 변환하지 않음)	X
-	양수를 음수로, 음수를 양수로 반환	X

✅ 증가/감소(++/—— ) 연산자

피연산자의 값을 변경하는 부수 효과가 있다.

✅ 전위 증가/감소 연산자

피연산자 앞에 위치하며 먼자 피연산자의 값을 증가/감소시킨 후, 다른 연산을 수행한다.

✅ 후위 증가/감소 연산자

피연산자 뒤에 위치하며 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소시킨다.

let x = 5, result;

// 선할당 후증가(후위 증가 연산자)
result = x++;
console.log(result, x); // 5 6

// 선증가 후할당(선위 증가 연산자)
result = ++x;
conosle.log(result, x); // 7 7

// 선할당 후감소(후위 감소 연산자)
result = x--;
conosle.log(result, x); // 7 6

// 선감소 후할당(선위 감소 연산자)
result = --x;
console.log(result, x); // 5 5

✅ +/- 단한 연산자

숫자 타입이 아닌 피연산자에 +/- 단항 연산자를 사용하면 숫자 타입으로 변환하여 반환한다.

👉 실제 피연산자의 타입을 변경하는 것은 아니고 숫자타입으로 변환한 값을 생성해 반환한다.

✅ + 단항 연산자

피연산자에 대한 어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다.

✅ - 단항 연산자

피연산자의 부호를 반전한 값을 반환한다.

let x = '1'
console.log(x) // '1'
console.log(+x) // 1
console.log(-x) // -1

x = true
console.log(x) // true
console.log(+x) // 1
console.log(-x) // -1

x = 'hello'
console.log(x) // 'hello'
console.log(+x) // NaN
console.log(-x) // NaN

7.1.3 문자열 연결 연산자

👉🏻

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

'1' + 2; // '12'
1 + true // 2

1 + true는 자바스크립트 엔진에 의해 암묵적으로 true를 1로 타입을 강제 변환한 후 연산을 수행한다.

👉🏻

이를 암묵적 타입 변환 또는 타입 강제 변환이라고 한다.

7.2 할당 연산자

✅ 할당 연산자

우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당하며 부수효과가 있다.

할당 연산자	예	동일 표현
=	x = 5	x = 5
+=	x += 5	x = x + 5
-=	x -= 5	x = x - 5
*=	x *= 5	x = x * 5
/=	x /= 5	x = x / 5
%=	x %= 5	x = x % 5

let x = 10;

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

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

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

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

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

👉🏻

할당문은 표현식인 문이다.

할당문은 변수에 값을 할당하는 부수 효과만 있을 뿐 값으로 평가되지 않을 것처럼 보이지만

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

let x;

// 할당문은 표현식인 문이다.
console.log(x = 1) // 1
// 표현식인 문을 판단하기 가장 쉬운 방법은 변수에 할당해보는 것이다.
const b = x = 1 

7.3 비교 연산자

✅ 비교 연산자

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

7.3.1 동등/일치 비교 연산자

✅ 동등/일치 비교 연산자

좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환하며 부수효과는 없다

동등 비교는 값만 일치 비교는 값과 타입까지 비교한다.

부동등 비교 연산자(!=)와 불일치 비교 연산자(!==)는 각각 동등 비교 연산자(==)와 일치 비교 연산자(===)의 반대 개념이다

비교 연산자	의미	설명
==	동등 비교	좌항과 우항의 값이 같음
===	일치 비교	좌항과 우항의 값과 타입이 다름
!=	부동등 비교	좌항과 우항의 값이 다름
!==	불일치 비교	좌항과 우항의 값과 타입이 다름

✅ 동등 비교 연산자

좌항과 우항을 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.

동등 비교 연산자는 결과를 예측하고 실수하기 쉽기 때문에 일치 비교 연산자를 사용하는 것이 좋다.

// 동등 비교. 안티 패턴으로 인해 결과를 예측하기 어렵다.
'0' == ''; // false
0 == '' // true
0 == '0' // true
false == 'false' // false
false == '0' // true
false == null // false
false == undefined // false

✅ 일치 비교 연산자

좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환한다.

⚠️ NaN과 0을 주의해야 한다.

// 값은 같지만 타입이 다른 경우
5 === '5' // false

// NaN은 유일하게 자신과 일치하지 않는 값이다.
// 따라서 숫자가 NaN인지 확인하려면 빌트인 함수 Number.isNaN을 사용해야 한다.
NaN === NaN // false
Number.isNaN(NaN) // true
Number.isNaN(10) // false

// 자바스크립트에는 야의 0과 음의 0이 있는데 이 둘을 비교하면 true를 반환한다.
0 === -0 // true
0 == -0 // true	

✅ Object.is 메소드

ES6에서 도입된 Object.is메소드는 정확한 비교 결과를 반환한다.

Object.is(-0, +0) // false
Object.is(NaN, NaN) // true

7.3.2 대소 관계 비교 연산자

✅ 대소 관계 비교 연산자

피연산자의 크기를 비교하여 불리언 값을 반환하며 부수효과가 없다.

대소 관계 비교 연산자	설명
>	좌항이 우항보다 크다
<	좌항이 우항보다 작다
>=	좌항이 우항보다 크거다 같다
<=	좌항이 우항보다 작거나 같다

7.4 삼항 조건 연산자

✅ 삼항 조건 연산자

첫번째 피연산자 true로 평가되면 두 번째 피연산자를 반환하고, false로 평가되면 세 번째 피연산자를 반환한다.

부수효과는 없다.

let x = 2;
let result = x % 2 ? '홀수' : '짝수';

// if-else문으로 삼항 조건 연산자 표현식과 유사하게 처리할 수 있다.
let x = 2, result;

if(x % 2) result = '홀수'
else result = '짝수'

👉🏻

if-else 문과 다르게 삼항 조건 연산자 표현식은 값으로 표현될 수 있는 표현식인 문이다.

7.5 논리 연산자

✅ 논리 연산자

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

부수효과가 없다.

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

👉🏻

! 연산자는 피연산자가 불리언 값이 아니면 불리언 타입으로 암묵적 타입 변환한다.

따라서 논리 부정(
!) 연산자는 언제나 불리언 값을 반환하지만 논리합(||)/논리곱(&&)은 불리언 값이 아닐수도 있다.

!0; // true
!'Hello' // false

'CAT' && 'DOG' // "DOG"

7.6 쉼표 연산자

✅ 쉼표 연산자

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

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

7.7 그룹 연산자

✅ 그룹 연산자

그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가하며 연산자 우선순위가 가장 높다.

 10 * 2 + 3 //23
 
 // 그룹 연산자로 우선순위 조절
 10 * (2 + 3) // 50

7.8 typeof 연산자

✅ typeof 연산자

데이터 타입을 문자열로 반환하며 반환되는 값은 string, number, boolean, undefined, symbol, object, function 중 하나다.

👉🏻

null은 반환하지 않으므로 type of 연산자의 결과는 데이터 타입과 정확하게 일치하지는 않는다

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 연산자 사용 시 주의점 1

null을 연산하면 object를 반환한다.

따라서 이 경우에는 일치 연산자(===)를 사용하자.

⚠️ typeof 연산자 사용 시 주의점 2

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

7.9 지수 연산자

✅ 지수 연산자

ES7에서 도입되었으며 좌항의 피연산자를 밑으로 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값을 반환한다.

할당 연산자와 함께 사용할 수 있으며 이항 연산자 중에서 우선순위가 높다.

2 ** 0 // 1
2 ** -2 // 0.25
// 음수를 거듭제곱의 밑으로 사용하려면 괄호로 묶어야 한다.
(-5) ** 2 // 25

// 지수 연산자 도입 전에는 Math.pow 메서드를 썼다.
Math.pow(2, 0) // 1

// 할당 연산자와 함께 사용
let num = 5;
num **= 2 //25

7.10 그 외의 연산자

상세 부분은 책 뒷내용에 포함되어 있으므로 가볍게 살펴보기만 한다.

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

7.11 연산자의 부수 효과

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

7.12 연산자 우선순위

7.13 연산자 결합 순서

QUIZ

//let x = 0, y = 0, z = 0;
let x,y,z;
x = y = z = 0

let x, y = 0, z = 0;

if('number' === typeof(NaN)){
	z = ++x + --y
	console.log(x)
	console.log(y)
	console.log(z)
} else {
	z = ++x + y--
	console.log(x)
	console.log(y)
	console.log(z)
}