[딥다이브] 연산자

yricog·약 18시간 전

딥다이브 자바스크립트 책

모던 자바스크립트 딥다이브 책 톺아보기

목록 보기

4/4

모던 자바스크립트 딥다이브 책의 내용을 기반으로 작성하였습니다.🌿

연산자

1. 산술 연산자

산술 연산자는 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능할 경우 NaN을 반환한다.
산술 연산자는 피연산자의 개수에 따라 이항 / 단항 산술 연산자로 구분된다.

이항 산술 연산자

2개의 피연산자를 산술

5 + 2; // 7
5 - 2; // 3
5 * 2; // 10
5 / 2; // 2.5
5 % 2; // 1

단항 산술 연산자

1개의 피연산자를 산술 ++, --, +, -

let x = 1;
x++; // x = x + 1
console.log(x); // 2

x--; // x = x - 1
console.log(x); // 1

전위 증가/감소++, -- 연산자는 피연산자의 값을 먼저 증가/감소 시킨 후 다른 연산을 수행한다. 피연산자의 값을 변경하는 부수 효과가 있는 것으로, 암묵적 할당이 이뤄지게 된다.

let x=5, result;

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

// 선증가 후할당
result = ++x;
console.log(result, x); // 7, 7

// 선할당 후감소
result = x--;
console.log(result, x); // 7, 6

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

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

+10; // 10
+(-10); // -10

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

-(-10); // 10

숫자 타입이 아닌 피연산자에 +, - 연산자를 사용하면 숫자 타입으로 변환하여 반환한다. 부수 효과는 없다.

let x = '1';

console.log(+x); // 1 -> 숫자타입으로 반환 
console.log(x); // "1" -> 문자열 그대로다. 부수효과 없음!

문자열 연결 연산자

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

'1' + 2; // '12'

// 암묵적 타입 변환 
1 + true // 2 (true = 1)
1 + false // 1 (false = 0)
1 + null // 1 (null = 0)

// undefined는 숫자 타입으로 변환되지 X 
+undefined; // NaN
1 + undefined; // NaN

자바스크립트 엔진은 암묵적으로 불리언 타입을 숫자 타입으로 강제 변환한 뒤 연산을 수행하는데, 이를 암묵적 타입 변환 또는 타입 강제 변환 이라고 한다.

2. 할당 연산자

할당 연산자는 피연산자의 결과 값을 변수에 할당한다.

let x;

x = 10; // 10
x += 5; // 15
x -= 5; // 10

할당문은 값으로 평가되는 표현식인 문으로써 할당된 값으로 평가된다. 때문에 할당문 자체를 다른 변수에 할당할 수도 있다.

let x;
console.log(x = 10); // 10

/* 
 < 연쇄할당 순서 >
	1. c = 0
    2. b = 0
    3. a = 0
*/
let a, b, c;
a = b = c = 0; 
console.log(a, b, c); // 0 0 0

3. 비교 연산자

비교 연산자는 좌,우항의 피연산자를 비교하여 결과를 불리언 값으로 반환한다.

동등/일치 비교 연산자

동등 비교 연산자(==)와 일치 비교 연산자(===)는 좌,우항의 피연산자가 같은 값으로 평가되는지를 검증하지만 그 엄격성의 정도가 다르다.

x == y : x와 y의 값이 같음
x === y : x와 y의 값과 타입이 같음
x != y : x와 y의 값이 다름
x !== y : x와 y의 값과 타입이 다름

동등 비교 연산자(==)는 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지를 비교한다. 이는 편리한 경우도 있지만 결과를 예측하기 어려워 실수하기 쉽다.

5 == 5; // true
5 == '5'; // true

'0' == ''; // false 
0 == ''; // true
0 == '0'; // true
false == 'false'; // false
false == '0'; // true
false == null; // false
false == undefined; // false

