자바스크립트 - 연산자 우선순위

안녕하세요, 야심찬 프로그래머 여러분! 오늘은 처음에는 조금 무서워 보일 수 있는 주제를 다루게 될 것입니다, 하지만 제가 약속드리건, 그렇게 무서운 것은 아닙니다. 우리가 다루게 될 주제는 자바스크립트의 연산자 우선순위입니다. 이를 프로그래밍에서의 수학적 '우선순위'라고 생각해보세요. 함께 이를 풀어보겠습니다!

연산자 우선순위란?

들어가기 전에 기본적인 내용부터 시작해보겠습니다. 연산자 우선순위는 수학 수업에서 배운 연산의 순서와 비슷합니다. PEMDAS(소괄호, 지수, 곱셈, 나눗셈, 덧셈, 뺄셈)을 기억하시나요? 자바스크립트도 자신만의 버전을 가지고 있습니다!

연산자 우선순위는 연산자가 서로 관련된 방식으로 구문을 분석하는 것을 결정합니다. 더 높은 우선순위를 가진 연산자는 더 낮은 우선순위를 가진 연산자의 피 연산자가 됩니다.

간단한 예제를 보겠습니다:

let result = 5 + 3 * 2;
console.log(result); // 출력: 11

당신은 답이 16(5 + 3 = 8, 그런 다음 8 2 = 16)라고 생각할 수 있을 것입니다, 하지만 실제로는 11입니다. 왜 그럴까요? because 곱셈이 덧셈보다 더 높은 우선순위를 가지기 때문입니다. 따라서 3 2가 먼저 계산되고(6을 주고), 그 다음 5를 더합니다.

결합성(Associativity)

이제 복잡한 단어에 대해 이야기해보겠습니다: 결합성. 걱정 마세요, 그보다 간단합니다!

결합성은 동일한 우선순위를 가진 연산자들이 처리되는 순서를 결정합니다. 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 처리될 수 있습니다.

왼쪽 결합성(Left-to-Right Associativity)

대부분의 연산자는 왼쪽에서 오른쪽으로 결합성을 따릅니다. 예제를 보겠습니다:

let a = 10 - 5 - 2;
console.log(a); // 출력: 3

자바스크립트는 다음과 같이 처리합니다:

1. 10 - 5 = 5
2. 5 - 2 = 3

오른쪽 결합성(Right-to-Left Associativity)

일부 연산자, 할당 연산자 (=)과 같은 경우 오른쪽에서 왼쪽으로 결합성을 따릅니다. 어떻게 작동하는지 보겠습니다:

let a, b, c;
a = b = c = 5;
console.log(a, b, c); // 출력: 5 5 5

자바스크립트는 다음과 같이 오른쪽에서 왼쪽으로 처리합니다:

1. c = 5
2. b = c (5입니다)
3. a = b (5입니다)

연산자 우선순위 표

이제 자바스크립트의 연산자 우선순위 "메뉴"를 보겠습니다. 아직 이 모든 것을 이해하지 못해도 괜찮습니다 - 예제를 통해 설명해보겠습니다!

우선순위	연산자 유형	결합성	연산자
19	그룹화	n/a	( ... )
18	멤버 접근	왼쪽에서 오른쪽으로	. []
17	함수 호출	왼쪽에서 오른쪽으로	... ( )
16	새로운 (인자 목록과 함께)	n/a	new ... ( )
15	후치 연산/감소	n/a	... ++ ... --
14	논리 부정, 비트 부정, 일의 연산, 전치 연산/감소, typeof, void, delete, await	오른쪽에서 왼쪽으로	! ~ + - ++ -- typeof void delete await
13	지수	오른쪽에서 왼쪽으로	**
12	곱셈, 나눗셈, 나머지	왼쪽에서 오른쪽으로	* / %
11	덧셈, 뺄셈	왼쪽에서 오른쪽으로	+ -
10	비트 이동	왼쪽에서 오른쪽으로	<< >> >>>
9	관계	왼쪽에서 오른쪽으로	< <= > >= in instanceof
8	동등성	왼쪽에서 오른쪽으로	== != === !==
7	비트 AND	왼쪽에서 오른쪽으로	&
6	비트 XOR	왼쪽에서 오른쪽으로	^
5	비트 OR	왼쪽에서 오른쪽으로	|
4	논리 AND	왼쪽에서 오른쪽으로	&&
3	논리 OR	왼쪽에서 오른쪽으로	||
2	조건	오른쪽에서 왼쪽으로	?:
1	할당	오른쪽에서 왼쪽으로	= += -= *= /= %= <<= >>= >>>= &= ^= |= **=
0	쉼표	왼쪽에서 오른쪽으로	,

예제

이제 우리의 지식을 몇 가지 예제를 통해 실践해보겠습니다!

예제 1: 산술 연산

let result = 2 + 3 * 4 - 1;
console.log(result); // 출력: 13

자바스크립트는 다음과 같이 평가합니다:

1. 3 * 4 = 12 (곱셈이 더 높은 우선순위를 가짐)
2. 2 + 12 = 14
3. 14 - 1 = 13

예제 2: 논리 연산

let x = 5;
let y = 10;
let z = 15;

let result = x < y && y < z || x > z;
console.log(result); // 출력: true

이를 단계별로 설명해보겠습니다:

1. x < y는 참
2. y < z는 참
3. true && true는 참
4. x > z는 거짓
5. true || false는 참

논리 AND(&&)는 논리 OR(||)보다 더 높은 우선순위를 가집니다.

예제 3: 혼합 연산

let a = 3;
let b = 4;
let c = 5;

let result = a + b * c > c * (a + b) && a < b;
console.log(result); // 출력: false

이것은 복잡해 보이지만, 단계별로 따라보겠습니다:

1. b * c = 20
2. a + 20 = 23
3. c (a + b) = 5 7 = 35
4. 23 > 35는 거짓
5. a < b는 참
6. false && true는 거짓

예제 4: 할당과 비교

let x, y, z;
x = y = z = 5;
console.log(x, y, z); // 출력: 5 5 5

let result = x == y === z;
console.log(result); // 출력: true

할당(:, =)은 오른쪽에서 왼쪽으로 결합성을 가지며, 동등 비교(==, ===)은 왼쪽에서 오른쪽으로 결합성을 가집니다.

1. z = 5
2. y = z (5입니다)
3. x = y (5입니다)
4. x == y는 참
5. true === z는 참 (z는 5이며 참입니다)

결론

축하드립니다! 지금까지 자바스크립트 연산자 우선순위에 대한 첫 걸음을 냈습니다. 연습이 완벽을 만듭니다. 두려워 말고 다양한 연산자 조합을 실험해보세요 - 이렇게 해서 진정으로 이 개념을 이해할 수 있습니다.

그리고 마지막 팁: 의심이 든다면 괄호를 사용하세요! 괄호는 가장 높은 우선순위를 가지며, 코드가 더 읽기 쉬워집니다. 예를 들어:

let result = (2 + 3) * 4 - 1;
console.log(result); // 출력: 19

이렇게 하면 자바스크립트가 어떻게 표현식을 평가하고 싶은지 명확히 전달할 수 있습니다.

계속 코딩하고, 계속 배우며, 가장 중요한 것은 즐겁게 코드를 작성하세요! 자바스크립트는 강력한 언어이며, 이 기본 개념을 이해하면 프로그래밍 여정에서 성공할 수 있을 것입니다.

Credits: Image by storyset