하나의 연산식에 둘 이상의 연산자가 포함된 경우, 각 연산자의 우선순위에 따라 실행 순서가 정해진다는 사실 알고 계셨나요? 이것이 바로 '연산자 우선순위'입니다. 예를들면 5+3*6에서 곱셈이 먼저 계산되는 것 처럼, 자바스크립트 연산식에 여러 연산자가 포한되면 각각의 우선순위에 따라 먼저 계산됩니다. 오늘도 공부하던 중 나중에도 찾아볼만한 내용이라 적어두게 되었습니다.
주요 연산자 우선순위 순서
아래의 순서는 모든 연산자를 포함하고 있지는 않습니다. 실무에서 많이 사용된다고 알려진 것 위주로 선별했습니다.
- 그룹 연산자 ( )
- 단항 연산자 !, typeof
- 산술 연산자
- 거듭제곱 **
- 곱셈 *, 나눗셈 /, 나머지 %
- 덧셈 +, 뺄셈 -
- 비교 연산자 <, <=, >, >=
- 동등/일치 연산자 ==, !=, ===, !==
- 논리 AND &&
- 논리 OR ||
- 할당 연산자 =
자세한 내용이 더 궁금하시다면 MDN 연산자 우선순위를 참고해보세요.
실제 예제
다음 예제를 통해 연산자 우선순위를 알아보겠습니다.
typeof (6 * 2 === 11 || 13 - 7 < 7 && !true);단계별로 연산자 우선순위에 따라 계산해볼까요?
가장 먼저 !true가 계산됩니다 (NOT 연산자)
typeof (6 * 2 === 11 || 13 - 7 < 7 && false);
그 다음 산술 연산이 실행됩니다
typeof (12 === 11 || 6 < 7 && false);
비교 연산자가 실행됩니다
typeof (false || true && false);
논리 AND가 OR보다 우선순위가 높으므로 먼저 실행됩니다
typeof (false || false);
마지막으로 OR 연산과 typeof 연산이 실행됩니다
typeof false; // 결과: "boolean"
실무에서의 팁
- 가독성을 위한 괄호 사용
너무 복잡한 연산에서는 명시적으로 아예 괄호를 사용하는 것이 좋습니다
-
- 예:
(a && b) || (c && d)
- 예:
- 연산 분리하기
너무 복잡한 연산은 여러 줄로 나누어 작성하면 좋습니다.
const firstCondition = a && b;
const secondCondition = c && d;
const result = firstCondition || secondCondition;
연산자 우선순위를 완벽히 외우기보다 괄호를 적절히 사용하고, 연산을 분리하여 의도를 명확히 하는 것이 더 중요하다고 합니다. 아무래도 코드 리뷰나 유지 보수를 위해서는 주석으로 설명을 추가하는 것도 좋겠죠?