[ 딥다이브 #7 ] 연산자

비트·2023년 11월 8일
딥다이브
0

JavaScript

목록 보기
20/22
post-thumbnail
post-custom-banner

오늘 읽은 범위 : 7장 연산자 (74p ~ 92p)
날짜 : 2023.11.3 ~ 11.4

📂 목차

1. 산술 연산자
2. 할당 연산자
3. 비교 연산자
4. 삼항 조건 연산자
5. 논리 연산자
6. 쉼표 연산자
7. 그룹 연산자
8. typeof 연산자
9. 지수 연산자
10. 그 외의 연산자
11. 연산자의 부수 효과
12. 연산자 우선순위
13. 연산자 결합 순서


연산자

  • 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다.
  • 이때 연산의 대상을 피연산자라 한다.
    • 피연산자는 값으로 평가될 수 있는 표현식이어야 한다.
    • 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다.
  • 피연산자가 "값"이라는 명사의 역할을 한다면 연산자는 "피연산자를 연산하여 새로운 값을 만든다"라는 동사의 역할을 한다고 볼 수 있다.
    • 피연산자는 연산의 대상이 되어야 하므로 값으로 평가할 수 있어야 한다.
  • 연산자는 값으로 평가된 피연산자를 연산해 새로운 값을 만든다.

산술 연산자

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

  • 산술 연산이 불가능한 경우, NaN을 반환한다.
  • 산술 연산자는 피연산자의 개수에 따라 이항 산술 연산자와 단항 산술 연산자로 구분할 수 있다.

이항 산술 연산자

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

  • 모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수 효과가 없다.
    • 어떤 산술 연산을해도 피연산자의 값이 바뀌는 경우는 없고 언제나 새로운 값을 만들 뿐이다.
이항 산술 연산자의미부수 효과
+덧셈X
-뺄셈X
*곱셈X
/나눗셈X
%나머지X
5 + 2; -> 7
5 - 2; -> 3
5 * 2; -> 10
5 / 2; -> 2.5
5 % 2; -> 1

단항 산술 연산자

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

단항 산술 연산자의미부수 효과
++증가O
--감소O
+어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다.X
-양수를 음수로, 음수를 양수로 값을 반환한다.X

주의할 점은 이항 산술 연산자와는 달리 증감/감소 (++/--) 연산자는 피연산자의 값을 변경하는 부수 효과가 있다는 것이다.

  • 다시 말해, 증감/감소 연산을 하면 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
var x = 1;

// ++연산자는 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
x++; // x = x + 1;
console.log(x); // 2

// --연산자는 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
x--; // x = x - 1;
console.log(x); // 1

문자열 연결 연산자

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

그 외의 경우는 산술 연산자로 동작한다.

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

// 산술 연산자
1 + 2; // -> 3

// true는 1로 타입 변환된다.
1 + true; // -> 2

//false는 0으로 타입 변환된다.
1 + false; //  -> 1

// null은 0으로 타입 변환된다.
1 + null; //  -> 1

// undefined는 숫자로 타입 변환되지 않는다.
+undefined; // -> NaN
1 + undefined; // -> NaN

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


할당 연산자

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

할당 연산자예동일 표현부수 효과
=x = 5x = 5
+=x += 5x = x + 5O
-=x -= 5x = x - 5O
*=x *= 5x = x * 5O
/=x /= 5x = x / 5O
%=x %= 5x = x % 5O

비교 연산자

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

  • 비교 연산자는 if 문이나 for 문과 같은 제어문의 조건식에서 주로 사용한다.

동등/일치 비교 연산자

동등 비교 연산자와 일치 비교 연산자는 좌항과 우힝의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환한다.

  • 하지만 비교하는 엄격성의 정도가 다르다.
    • 동등 비교 연산자는 느슨한 비교를 하지만 일치 비교 연산자는 엄격한 비교를 한다.
비교 연산자의미사례설명부수 효과
==동등 비교x == yx와 y의 값이 같음X
===일치 비교x === yx와 y의 값과 타입이 같음X
!=부동등 비교x != yx와 y의 값이 다름X
!==부일치 비교x !== yx와 y의 값과 타입이 다름X

대소 관계 비교 연산자

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

대소 관계 비교 연산자예제설명부수 효과
>x > yx가 y보다 크다.X
<x < yx가 y보다 작다.X
>=x >= yx가 y보다 크거나 같다.X
<=x <= yx가 y보다 작거나 같다.X

삼항 조건 연산자

삼항 조건 연산자는 조건식의 평가 결과에 따라 반환할 값을 결정한다.

  • 자바스크립트의 유일한 삼항 연산자이며, 부수 효과는 없다.
// 조건식 ? 조건이 true일 때 반환할 값 : 조건이 false일 때 반환할 값

var x = 2, result;

// 조건식
if (x % 2) {
  return result = '홀수'
} else {
  return result = '짝수'
};
console.log(result); // 짝수

// 삼항 조건 연산자
var result = x % 2 ? '홀수' : '짝수';

console.log(result); // 짝수

논리 연산자

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

논리 연산자의미부수 효과
｜｜논리합(OR)X
&&논리곱(AND)X
!부정(NOT)X
// 논리합(｜｜) 연산자
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

쉼표 연산자

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

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

그룹 연산자

소괄호('()')로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다.

  • 따라서 그룹 연산자를 사용하면 연산자의 우선순위를 조절할 수 있다.
    • 그룹 연산자는 우선순위가 가장 높다.
10 * 2 + 3; // -> 23
10 * (2 + 3); // -> 50

typeof 연산자

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

  • typeof 연산자는 7가지 문자열 "string", "number", "boolean", "undefined", "symbol", "object", "function" 중 하나를 반환한다.
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"

// null은 object으로 반환되므로 typeof 연산자를 사용하지 말고 일치연산자를 사용하자
var foo = null;

typeof foo === null; // -> false
foo === null; // -> true

지수 연산자

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

2 ** 2; // -> 4
2 ** 2.5; // -> 5.65685424949238
2 ** 0; // -> 1
2 ** -2; // -> 0.25

// 지수 연산자 이전엔 Math.pow 메서드를 사용했다.
Math.pow(2, 2); // -> 4
Math.pow(2, 2.5); // -> 5.65685424949238
Math.pow(2, 0); // -> 1
Math.pow(2, -2); // -> 0.25

// 음수를 거듭제곱의 밑으로 사용해 계산하려면 괄호로 묶어야 한다.
-5 ** 2;
// SyntaxError: Unary operator used immediately before exponentiation expression.
// Parenthesis must be used to disambiguate operator precedence

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

그 외의 연산자

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

연산자의 부수 효과

대부분의 연산자는 다른 코드에 영향을 주지 않는다.

var x;

//할당 연산자는 변수 값이 변하는 부수 효과가 있다.
x = 1;
console.log(x); // 1

// 증가/감소 연산자(++/--)는 피연산자의 값을 변경하는 부수 효과가 있다.
x++;
console.log(x); // 2

var o = { a : 1 };

//delete 연산자는 객체의 프로퍼티를 삭제하는 부수 효과가 있다.
delete o.a;
console.log(o); // {}

연산자 우선순위

우선순위연산자
1()
2new(매개변수 존재), ., [](프로퍼티 접근), ()(함수호출), ?.(옵션 체이닝 연산자)
3new(매개변수 미존재)
4x++, x--
5!x, +x, -x, ++x, --x, typeof, delete
6**(이항 연산자 중에서 우선순위가 가장 높다.)
7*, /, %
8+, -
9<, <=, >, >=, in, instanceof
10==, !=, ===, !==
11??(null 병합 연산자)
12&&
13｜｜
14? ... : ...
15할당 연산자(=, +=, -=, ...)
16,

연산자 결합 순서

결합순서연산자
좌항 -> 우항+, -, /, %, <, <=, >, >=, &&, ｜｜, ., [], (), ??, ?., in, instanceof
우항 -> 좌항++, --, 할당 연산자(=, +=, -=, ...), !x, +x, -x, ++x, --x, typeof, delete, ? ... : ..., **
profile
비트
Drop the Bit!
이전 포스트

[ 딥다이브 #6-2 ] 데이터 타입

다음 포스트

[ 딥다이브 #8 ] 제어문

post-custom-banner

0개의 댓글