개발/자바스크립트

자바스크립트 개발자라면 알아야 할 33가지 개념 - 7. 표현식 vs 명령문

DOTBAAAM 2025. 6. 16. 21:31
반응형

표현식 vs 명령문(Expression vs Statement)

자바스크립트에는 두 가지 주요 구문 범주가 있습니다.

  • 표현식(Expression): 값을 생성합니다.
  • 명령문(Statement): 변수 할당, 제어 흐름 등 프로그램의 동작을 수행합니다.

표현식(Expression)

표현식은 값을 생성합니다. 표현식은 다른 표현식 안에 들어갈 수도 있고, 함수의 인자로도 사용될 수 있습니다.

1
"hello"
5 * 10
num > 100
isHappy ? "🙂" : "🙁"
[1, 2, 3].pop()

명령문(Statement)

자바스크립트는 일련의 명령문으로 구성됩니다. 각 명령문은 변수 할당이나 제어 흐름과 같은 동작을 수행합니다.

let hi = 5;

if (hi > 10) {
  // More statements here
}

throw new Error("Something exploded!");

표현식과 명령문을 구분하는 팁

자바스크립트 코드가 표현식(Expression)인지 명령문(Statement)인지 헷갈릴 때는 console.log()를 활용해 쉽게 구분할 수 있습니다.

console.log(/* 테스트할 코드 */);
  • console.log()가 오류 없이 실행됨: 표현식
  • 오류 발생: 명령문 또는 잘못된 코드

console.log()표현식명령문을 구분할 수 있는 이유는 함수의 인자(Argument)로 사용할 수 있는 것은 표현식뿐이기 때문입니다.

  • 표현식은 값을 생성하고 함수의 인자로 전달될 수 있습니다.
  • 반면, 명령문은 값을 생성하지 않기 때문에 함수의 인자로 사용할 수 없습니다.

표현식을 명령문으로 변환: 표현식 명령문(Expression Statements)

세미콜론을 줄 끝에 추가하면 표현식표현식 명령문으로 변환할 수 있습니다.

즉, 값을 생성하지만 그 값을 사용하지 않는 명령문입니다.

2 + 2 // 표현식

2 + 2; // 표현식 명령문

foo(2 + 2) // 2 + 2는 표현식이므로 함수의 인자로 전달될 수 있습니다.

foo(2 + 2;) // 2 + 2;는 표현식 명령문이므로 함수의 인자로 사용할 수 없습니다.
코드 설명
2 + 2 표현식(값 생성)
2 + 2; 표현식 명령문(값을 생성하지만 사용 안 함)
foo(2 + 2) 정상 – 함수 인자에 표현식 사용
foo(2 + 2;) 오류 – 함수 인자에 명령문 사용

참고

Statements Vs. Expressions
All you need to know about Javascript's Expressions, Statements and Expression Statements

반응형