[JavaScript] 연산자

연산자와 피연산자

연산자	하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행하여 하나의 값을 생성
피연산자	연산의 대상. 값으로 평가될 수 있는 표현식.
연산자 + 피연산자	값으로 평가될 수 있는 표현식.

산술 연산자

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

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

피연산자의 개수에 따라 이항 산술 연산자(2개)와 단항 산술 연산자(1개)로 구분이 가능하다.

이항 산술 연산자

---

2개의 피연산자를 산술 연산한다면 이항 산술 연산자이다.

이항 산술 연산자는 어떤 산술 연산을 해도 피연산자의 값이 바뀌는 경우가 없고, 언제나 새로운 값을 만든다.

이를 피연산자의 값을 변경하는 부수 효과가 없다고 말한다.

이항 산술 연산자로는 +(덧셈), -(뺄셈), *(곱셈), /(나눗셈), %(나머지)가 있다.

단항 산술 연산자

---

1개의 피연산자를 산술 연산한다면 단항 산술 연산자이다.

단항 산술 연산자로는 ++(증가), --(감소), +(아무 효과 X, 숫자 타입 반환), -(양수/음수 반전)가 있다.

이때 ++(증가)와 --(감소) 연산자는 피연산자의 값을 변경하는 부수 효과가 있으므로 주의해야 한다.

예제로 조금 더 자세히 알아보자.

증가/감소 연산자

var x = 1;

// 전위 증가/감소 연산자 : 피연산자의 값을 증가/감소시킨 후, 다른 연산 수행
result = x++; // x = x + 1, result: 1, x: 2
result = x--; // x = x - 1, result: 1, x: 0

// 후위 증가/감소 연산자 : 다른 연산을 먼저 수행 후, 피연산자의 값을 증가/감소시킴
result = ++x; // result: 2, x: 2
result = --x; // result: 0, x: 0

+ 연산자

var x = '1';
console.log(+x); // 1 (number type)

x = true;
console.log(+x); // 1 (number type)

x = 'Apple';
console.log(+x); // NaN (변환 불가)

문자열 연결 연산자 +

---

+ 연산자의 경우, 피연산자 중 하나 이상이 문자열이라면 문자열 연결 연산자로 동작한다.

아래 예제로 알아보자.

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

// true >> 1 (number), 암묵적 타입 변환/타입 강제 변환
1 + true; // 2

// false >> 0 (number)
1 + false; // 1

// null >> 0 (number)
1 + null; // 1

// undefined (변환 불가)
+undefined; // NaN

할당 연산자

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

할당하는 것이기에, 변수 값이 변하는 부수 효과가 있다.

할당 연산자로는 =, +=, -=, *=, /=, %=이 있다.

전 포스팅에서 문은 표현식인 문과 표현식이 아닌 문으로 나뉜다고 했다.

할당문은 할당된 값으로 평가되기 때문에 표현식인 문이다.

이 특징을 이용하여 여러 변수에 동일한 값을 연쇄 할당할 수 있다.

a = b = c = 1;
// a: 1, b: 1, c: 1

비교 연산자

비교 연산자는 좌항과 우항 비교 후 불리언 값으로 반환한다.

보통 제어문의 조건식에 많이 사용된다.

동등/일치 비교 연산자

---

동등 비교 연산자, 일치 비교 연산자 둘 다 좌항과 우항이 같은 값인지 비교하지만, 그 정도가 다르다.

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

동등 비교 연산자의 경우 암묵적 타입 변환으로 타입을 일치시킨 후에 같은 값인지 비교한다.

이 말은 즉, 0과 false, 숫자 5와 문자 5 등이 같은 값이라는 예측하기 어려운 결과를 낸다는 것이다.

이에 반해 일치 비교 연산자는 타입까지 비교하므로 결과를 예측하기 쉬운 일치 비교 연산자를 사용하는 것이 좋다고 한다.

다만 NaN과 NaN은 서로 일치하지 않고, 0과 -0, +0은 모두 같은 값이라는 것을 주의해야 한다.

Object.is()

---

NaN과 -0, +0을 정확하게 비교하기 위해서는 Object.is() 메소드를 사용하면 된다.

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

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

대소 관계 비교 연산자

---

대소 관계 비교 연산자는 피연산자의 크기를 비교하여 불리언 값을 반환한다.

>, <, >=, <=가 있다.

삼항 조건 연산자

삼항 조건 연산자는 아래와 같은 구조를 지닌다.

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

if-else 문과 비슷하지만, 삼항 조건 연산자 표현식은 값처럼 사용할 수 있는데 반해 if-else 문은 값처럼 사용이 불가하다.

따라서 if-else 문은 표현식이 아닌 문이다.

논리 연산자

논리 연산자는 우항과 좌항의 피연산자를 논리 연산한다.

||(OR), &&(AND), !(NOT)이 있다.

드 모르간 법칙

---

복잡한 표현식을 가독성 좋은 표현식을 변환할 수 있는 드 모르간 법칙을 잘 활용해보도록 하자.

!(x || y) === (!x && !y)
!(x && y) === (!x || !y)

쉼표 연산자

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

예제로 알아보자.

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

그룹 연산자

그룹 연산자는 소괄호로 피연산자를 감싼 것으로 연산자의 우선순위를 조절할 수 있다.

그룹 연산자의 경우 우선순위가 가장 높다.

3 * (2 + 1); // 9

typeof 연산자

typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환한다.

따라서 string, number, boolean, undefined, symbol, object, function 이렇게 7가지 중 하나를 반환한다.

주의할 점은 null 값 연산시 object를 반환하므로 typeof 보다는 ===을 사용하도록 하자.

typeof 'Apple'; // "string"

지수 연산자

지수 연산자는 좌항의 피연산자를 밑으로 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값을 반환한다.

2 ** 3; // 8

그 외에도…

옵셔널 체이닝 연산자, null 병합 연산자, 프로퍼티 삭제 등등의 연산자가 있지만 나중에 알아보도록 하자.

연산자 우선 순위

우선 순위의 경우 이 곳을 참고하면 되지만.. 종류가 많아 기억하기 어려우므로 소괄호를 사용한 그룹 연산자를 이용하는 것이 좋겠다.

연산자 결합 순서

결합 순서란 연산자의 평가 수행 순서를 말하며 아래와 같다.

결합 순서	연산자
좌항 > 우항	+, -, /, %, <, <=, >, >=, &&, \|\| , [], (), ??, ?, in, instanceof 등
우항 > 좌항	++, - -, 할당 연산자, !x, +x, -x, ++x, - -x, tpeof, delete, 삼항 연산자 등

Notice: 이 게시물은 모던자바스크립트 Deep Dive 교재를 참고하였습니다.