[JavaScript] 연산자

연산자는 하나 이상의 표현식을 대상으로 연산을 수행하여 하나의 값을 만든다.

연산 대상인 피연산자는 값으로 평가 될 수 있는 표현식이어야 한다.

 

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

 

산술 연산자

피연산자를 대상으로 연산을 수행하여 새로운 숫자를 만든다. (결과가 Number 타입)

산술 연산이 불가능한 경우 NaN을 반환한다. (null, undefined)

자바스크립트 엔진이 암묵적으로 피연산자의 타입 변환 후 연산을 수행한다.

이 때, 피연산자 값을 타입 변환 후 연산을 하기 때문에 피연산자 자체에 영향을 주지는 않는다.

 

이항 산술 연산자

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

+ : 덧셈

- : 뺄셈

* : 곱셈

/ : 나눗셈

% : 나머지

 

단항 산술 연산자

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

++ : 증가

-- : 감소

+ : 플러스 부호

- : 마이너스 부호

 

++, -- 연산자는 피연산자의 값을 변경한다.

피연산자 앞에 위치하면 피연산자의 값을 변경하고 다른 연산을 수행한다.

피연산자 뒤에 위치하면 다른 연산 수행 후 마지막으로 피연산자의 값을 변경한다.

 

문자열 연결 연산자

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

 

할당 연산자

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

=

 

이항 산술 연산자와 할당 연산자를 붙여서 사용할 수 있다.

이는 해당 변수의 값에 좌항 피연산자를 산술 연산한 결과를 변수에 대입한다는 의미다.

 

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

 

문에는 값으로 표현될 수 있는 표현식과 표현식이 아닌 문이 있다.

 

할당문은 표현식일까??

var num;

console.log(num = 10);

익숙하지 않지만 값이 출력되는 것을 볼 수 있다.

따라서 할당문은 값으로 표현될 수 있는 표현식이다

 

이러한 할당문 특징을 다음과 같이 활용할 수 있다.

var a, b, c;

a = b = c = 0; // a, b, c 모두 0을 대입

 

비교 연산자

좌항과 우항의 피연산자를 비교하고 결과를 boolean 값으로 반환한다.

 

동등/일치 비교 연산자

피연산자가 같은 값으로 평가되는지 비교하고 boolean 값을 반환하는데

동등 비교 연산자는 값만 같으면 true
일치 비교 연산자는 값과 타입까지 같으면 true이다.

== : 동등 비교

=== : 일치 비교

!= : 부동등 비교

!== : 불일치 비교

 

자바스크립트 엔진에서 동등 비교 연산을 할 때 좌항, 우항의 값을 암묵적 타입 변환을 통해 일치시킨 후 같은 값인지 비교한다. 따라서 동등 비교할 때 타입이 달라도 값이 같으면 true를 반환한다.

 

// 동등 비교
5 == '5';

 

동등 비교 연산자는 예측하기 어려운 결과를 만들어 내기도 한다.

 

'0' == ''; // false
0 == ''; // true -> string이 숫자로 암묵적 변환이 일어난다고 확인 할 수 있다.
0 == '0'; // true
false == 'false'; // false는 숫자로 변환되면 NaN이다.
false == '0'; // true
false == null; // false -> falsy한 값들이기 때문
false == undefined; // false -> false한 값들이기 때문

 

동등 비교 연산은 다음과 같은 규칙이 있다.

피연산자는 타입이 같도록 형변환이 이루어진다.

이 때, 피연산자의 타입이 같을 때와 다를 때로 나눌 수 있다.

 

먼저 피연산자의 타입이 같을 때

1. 둘 다 undefined면 → true

2. 둘 다 null이면 → true

 

3. 둘 다 number인 경우

한 쪽이 NaN이면 → false

둘 다 같은 값이면 → true

둘 다 0인데 부호만 다른 경우 → true

 

4. 둘 다 String인 경우

정확히 문자 길이와 순서가 같은 경우 → true

 

5. 둘 다 Boolean인 경우

같은 값이면 → true

 

 6. 둘 다 참조 타입인 경우

같은 객체를 참조하면 → true

 

피연사자의 타입이 서로 다를 때

 

1. null과 undefined → true

2. Number와 String

String을 Number로 타입 변환하고 == 연산한다.

※ 공백만 있는 문자열이나 빈 문자열은 0으로 변환된다.

3. 한 쪽이 Boolean이면

Number로 타입 변환하고 == 연산한다.

4. 한 쪽이 String 또는 Number이고 다른 쪽은 Object이면

Object가 원시 타입으로 타입 변환하고 == 연산한다.

※ Object 타입이 원시 타입으로 변환되는 과정은 추후에 알아본다.. 변환되면 Number나 String임

빈 배열은 0으로 변환된다.

 

※ 원시 타입이 Number로 변환될 때

undefined → NaN

null → 0

Boolean → true면 1, false면 0

String → 공백만 있는 문자열이나 빈 문자열은 0, 여러 규칙이 있음, 규칙 이외는 NaN

동등 비교 연산자보다는 일치 비교 연산자를 사용하는 것이 에러나 버그 발생 방지를 위해 좋은 것 같다.

 

일치 비교 연산자는 암묵적 타입 변환 없이 피연산자가 값과 타입이 같은 경우에 한하여 true를 반환한다.

 

※ NaN인 경우 일치 비교 연산에서 false를 반환한다.

숫자가 NaN인지 확인하려면 Number.isNaN()을 사용해야한다.

 

※ 숫자 0인 경우 동등/일치 비교 연산에서 부호가 달라도 모두 true를 반환한다.

 

위와 같은 문제가 있어 ES6에서 도입된 Object.is 메서드가 있다.

