본문 바로가기
JS/JavaScript 강의

6. 연산자 우선순위 (Operators Precedence)

by 박기린 2022. 9. 25.

안녕하세요. 박기린입니다.

 

 

3 * (1+2)

이라는 식을 보면 어떻게 계산을 하시나요? 수학에는 계산을 할 때 순서가 있습니다. 위의 식의 경우에는, 괄호 안의 값을 계산한 후에 3을 곱하는 순서로 이루어져 있습니다.

식이 복잡해질 경우 어떤 계산 기호를 사용하느냐에 따라 계산 우선순위가 달라집니다. 그리고 이는 코딩에서도 마찬가지입니다.

 

 

Operators Precedence

console.log(3 + 10 * 2); // 23
console.log(3 + (10 * 2)); // 23
console.log((3 + 10) * 2); // 26

자바스크립트에서도 연산자 종류에 따라 계산의 우선순위가 정해집니다. 위처럼 (3+10)일 경우 덧셈임에도 불구하고 괄호 안에 있어서 먼저 계산된 것을 확인할 수 있습니다.

 

 

 

 

수학과는 다르게 코딩은 수학 연산자 뿐만 아니라 할당 연산자, 비교 연산자가 존재합니다. 그리고 이에 따른 우선순위가 역시 존재합니다.

1 + 2 ** 3 * 4 / 5 >  6

위와 같은 경우에는 어떤 순서로 진행이 될까요?

 

   (1 + ( ( (2 ** 3) * 4 ) / 5) )  > 6
// │    │ │ └─ 1. ─┘     │    │ │    │  
// │    └─│─────── 2. ───│────┘ │    │
// └──────│───── 3. ─────│──────┘    │
//        └───── 4. ─────┘	     │
//               └─────────5. ───────┘

티스토리 코드 블록에서는 연산 순서도가 깨져버려서 스크린샷을 같이 첨부합니다.

1. **은 제곱 연산자로 여기에서 가장 높은 우선순위를 가집니다.

2&3. 그 다음에 이어서 *와 /가 실행이 됩니다. 곱셈과 나눗셈은 같은 우선순위를 가지는데, 수학연산자일 경우 먼저 온 순서 (왼쪽) 일 때 우선순위를 높게 가져갑니다.

4. 덧셈을 진행합니다.

5. 비교 연산자는 수학 연산자보다 우선순위가 낮습니다. 그래서 '>'를 기준으로 좌항의 수학 연산이 모두 완료된 뒤에 비교 연산이 시작됩니다.

6. 위의 연산은 최종적으로 true (boolean type)를 반환합니다.

 

 

 

연산자 우선순위 표

수학연산자, 비교연산자, 할당연산자 모두 우선순위를 가집니다. 우선순위를 정리해놓은 표가 있는데요, 보다보면 이것까지 우선순위가 있었어? 싶은 것들이 참 많습니다. 우리가 모르는 사이에 연산자 사이에는 우선순위가 작동하고 있었던 것입니다.

 

우선순위 표 링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#%ED%91%9C

 

연산자 우선순위 - JavaScript | MDN

연산자 우선순위는 연산자를 실행하는 순서를 결정합니다. 우선순위가 높은 연산자가 먼저 실행됩니다.

developer.mozilla.org

 

 

Associativity

표를 보면 Associativity라는 레이블을 가지고 있습니다. 거기엔 left-to-right나 right-to-left가 보입니다.

수학연산자, 비교 연산자인 경우 left-to-right로 왼쪽에 오는 것을 먼저 연산합니다.

할당연산자인 경우 right-to-left로 오른쪽에 오는 것을 먼저 연산합니다.

 

 

할당연산자는 right-to-left 임을 명심하자

let x, y;
x = y = 25 - 10 - 5; // x = y = 10, x = 10 
console.log(x, y);

위의 경우에는 할당연산자(=)가 오른쪽부터 연산되기에, '25 - 10 - 5'가 먼저 연산됩니다. 그리고 그 값이 y에 저장됩니다. 마지막으로 y에 저장된 값이 x에도 저장됩니다.

 

const now = 2022;
const agePark = now - 2000;

우리는 일반적으로 변수명을 쓰고, '='를 쓰고, 할당하고자 하는 값 (JS Expression - 추후 구체적인 설명글 작성 및 링크 게시 예정)을 씁니다. 할당 연산자가 right-to-left임을 우리도 모르는 사이에 자연스럽게 쓰고 있던 것입니다. 

 

 

 

 

반응형