expression vs statement

이 토픽을 마치면

expression과 statement의 차이를 명확히 구분할 수 있고, "왜 여기서는 if문을 못 쓰지?"라는 의문을 스스로 해결할 수 있습니다.

프로그래밍의 두 가지 단위

코드를 쓸 때 가장 기본적인 구분이 있습니다:

expression (표현식): 값을 만들어내는 코드 조각
statement (문): 동작을 수행하는 코드 단위

이 구분을 알면 "왜 이 자리에 이 코드를 넣으면 에러가 나지?"라는 질문의 답을 알 수 있습니다.

expression — 값을 만든다

expression은 평가(evaluate)하면 하나의 값이 되는 코드입니다:

javascript

// 이것들은 전부 expression
5                    // 숫자 리터럴 → 5
"hello"              // 문자열 리터럴 → "hello"
2 + 3                // 산술 → 5
x > 10               // 비교 → true 또는 false
isValid ? "OK" : "X" // 삼항 → "OK" 또는 "X"
myFunc(42)           // 함수 호출 → 반환값

expression의 핵심 특징: 변수에 담을 수 있습니다.

javascript

const result = 2 + 3;              // ✅
const msg = isValid ? "OK" : "X";  // ✅
const val = myFunc(42);            // ✅

= 오른쪽에 올 수 있으면 expression입니다.

statement — 동작을 수행한다

statement는 프로그램이 무언가를 하게 만드는 명령 단위입니다:

javascript

// 이것들은 전부 statement
let x = 5;                         // 변수 선언
if (x > 3) { console.log("hi"); } // 조건문
for (let i = 0; i < 5; i++) {}    // 반복문
function greet() {}                // 함수 선언
return x;                          // 반환

statement는 값을 만들지 않습니다. 그래서 변수에 담을 수 없습니다:

javascript

const result = if (x > 3) { "yes" };  // ❌ SyntaxError!
const loop = for (let i = 0;;) {};    // ❌ SyntaxError!

왜 구분이 중요한가

JavaScript에는 **"expression만 넣을 수 있는 자리"**가 있습니다. 대표적인 예가 JSX의 중괄호입니다:

jsx

// React JSX
<p>{isAdmin ? "관리자" : "일반 사용자"}</p>   // ✅ 삼항은 expression
<p>{if (isAdmin) { "관리자" }}</p>             // ❌ if문은 statement

JSX의 {} 안에는 expression만 들어갈 수 있습니다. if문은 statement이므로 넣을 수 없습니다. 대신 삼항 연산자(? :)를 씁니다.

javascript

// 템플릿 리터럴에서도 마찬가지
const msg = `상태: ${count > 0 ? "있음" : "없음"}`;  // ✅
const msg = `상태: ${if (count > 0) "있음"}`;         // ❌

경계를 넘나드는 것들

어떤 코드는 expression이면서 statement처럼 쓸 수 있습니다:

javascript

// 함수 호출 — expression이지만 단독으로 statement처럼 사용 가능
console.log("hello");   // expression statement

// 대입 — expression이지만 statement처럼 사용
x = 5;                  // 대입 expression (값 = 5)

// 함수 선언 vs 함수 표현식
function add(a, b) { return a + b; }     // 함수 선언 (statement)
const add = function(a, b) { return a + b; };  // 함수 표현식 (expression)
const add = (a, b) => a + b;             // 화살표 함수 (expression)

function 키워드로 시작하면 statement(선언), 변수에 담으면 expression(표현식)입니다.

실무에서 흔히 쓰는 패턴

statement 대신 expression을 써야 하는 상황은 자주 옵니다:

javascript

// if/else 대신 삼항
const status = score >= 60 ? "합격" : "불합격";

// if/else 대신 논리 연산자
const name = user.name || "익명";
const display = isVisible && <Component />;

// switch 대신 객체 매핑
const messages = {
  success: "성공했습니다",
  error: "오류가 발생했습니다",
  loading: "로딩 중..."
};
const msg = messages[status] || "알 수 없는 상태";

즉시 실행 함수 표현식(IIFE)

함수를 정의하면서 즉시 실행하는 패턴입니다. 함수 선언을 괄호로 감싸면 표현식이 됩니다:

javascript

// 함수 선언문 — statement
function greet() { return "안녕"; }

// 즉시 실행 함수 표현식(IIFE) — expression
const result = (function() {
  return "안녕";
})();
console.log(result);  // "안녕"

IIFE는 변수 스코프를 격리할 때 사용합니다. ES6의 블록 스코프(let, const)가 등장하면서 사용 빈도는 줄었지만, 라이브러리 코드나 모듈 패턴에서 여전히 볼 수 있습니다.

화살표 함수와 expression

화살표 함수는 중괄호 없이 쓰면 expression을 자동으로 반환합니다:

javascript

// 중괄호 + return — 본문이 statement
const double = (x) => { return x * 2; };

// 중괄호 없음 — 본문이 expression (자동 return)
const double2 = (x) => x * 2;

// 객체 리터럴 반환 시 괄호 필요
const makeUser = (name) => ({ name, role: "user" });

배열 메서드 체이닝에서 이 차이가 실용적으로 드러납니다:

javascript

const prices = [100, 250, 50, 300];

// expression 본문 → 간결
const discounted = prices
  .filter(p => p > 100)
  .map(p => p * 0.9);

한 줄 판별법

질문	expression	statement
`const x = ___` 에 넣을 수 있나?	✅	❌
값을 만드나?	✅	❌
세미콜론 없이 다른 코드의 일부가 되나?	✅	❌

"이 코드가 값을 만드는가?" — 이 질문 하나로 구분됩니다. 값을 만들면 expression, 동작만 하면 statement.

다른 언어에서의 차이

언어마다 expression과 statement의 경계가 다릅니다:

python

# Python: if는 statement, 삼항은 expression
status = "합격" if score >= 60 else "불합격"  # expression
# if score >= 60: print("합격")              # statement

# Python: 할당은 statement (3.8+ walrus operator는 예외)
if (n := len(data)) > 10:  # := 는 expression으로 할당
    print(f"{n}개")

rust

// Rust: if는 expression (값을 반환)
let status = if score >= 60 { "합격" } else { "불합격" };

JavaScript는 if가 statement이고 삼항이 expression인 반면, Rust에서는 if 자체가 expression입니다. 새 언어를 배울 때 이 경계를 먼저 파악하면 문법이 빠르게 이해됩니다.

템플릿 리터럴과 expression

백틱(`)을 쓰는 템플릿 리터럴의 ${} 안에도 expression만 들어갑니다:

javascript

const name = "철수";
const age = 25;

// ✅ expression
const greeting = `안녕, ${name}! ${age >= 20 ? "성인" : "미성년자"}이시네요.`;

// ❌ statement는 넣을 수 없음
// `${if (age >= 20) { "성인" }}` — SyntaxError

expression statement — 양쪽 다인 것

expression이면서 동시에 statement인 코드도 있습니다:

javascript

// 함수 호출은 expression이면서 statement
console.log("hello");     // statement로 단독 사용
const x = console.log;    // expression으로 값(함수)을 반환

// 할당도 expression이면서 statement
let a;
a = 5;                    // statement로 단독 사용
const b = (a = 10);       // expression으로 할당된 값(10)을 반환

이 구분은 JavaScript뿐 아니라 대부분의 프로그래밍 언어에서 동일합니다. React, 템플릿 리터럴, 배열 메서드 등 "값이 필요한 자리"를 만날 때마다 이 개념이 등장합니다.