[오늘의 실수] 연산자 우선순위를 복습해요

사내 통계 페이지 작업 중 발생한 실수 로그입니다😂

0. 인트로

예시) totalScore의 값을 화면에 뿌려주기 위한 계산 예시 코드

const surveyData = {
  design: 5,
  usability: null,
  accessibility: 4
};

const totalScore = surveyData.design ?? 0 + surveyData.usability ?? 0 + surveyData.accessibility ?? 0;
console.log('총점:', totalScore); 

예시 코드에서 9가 출력되는 값을 기대하고 있는데, 의도하지 않은 값인 5가 출력되는 문제가 있습니다.

Q : 왜 5가 나왔을까요?

A : 연산자의 우선순위를 신경쓰지 않았습니다.
널 병합 연산자는 덧셈 연산자보다 우선순위가 낮아서 a ?? b + c의 형태는 a ?? (b+c) 형태로 연산됩니다.

1. 연산자 우선순위

연산자 우선순위는 여러 연산자가 함께 있는 경우, 어떤 연산을 먼저 수행할지 결정하는 규칙입니다.
우선순위가 높은 연산자가 먼저 실행되며 우선 순위가 같으면 결합 순서에 따라 좌 -> 우 또는 우 -> 좌 방향으로 실행됩니다.

우선순위
기본적으로 많이 사용하는 연산자의 상대적 우선순위 중심으로 설명합니다. 더 자세한 우선 순위를 확인하고 싶으시면 mdn 우선순위를 확인해주세요!

1. 그룹화 연산자

   • 괄호 ( )

2. 멤버 접근 및 호출

   • 객체 프로퍼티 접근: obj.prop, obj['prop']
   • 함수 호출: func()
   • new 연산자: new Constructor()

3. 단항 연산자

   • 전위 증감: ++x, --x
   • 단항 부정/긍정: !x, +x, -x
   • typeof, void, delete

4. 산술 연산자 (내부 우선순위 있음)

   • 지수: **
   • 곱셈/나눗셈/나머지: *, /, %
   • 덧셈/뺄셈: +, -

5. 비교 연산자

   • 크기 비교: <, >, <=, >=
   • 동등 비교: ==, !=, ===, !==

6. 논리 연산자 (내부 우선순위 있음)

   • 논리 AND: &&
   • 논리 OR: ||
   • 널 병합: ??

7. 조건 연산자

   • 삼항 연산자: condition ? expr1 : expr2

8. 할당 연산자

   • 단순 할당: =
   • 복합 할당: +=, -=, *=, /= 등

2. 연습

Q1) const check = true && false || true;

답 : true
&&가 ||보다 우선입니다.

Q2) const result = 2 ** 3 ** 2

답 : 512
2 ** (3 ** 2) -> 2 ** 9 -> 512
**는 우측 결합입니다

Q3) const a = (1,2,3);

답 : 3
쉼표 연산자는 여러 표현식을 나열하고, 맨 마지막 표현식의 결과값만 반환하는 연산자입니다.

Q4)

const a = null; 
const b = 5; 
const result = a ?? 0 + b ?? 10; 

답 : 5
+ 연산자가 ??보다 먼저 평가되므로 0 + b가 먼저 계산됩니다.
즉, 전체 식은 (a ?? (0 + b)) ?? 10처럼 평가됩니다.
1. 0 + b -> 0 + 5 => 5
2. a ?? 5 -> null ?? 5 => 5
3. 5 ?? 10 -> 5 (null값이 아니므로)

Q5)

let x = 1;
x = x += 2 * 3;

답 : 7
총 3개의 연산자 =, +=, *가 나오는 데, 이 연산자들의 연산은
* += = 순서로 진행됩니다.
1. 2 * 3 -> 6
2. x = x + 6 -> 1 + 6 -> 7

3. 결론

인트로에서 제공했던 예시 코드에서 예상 값인 9가 제대로 나오려면 어떻게 해야할까요?

const surveyData = {
  design: 5,
  usability: null,
  accessibility: 4
};

const totalScore = (surveyData.design ?? 0) + (surveyData.usability ?? 0) + (surveyData.accessibility ?? 0);
console.log('총점:', totalScore); // 총점: 9

바로 괄호를 적절하게 사용하여 연산자 우선순위를 명확히하면 연산자 우선순위를 외우지 않아도 원래 의도대로 9를 출력할 수 있습니다
괄호는 연산자 우선순위가 헷갈릴 때 가장 확실한 해결책입니다👍 👍

---

참고
mdn 연산자 우선순위