Object.is(피연산자, 피연산자) : 일치 비교 연산자보다 더 정확한 결과를 반환한다.

 

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

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

 

대소 비교 연산자

>, <, >=, <=

단순히 크기 비교하는 연산자라는 것을 쉽게 알 수 있다.

 

삼항 조건 연산자

조건식의 평가 결과에 따라 반환할 값을 결정한다.

 

조건식 ? 참일 때 : 거짓일 때

 

조건식의 평가 결과가 boolean 타입이 아니면 boolean으로 암묵적 타입 변환된다.

if else 문으로 유사하게 처리할 수 있지만 삼항 조건 연산자 표현식은 값으로 사용할 수 있다는 차이가 있다.

 

논리 연산자

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

&& : 논리곱

|| : 논리합

! : 부정

 

피연산자가 항상 boolean 타입일 필요가 없다.

 

! 연산자는 항상 boolean 값을 반환하기 때문에 피연산자가 boolean 타입이 아니면 boolean 타입으로 암묵적 타입 변환을 한다.

 

&& 이나 || 연산의 피연산자가 boolean 타입이 아닌 경우에는 

항상 2개의 피연산자 중 한쪽으로 평가된다.

 

※ 논리곱의 좌항이 false면 우항은 안 보고 논리합의 경우에 좌항이 true면 우항을 안 본다.

 

※ 드 모르간 법칙

논리 연산자로 구성된 복잡한 표현식은 가독성이 좋지 않기 때문에 드 모르간 법칙으로 가독성 좋게 변환할 수 있다.

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

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

 

쉼표 연산자

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

var x;

console.log(x = (1, 10)); // 10

 

그룹 연산자

()를 그룹 연산자라 하는데 감싸고 있는 피연산자를 가장 먼저 평가한다.

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

 

typeof 연산자

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

typeof 연산자는 7가지 문자열 "string", "number", "boolean", "undefined", "symbol", "object", "function" 중 하나를 반환한다.

 

console.log(typeof null); // null이 아닌 object??

typeof 연산자로 null을 연산하면 "object"를 반환한다. 버그다!

기존 코드에 영향을 줄 수 있기 때문에 아직 수정되고 못하고 있다.

따라서 null 타입인지 확인할 때는 === 일치 연산자를 사용해야 한다.

 

console.log(typeof foo); // undefined

또 선언하지 않은 식별자를 typeof 연산자로 연산하면 ReferenceError가 아니라 undefined를 반환한다.

 

지수 연산자

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

 

지수 연산자 도입 이전에는 Math.pow 메서드를 사용하였다.

이전보다 가독성이 좋아졌다.

 

지수 연산자 결합 순서는 우항부터 시작한다.

console.log(2 ** (3 ** 2)); // 2 ** 9 와 같다.

 

음수를 거듭제곱의 밑으로 사용하려면 ()로 묶어서 사용해야 한다.

 

지수 연산자도 산술 연산자처럼 할당연산자와 함께 사용할 수 있다.

var x = 2;

console.log(x**=5); // 32

 

지수 연산자는 이항 연산자 중 우선 순위가 가장 높다.

 

그외 연산자

?. : 옵셔널 체이닝 연산자

?? : null 병합 연산자

delete : 프로퍼티 삭제

new : 생성자 함수 호출할 때 사용하여 인스턴스 생성

instanceof : 좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별

in : 프로퍼티 존재 확인

 

연산자 부수 효과

일부 연산자는 다른 코드에 영향을 주는 부수 효과가 있다.

=, ++/--, delete 연산자다.

 

연산자 우선순위

내림 차순으로 정렬하면 다음과 같다.

 

() : 그룹 연산

---------------------------------------------

. : 객체 멤버 접근

[] : 객체 멤버 접근

new (인자 존재) : 객체 타입의 인스턴스 생성

함수 호출

?. : 옵셔널 체이닝

---------------------------------------------

new (인자 생략) 

---------------------------------------------

후위 증감은 실행되지만 결과는 라인이 끝난 뒤 반영

++ : 후위 증가

-- : 후위 감소

---------------------------------------------

! : 논리 부정

~ : 비트 부정

+ : 양 부호

- : 음 부호

++ : 전위 증가

-- : 전위 감소

typeof : 자료형 반환

void : 표현식 평가하고 undefined 반환

delete : 객체 속성 제거

await : Promise 기다리기 위해 사용

---------------------------------------------

** : 거듭제곱

---------------------------------------------

* : 곱셈

/ : 나눗셈

% : 나머지

---------------------------------------------

+ : 덧셈

- : 뺄셈

---------------------------------------------

<< : 비트 왼쪽 쉬프트

>> : 비트 오른쪽 시프트

>>> : 비트 오른쪽 시프트 (0으로 채움)

---------------------------------------------

<, <=, >, >= : 대소비교

in : 속성 존재 여부

instanceof : 참조변수가 객체의 인스턴스인지 판별

---------------------------------------------

== : 동등

!= : 부등

=== : 일치

!== : 불일치

---------------------------------------------

& : 비트 곱

^ : 비트 차

---------------------------------------------

| : 비트 합 

---------------------------------------------

&& : 논리 곱

---------------------------------------------

|| : 논리 합

?? : 널 병합 연산자

---------------------------------------------

? : : 삼항 조건 연산자

---------------------------------------------

=, +=, -=, *=, /=, %=, **=, <<=, >>=, >>>=, &=, ^=, |=, &&=, ||=, ??= :

yield : 제너레이터 함수 중지 또는 재개

yield* : yield 위임할 때 사용

---------------------------------------------

, : 쉼표

---------------------------------------------

 

※ 전위 후위 증가 확인해보기

var x = 1;

console.log(++x + x++);

console.log(x);

 

연산자 결합 순서

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

좌항 → 우항

우항 → 좌항