연산자 우선순위, 다중 삼항 연산자

oYJo·2025년 3월 21일

JavaScript

목록 보기

22/52

연산자

1️⃣ 연산자 우선순위

표현식은 결합성과 무관하게 항상 왼쪽에서 오른쪽으로 진행된다.

우선순위	연산자 유형	결합성	연산자
19	그룹	없음	`( … )`
18	멤버 접근	좌결합성	`… . …`
	계산된 멤버 접근	좌결합성	`… [ … ]`
	`new` (인자 리스트 제공)	없음	`new … ( … )`
	함수 호출	좌결합성	`… ( … )`
	옵셔널 체이닝	좌결합성	`?.`
17	`new` (인자 리스트 생략)	우결합성	`new …`
16	후위 증가	없음	`… ++`
	후위 감소		`… --`
15	논리 NOT	우결합성	`! …`
	비트 NOT		`~ …`
	단항 양부호		`+ …`
	단항 부정		`- …`
	전위 증가		`++ …`
	전위 감소		`-- …`
	`typeof`		`typeof …`
	`void`		`void …`
	`delete`		`delete …`
	`await`		`await …`
14	거듭제곱	우결합성	`… ** …`
13	곱하기	좌결합성	`… * …`
	나누기		`… / …`
	나머지		`… % …`
12	더하기	좌결합성	`… + …`
	빼기		`… - …`
11	비트 왼쪽 시프트	좌결합성	`… << …`
	비트 오른쪽 시프트		`… >> …`
	비트 부호 없는 오른쪽 시프트		`… >>> …`
10	미만	좌결합성	`… < …`
	이하		`… <= …`
	초과		`… > …`
	이상		`… >= …`
	`in`		`… in …`
	`instanceof`		`… instanceof …`
9	동등	좌결합성	`… == …`
	부등		`… != …`
	일치		`… === …`
	불일치		`… !== …`
7	비트 AND	좌결합성	`… & …`
7	비트 XOR	좌결합성	`… ^ …`
6	비트 OR	좌결합성	`…
5	논리 AND	좌결합성	`… && …`
4	논리 OR	좌결합성	`…
	널 병합 연산자	좌결합성	`… ?? …`
3	조건 (삼항)	우결합성	`… ? … : …`
2	할당	우결합성	`… = …`
			`… += …`
			`… -= …`
			`… **= …`
			`… *= …`
			`… /= …`
			`… %= …`
			`… <<= …`
			`… >>= …`
			`… >>>= …`
			`… &= …`
			`… ^= …`
			`…
			`… &&= …`
			`…
			`… ??= …`
	`yield`	우결합성	`yield …`
	`yield*`		`yield* …`
1	쉼표 / 시퀀스	좌결합성	`… , …`

출처 : mdn https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Operator_precedence

✔️연산자? 피연산자?
연산 : 새로운 것을 만드는 행위
2+3=5
연산자 : 기호 ( +, = …)
피연산자 : 연산을 당하는 인수(2, 3…)
= 연산을 당하는 함수 호출 변수

인수 1개 연산 = 단항
2개 피연산자 = 이항
3개 피연산자 = 삼항

condition, exprIfTrue, exprIfFalse = 피연산자 3개
? : = 연산자

✔️인수(argument)? 인자(parameter)?
인수 : 함수를 호출할 때 건네주는 변수
인자 : 함수에서 정의되어 함수 내부에서 사용되는 변수 = 파라미터, 매개변수

⭐️비교 연산자 자체가 true, false를 반환하기에
let a = age > 20 ? true : false;
= let a = age > 18;
와 같기에 조건 연산자를 사용하지 않아도 된다.

2️⃣ 다중 삼항 연산자

다중 ?

?를 여러 개 사용하면 복수 조건 사용 가능

let a = (age ≤ 5) ? “5이하” 
: (age ≤ 50) ? “50이하” 
: (age ≤100) ? “100이하” 
: “100초과”;

num > 0 ? “양수” : (num < 0 ? “음수” : “0”));
num가 0보다 크면 양수이고
0보다 작으면 ()이다.
() : 0보다 작으면 음수이다.
0보다 크지도 않고 작지도 않으면 0이다

const info = prompt('What is your number?');
 
if (info <= 5) {
    alert("5 이하입니다.");
} else if (info <= 10) {
    alert("10 이하입니다.");
} else if (info <= 15) {
    alert("15 이하입니다.");
} else {
    alert("15보다 큽니다.");
}

else~if로 사용하는 것을..

const info = prompt('What is your number?');
const message = (info <= 5) ? "5 이하입니다."
    : (info <= 10) ? "10 이하입니다."
    : (info <= 15) ? "15 이하입니다."
    : "15보다 큽니다.";
 
alert(message);