일치 비교 연산자(===)는 값과 타입 모두 같은 경우에 한하여 true를 반환한다. 때문에 예측하기 쉽다.

5 === 5; // true
5 === '5'; // false

NaN은 자신과 일치하지 않는 유일한 값이다. NaN인지 검증하려면 Number.inNaN을 사용하자.

NaN === NaN; // false
Number.isNaN(NaN); // true

JS에는 양의 0과 음의 0이 있는데, 이 둘은 본래 true를 반환한다. 이를 정확히 구분하기 위해서는 Object.is 메서드를 사용하자.

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

대소 관계 비교 연산자

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

5 > 0; // true
5 > 5; // false
5 >= 5; // true
5 <= 5; // true

4. 삼항 조건 연산자

삼항 조건 연산자는 조건식의 결과에 따라 반환할 값이 결정된다.

조건식 ? 조건식이 True일 때 반환할 값 : 조건식이 False일 때 반환할 값

또한 삼항 조건 연산자는 값으로 평가될 수 있는 표현식인 문이다.
따라서 if...else 문과 다르게 값처럼 사용될 수 있다.

let x = 2;
let result = x % 2 ? '홀수' : '짝수';
console.log(result); // 짝수

5. 논리 연산자

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

// 논리합(||) 연산자 
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

// 논리 부정 연산자의 암묵적 타입 변환
!0; // true
!'Hello'; // false

위 예시처럼, 논리 부정 연산자는 암묵적 타입 변환을 해서라도 언제나 불리언 값을 반환한다. 하지만 논리합(||) 또는 논리곱(&&) 연산자의 표현식 결과는 불리언 값이 아닐 수도 있으며, 2개의 피연산자 중 어느 한쪽으로 평가된다. (이후 '단축 평가'에서 자세히 알아보자)

'Cat' && 'Dog'; // 'Dog'

드 모르간의 법칙

논리 연산자로 구성된 복잡한 표현식을 가독성 좋은 코드로 변환해보자.

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

6. 쉼표 연산자

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

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

7. 그룹 연산자

소괄호()로 피연산자를 감싼 그룹 연산자는 표현식을 가장 먼저 평가한다. 그룹 연산자는 연산자 우선순위가 가장 높다.

10 * 2 + 3; // 23
10 * (2 + 3); // 50

8. typeof 연산자

typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환한다. typeof가 반환하는 문자열은 7개의 데이터 타입과 정확히 일치하지는 않는다.

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 null 의 결과는 object를 반환하는데, 이는 자바스크립트의 첫 번째 버그이다.
(~~기존 코드에 영향을 줄 수 있기 때문에 아직 수정되지 못하고 있다고 한다~~🫢)
때문에 null 타입을 확인할 때는 일치 연산자(===)를 사용하도록 하자.

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

또 하나 주의할 점은, 선언하지 않은 식별자를 typeof로 연산할 때 ReferenceError가 아닌 undefined를 반환한다.

typeof undeclared; // undefined

9. 지수 연산자

지수 연산자는 ES7에서 도입된 것으로, 좌항의 피연산자를 밑(base)로, 우항의 피연산자를 지수(exponent)로 거듭 제곱하여 숫자를 반환한다. 지수 연산자가 도입되기 전에는 Math.pow 메서드를 사용했었다.

2 ** 2; // 4
2 ** 2.5 // 5.6568...
2 ** 0 // 1
2 ** -2 // 0.25

// Math.pow 메서드 예시 
Math.pow(2,2) // 4

음수를 거듭제곱의 밑으로 사용하려면 괄호로 묶어보자.

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

할당 연산자와 함께 사용 가능한 지수 연산자

let num = 5;
num **= 2;

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

2 * 5 ** 2; // 50

10. 그 외의 연산자

그 외 연산자들은 다른 주제와 연관하여 추후 자세히 살펴보도록 하자!

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

yricog

의미와 가치를 쫓는 개발자 ✨

이전 포스트