JavaScript Precedence
JavaScript Operator Precedence: 연산자 우선순위 이해와 활용
JavaScript Operator Precedence(연산자 우선순위)는 여러 연산자가 한 표현식에 있을 때, 어떤 연산자가 먼저 실행되는지를 결정합니다. 각 연산자는 고유의 우선순위를 가지며, 우선순위가 높은 연산자가 먼저 실행됩니다. 동일한 우선순위를 가진 연산자들은 결합 방향에 따라 처리 순서가 결정됩니다.
이 가이드는 JavaScript에서 연산자의 우선순위와 결합 방향을 설명하고, 이를 올바르게 사용하는 방법을 다룹니다.
1. 연산자의 우선순위란?
연산자가 여러 개 있는 표현식에서 연산자 우선순위는 먼저 실행될 연산자를 결정합니다. 우선순위가 높은 연산자가 먼저 평가되며, 우선순위가 낮은 연산자는 나중에 평가됩니다.
1.1. 예시
let result = 3 + 4 * 5; // 출력: 23
위 예시에서, 곱셈(*) 연산자는 **덧셈(+)**보다 우선순위가 높기 때문에, 4 * 5가 먼저
계산된 후 3 + 20이 계산됩니다.
2. 연산자 우선순위 테이블
아래는 JavaScript에서 사용되는 주요 연산자의 우선순위 목록입니다. 우선순위가 낮을수록 연산이 나중에 수행됩니다.
| 우선순위 | 연산자 | 설명 | 결합 방향 |
|---|---|---|---|
| 19 | () |
괄호 | 왼쪽에서 오른쪽 |
| 18 | ., [] |
객체의 속성 접근 | 왼쪽에서 오른쪽 |
| 17 | new(매개변수 존재) |
인스턴스 생성 | 왼쪽에서 오른쪽 |
| 16 | ++, -- |
후위 증가 및 감소 | 왼쪽에서 오른쪽 |
| 15 | !, ~, +,
-, ++, --,
typeof, void,
delete |
단항 연산자 | 오른쪽에서 왼쪽 |
| 14 | ** (제곱) |
지수 연산 | 오른쪽에서 왼쪽 |
| 13 | *, /, % |
곱셈, 나눗셈, 나머지 | 왼쪽에서 오른쪽 |
| 12 | +, - |
덧셈, 뺄셈 | 왼쪽에서 오른쪽 |
| 11 | <<, >>,
>>> |
비트 시프트 연산자 | 왼쪽에서 오른쪽 |
| 10 | <, <=,
>, >=,
instanceof, in |
비교 연산자 | 왼쪽에서 오른쪽 |
| 9 | ==, !=, ===,
!== |
동등 및 일치 연산자 | 왼쪽에서 오른쪽 |
| 8 | & |
비트 AND | 왼쪽에서 오른쪽 |
| 7 | ^ |
비트 XOR | 왼쪽에서 오른쪽 |
| 6 | **` | `** | 비트 OR |
| 5 | && |
논리 AND | 왼쪽에서 오른쪽 |
| 4 | **` | `** | |
| 3 | ?: |
삼항 조건 연산자 | 오른쪽에서 왼쪽 |
| 2 | =, +=, -=,
*=, /=, %= 등
|
할당 연산자 | 오른쪽에서 왼쪽 |
| 1 | , |
쉼표 연산자 | 왼쪽에서 오른쪽 |
3. 결합 방향 (Associativity)
결합 방향은 동일한 우선순위를 가진 연산자들이 어느 방향으로 평가되는지를 결정합니다.
- 왼쪽에서 오른쪽: 대부분의 연산자들은 왼쪽에서 오른쪽으로 결합됩니다. 즉, 왼쪽에 있는 연산자가 먼저 실행됩니다.
- 오른쪽에서 왼쪽: 일부 연산자들(예: 할당 연산자, 삼항 조건 연산자, 지수 연산자 등)은 오른쪽에서 왼쪽으로 결합됩니다.
3.1. 예시: 왼쪽에서 오른쪽 결합
let result = 10 - 5 - 2; // 출력: 3
위 예시에서는 왼쪽에서 오른쪽 결합 규칙이 적용되므로, 10 - 5가 먼저 계산되고, 그 결과에 다시 - 2가 적용됩니다.
3.2. 예시: 오른쪽에서 왼쪽 결합
let a = b = 5; // a와 b 모두 5로 할당
위 예시에서는 **할당 연산자(=)**가 오른쪽에서 왼쪽으로 결합되기 때문에 b = 5가 먼저 실행되고, 그 다음에
a = 5가 실행됩니다.
4. 괄호를 사용한 우선순위 제어
- *괄호(
())**를 사용하면 연산자의 우선순위를 강제로 제어할 수 있습니다. 괄호 안의 표현식이 가장 먼저 평가됩니다.
4.1. 예시: 괄호로 우선순위 변경
let result = (3 + 4) * 5; // 출력: 35
위 예시에서는 괄호가 있기 때문에 3 + 4가 먼저 계산된 후 7 * 5가 계산됩니다. 연산자 우선순위 때문에 곱셈이 먼저 일어나는 기본 규칙을 무시하고, 괄호를 통해 덧셈을 먼저 수행하도록 했습니다.
5. 연산자 우선순위 예시
5.1. 복잡한 연산식에서 우선순위 이해
let result = 2 + 3 * 4 / 2 - 1; // 출력: 7
연산 순서를 따라가 보면:
- *곱셈(``)**이 먼저 실행:
3 * 4 = 12 - *나눗셈(
/)**이 다음으로 실행:12 / 2 = 6 - 덧셈(
+):2 + 6 = 8 - 뺄셈(``):
8 - 1 = 7
5.2. 할당 연산자의 우선순위
let x = 10;
let y = 20;
let z = 30;
x = y = z; // 출력: x, y, z 모두 30
위 예시에서 **할당 연산자(=)**는 오른쪽에서 왼쪽으로 결합되므로, z의 값인 30이 먼저
y에 할당되고, 그 다음에 x에 할당됩니다. 따라서 x, y, z 모두
30이 됩니다.
6. 우선순위 오류 방지
연산자 우선순위와 결합 규칙을 잘못 이해하면 코드의 결과가 예상과 다를 수 있습니다. 이를 방지하기 위해 괄호를 적극적으로 사용하여 연산 순서를 명확하게 하는 것이 좋습니다.
6.1. 예시: 명확한 연산 순서
let result = (2 + 3) * (4 - 2);
console.log(result); // 출력: 10
괄호를 사용해 연산 순서를 명확하게 지정하면 코드의 가독성이 높아지고, 우선순위 오류를 방지할 수 있습니다.
요약
- 연산자 우선순위는 여러 연산자가 포함된 표현식에서 어떤 연산자가 먼저 계산되는지를 결정합니다.
- 연산
자들의 우선순위는 높을수록 먼저 실행됩니다. 곱셈과 나눗셈은 덧셈과 뺄셈보다 우선순위가 높습니다.
- 결합 방향: 왼쪽에서 오른쪽 결합과 오른쪽에서 왼쪽 결합이 있으며, 이 결합 규칙에 따라 같은 우선순위의 연산자가 실행되는 순서가 결정됩니다.
- 괄호를 사용하면 우선순위를 재정의하고, 원하는 순서로 연산을 처리할 수 있습니다.
연산자 우선순위를 잘 이해하고 사용하면 복잡한 연산을 다루는 코드에서 예상치 못한 오류를 방지할 수 있습니다.