왕진 블로그
JavaScript 대입 · 조건 연산자 완전 정리
두 개의 짧은 예제를 함께 본다. 첫 번째는 +=, *=, %= 같은 복합 대입 연산자이고, 두 번째는 조건에 따라 값을 골라내는 삼항 연산자다. 둘 다 "이미 아는 문법을 더 짧게 쓰는 방법"이라는 공통점이 있다.
x=3, y=3, z=3
x += 3; 실행 후, x=6
y *= 3; 실행 후, y=9
z %= 2; 실행 후, z=1
a=3, b=5
두수의 차이 : 2
수학에서 x = x + 3은 성립할 수 없는 식이다(양변이 같을 수 없으니까). 하지만 JS에서는 매우 자연스러운 문장이다. 여기서 =는 "같다"가 아니라 "오른쪽을 계산해서 왼쪽 상자에 넣어라"는 명령이기 때문이다. 오른쪽이 먼저 계산되고, 그 결과가 왼쪽 변수에 저장된다.
x = x + 3을 읽는 순서: ① 오른쪽 x + 3을 먼저 계산(현재 x=3이면 6) → ② 그 결과 6을 왼쪽 x에 다시 저장. 그래서 실행 후 x는 6이 된다.x += 3은 x = x + 3과 완전히 같은 동작을 하는 축약 문법이다. "같은 변수를 오른쪽에도, 왼쪽에도 다시 쓰는" 패턴이 프로그래밍에서 너무 자주 나오기 때문에, 언어 차원에서 짧게 쓰는 방법을 마련해 둔 것이다. 변수 이름을 두 번 안 써도 되니 오타 위험도 줄어든다.
+=더하고 대입,-=빼고 대입*=곱하고 대입,/=나누고 대입%=나머지 구하고 대입- 모두 "왼쪽 = 왼쪽 (연산자) 오른쪽" 구조를 줄인 것
y *= 3은 y = y * 3과 같아서 3×3=9가 된다. z %= 2는 z = z % 2와 같은데, %는 "나눈 몫이 아니라 나눈 후 남는 값"을 돌려준다. z가 3이었으니 3 ÷ 2 = 1...나머지 1, 그래서 z는 1이 된다.
%의 대표적인 활용: 짝수/홀수 판별(n % 2 === 0), 배열을 순환시키는 인덱스 계산, 시/분/초 변환 등 "나눠떨어지지 않고 남는 값"이 필요한 모든 곳에 쓰인다.
대입 연산 예제가 실행되는 순서를 단계별로 보면 +=, *=, %=가 어떻게 값을 바꾸는지 더 명확해진다.
x += 3처럼 자기 자신을 다시 쓰는 표현이 문제없이 동작한다.삼항 연산자는 이름 그대로 조건, 참일 때 값, 거짓일 때 값 세 부분으로 구성된다. ? 앞의 식이 참이면 ?와 : 사이의 값을, 거짓이면 : 뒤의 값을 결과로 돌려주는 식(expression)이다. 문장이 아니라 "값 하나로 계산되는 식"이라는 점이 핵심이다.
삼항 연산자가 하는 일은 if-else와 똑같다. 차이는 if-else는 "문장(statement)"이라 값을 돌려주지 않고, 삼항은 "식(expression)"이라 그 자리에서 값으로 바로 쓸 수 있다는 점이다. 그래서 변수에 바로 대입하거나 document.write 안에 바로 넣을 수 있다.
if (a > b) {
diff = a - b;
} else {
diff = b - a;
}
→ 5줄, diff는 나중에 씀
→ 1줄로 끝, 바로 대입 가능
document.write("두수의 차이 : " + ((a>b)?(a-b):(b-a)))도 마찬가지다. 삼항 연산자가 "식"이기 때문에 문자열과 +로 바로 이어 붙일 수 있는 것이다. if-else였다면 이렇게 한 줄에 넣을 수 없었다.삼항 연산자 안에 또 삼항을 넣는 중첩(nesting)이 문법적으로는 가능하다. 하지만 a ? b : c ? d : e처럼 괄호 없이 여러 번 중첩하면 어디가 어디에 걸리는지 한눈에 안 보여서 읽는 사람(미래의 나 포함)이 헷갈린다. 조건이 2개를 넘어가면 차라리 if-else로 풀어 쓰는 게 낫다.
score >= 90 ? "A" : score >= 80 ? "B" : "C" — 동작은 하지만 한눈에 읽기 어렵다. 괄호로 score >= 90 ? "A" : (score >= 80 ? "B" : "C")처럼 감싸거나, 조건이 늘어나면 if-else로 바꾸는 게 안전하다.부가적으로, x = 5같은 대입식 자체도 대입된 값(5)을 결과로 돌려준다. 그래서 a = b = 5처럼 연쇄 대입이 가능한 것이다(오른쪽부터 계산되어 b=5, 그 다음 a=5). 다만 가독성을 해치니 실무에서는 한 줄에 하나씩 대입하는 것을 권장한다.
| 실수 | 증상 | 해결 |
|---|---|---|
=와 == 혼동 |
비교하려 했는데 값이 바뀌어버림 | 대입은 =, 비교는 ==/=== 구분 |
%와 / 혼동 |
나머지를 원했는데 몫이 나옴(또는 반대) | /=몫, %=나머지로 암기 |
| 삼항에서 괄호 생략으로 우선순위 꼬임 | 의도와 다른 값이 계산됨 | 조건식과 각 항을 (조건)?(참):(거짓)처럼 괄호로 묶기 |
| 삼항을 여러 번 중첩 남용 | 코드가 한눈에 안 읽힘 | 조건 2개 넘으면 if-else로 전환 |
+=를 =+로 잘못 입력 |
부호 반전으로 오작동, 에러 없이 조용히 틀림 | 연산자와 등호 순서(+=) 확인하는 습관 |
핵심 한 줄 요약
Tags
'php' 카테고리의 다른 글
| JavaScript 반복문 — for · while · do-while 완전 정리 (0) | 2026.07.03 |
|---|---|
| JavaScript 문자열 연산 — 타입 혼합과 비교 완전 정리 (0) | 2026.07.03 |
| JavaScript 비교·논리 연산자 완전 정리 (0) | 2026.07.03 |
| JavaScript if-else — 학점 매기기 완전 정리 (0) | 2026.07.03 |
| JavaScript 링크·외부 파일 — href · alert · 이미지 교체 완전 정리 (0) | 2026.07.03 |
댓글