세미콜론($;$)과 할당($=$) 실수 방지! JavaScript 표현식 문 완전 정복
자바스크립트의 프로그램은 여러 개의 문(Statement)으로 이루어져 있어요. 이 문들은 컴퓨터에게 "무언가를 하라"는 명령을 내리는 역할을 하죠.
그중 표현식 문은 이름 그대로 "표현식(Expression)"을 포함하는 문이랍니다.
표현식(Expression) 값(value)을 만들어내는 코드 조각이에요. 예를 들어, 1 + 2, a * 3, myFunction() 등이 있죠.
표현식 문(Expression Statement) 표현식 뒤에 세미콜론(;)을 붙여서 하나의 명령으로 만드는 거예요. 이 명령은 대개 표현식의 결과를 계산하고, 그 결과로 어떤 부수 효과(side effect)를 발생시키기 위해 사용되죠.
예시
// 표현식 문들 (대부분의 경우 표현식 뒤에 세미콜론을 붙입니다)
a = b + c; // 할당 표현식 (Assignment Expression)
console.log("Hello!"); // 함수 호출 표현식 (Function Call Expression)
i++; // 증가 표현식 (Increment Expression)
<hr>
표현식 문과 관련하여 초보자가 겪기 쉬운 몇 가지 문제와 그 해결책을 알려드릴게요.
자바스크립트는 세미콜론이 없어도 작동하는 자동 세미콜론 삽입(Automatic Semicolon Insertion, ASI) 기능이 있지만, 이 기능에 너무 의존하면 예상치 못한 버그를 만들 수 있어요. 특히 두 줄이 의도치 않게 하나로 합쳐지는 경우가 생기죠.
| 문제 코드 (Bad) | 설명 |
javascript \n let x = 5 \n [x, x + 1].forEach(console.log) \n | 5와 다음 줄의 [가 붙어 let x = 5[x, x + 1].forEach(console.log)처럼 해석될 수 있어요 (이 코드는 실제로는 ASI 때문에 분리되지만, ASI가 복잡한 상황에서 오작동을 일으킬 수 있습니다). |
| 해결책 (Good) | 표현식 문의 끝에는 항상 세미콜론을 붙이는 습관을 들이세요! |
javascript \n let x = 5; \n [x, x + 1].forEach(console.log); \n | 코드를 더 안정적이고 명확하게 만듭니다. |
자바스크립트에는 값으로 평가되지 않는 문(Statement)들이 있어요. 대표적으로 if 문, for 문, switch 문, const/let/var 변수 선언 문 등이죠. 이들을 표현식처럼 다루려고 하면 오류가 발생해요.
| 문제 코드 (Bad) | 설명 |
javascript \n let result = if (condition) { 10 } else { 20 }; \n // 또는 \n console.log(const a = 1); \n | if나 const는 **문(Statement)**이라서 **값(Value)**을 반환하지 않아요. 따라서 다른 변수에 할당할 수 없거나 함수의 인자로 사용할 수 없어요. |
| 해결책 (Good) | 값으로 평가되는 대체 표현식을 사용하거나, 일반적인 할당 문을 사용하세요. |
javascript \n let result; \n if (condition) { \n result = 10; \n } else { \n result = 20; \n } \n // 또는 삼항 연산자(Conditional Expression) 사용 \n let result = condition ? 10 : 20; \n \n // 변수 선언은 별도의 문으로 처리 \n const a = 1; \n console.log(a); \n | if 문 대신 **삼항 연산자(?:)**를 사용하면 깔끔하게 값을 얻을 수 있습니다. |
조건문(if) 등에서 비교 연산자(==,===)를 사용해야 하는데, 실수로 할당 연산자(=)를 사용하는 경우예요. 할당 자체는 표현식 문으로 유효하기 때문에 오류가 발생하지 않아 찾기 어려운 버그가 될 수 있습니다.
| 문제 코드 (Bad) | 설명 |
javascript \n let x = 10; \n if (x = 5) { \n // 이 블록은 항상 실행됩니다! \n console.log("x는 5입니다."); \n } \n | x = 5는 x에 5를 할당하고, 그 값 5를 반환하는 표현식입니다. 자바스크립트에서 0이 아닌 숫자는 **참(true)**으로 간주되므로, if 문 조건은 항상 참이 됩니다. |
| 해결책 (Good) | 조건을 검사할 때는 비교 연산자를 사용하세요. |
javascript \n let x = 10; \n if (x === 5) { \n // x가 5일 때만 실행됩니다. \n console.log("x는 5입니다."); \n } \n | 엄격한 비교 연산자(===)를 사용하여 타입을 포함한 정확한 비교를 수행합니다. |
<hr>
표현식 문이 아닌 다른 문이나 표현식을 사용하여 비슷한 결과를 얻을 수 있는 몇 가지 방법을 알려드릴게요. 특히, 표현식의 결과를 바로 사용하는 상황에서 유용합니다.
앞서 언급했듯이, 여러 줄의 if/else 문 대신 한 줄로 값을 결정하는 표현식으로 대체할 수 있어요.
| 표현식 문 대체 (Alternative) | 기존 if/else 문 |
javascript \n const isAdult = age >= 19 ? "성인" : "미성년자"; \n | javascript \n let isAdult; \n if (age >= 19) { \n isAdult = "성인"; \n } else { \n isAdult = "미성년자"; \n } \n |
if 문 대신 논리 연산자($&&$ 또는 ∣∣)를 사용하여 함수 호출 등의 표현식 문을 조건부로 실행할 수 있어요.
| 표현식 문 대체 (Alternative) | 기존 if 문 |
| ` javascript \n // 조건이 참일 때만 함수 실행 \n isValid && doAction(); \n \n // 조건이 거짓일 때만 함수 실행 (NOT 연산자 이용) \n !isValid |
복잡한 계산이나 변수 스코프를 제한하고 싶을 때, 코드를 감싸서 하나의 표현식으로 만들어 바로 실행하고 그 결과를 반환받을 수 있어요.
const finalResult = (() => {
let temp = 0; // 이 변수는 바깥 스코프에 영향을 주지 않아요.
if (condition) {
temp = 10;
} else {
temp = 20;
}
return temp * 2; // 최종 결과를 반환
})();
console.log(finalResult); // 20 또는 40
