JavaScript의 표현식과 문: 알아두면 유용한 차이점

JavaScript를 공부하다 보면 "표현식"과 "문"이라는 용어를 접하게 됩니다. 처음엔 이 두 가지가 비슷해 보여 헷갈리기 쉬운데요, 사실 둘은 중요한 차이점이 있습니다. 이 차이를 이해하면 코드의 구조를 더 잘 파악할 수 있고, 더 나은 코드를 작성하는 데 도움이 됩니다.

 

그럼, JavaScript의 표현식과 문이 무엇인지, 그리고 이 둘을 어떻게 구분할 수 있는지 쉽게 알아볼까요?

 

1. 표현식(Expression)이란?

먼저, 표현식에 대해 이야기해보죠. 표현식은 간단히 말해 하나의 값으로 평가될 수 있는 코드 조각을 말합니다. 예를 들어, 숫자 5, 문자열 "hello", 그리고 2 + 3 같은 코드들은 모두 표현식입니다. 왜냐하면 이들은 각각 5, "hello", 5라는 값을 생성하기 때문입니다.

let x = 5 + 10; // 5 + 10은 표현식입니다. 결과는 15입니다.

↑ 위 예제에서 5 + 10은 하나의 표현식입니다. 이 표현식은 15라는 값으로 평가되죠. 표현식은 그 자체로 하나의 값이기 때문에 다른 표현식의 일부로 사용될 수도 있습니다.

 

예를 들어, 다음과 같은 코드도 표현식입니다.

let y = x * 2; // x * 2는 표현식입니다.

↑ 여기서 x * 2도 표현식인데, x가 15이므로 이 표현식은 30이라는 값으로 평가됩니다.

 

※ 표현식의 종류

표현식에는 여러 종류가 있습니다. 가장 기본적인 것은 리터럴 표현식입니다. 리터럴은 그 자체로 값인 표현식인데, 예를 들어 10, "JavaScript", true 같은 것들이 리터럴 표현식입니다.

또한, 연산자 표현식도 있는데, 이는 두 개 이상의 값을 결합하여 새로운 값을 만드는 표현식입니다. 예를 들어, 2 + 3, x * y 같은 코드가 이에 해당하죠.

그 외에도 함수 호출 표현식이 있습니다. 예를 들어 alert('Hello!')는 alert 함수를 호출하는 표현식입니다. 이 표현식도 하나의 값으로 평가되는데, 여기서는 undefined가 됩니다. 왜냐하면 alert 함수는 아무런 값을 반환하지 않기 때문입니다.

 

표현식의 종류에 대해서는 좀 더 다양한 내용이 있어서 다른 포스팅에서 더 자세히 알아보도록 하겠습니다.

 

2. 문(Statement)이란?

이제 문에 대해 알아볼 차례입니다. 문은 컴퓨터에게 특정 작업을 수행하도록 지시하는 코드 조각입니다. 쉽게 말해, 문은 프로그램이 어떤 동작을 하게 만드는 명령어입니다.

let name = "John"; // 이 전체가 문입니다.

위 코드에서 let name = "John";은 하나의 문입니다. 이 문은 변수를 선언하고 초기화하라는 명령을 내리죠. 문은 끝에 세미콜론(;)을 붙여 구분하는 경우가 많습니다.

 

※ 문의 종류

1) 선언문(Declaration Statement)

→ 변수를 선언하는 문입니다.

let age = 25;

 

2) 조건문(Conditional Statement)

→ 특정 조건에 따라 다른 코드를 실행하는 문입니다.

if (age > 18) {
    console.log("성인입니다.");
}

 

3) 반복문(Loop Statement)

→ 특정 코드를 여러 번 실행하는 문입니다.

for (let i = 0; i < 5; i++) {
    console.log(i);
}

 

4) 함수 선언문(Function Declaration Statement)

→ 함수를 정의하는 문입니다.

function greet() {
    console.log("Hello, World!");
}

 

각각의 문의 특징과 종류, 활용하는 방법에 대한 것은 다른 포스팅에서 자세히 다루어보겠습니다.

 

3. 표현식과 문의 차이는?

문과 표현식의 가장 큰 차이는 결과로 값이 나오느냐입니다. 표현식은 항상 하나의 값으로 평가되지만, 문은 그렇지 않습니다. 문은 특정 동작을 수행하기 위한 명령이므로, 실행된다고 해서 값이 나오지 않습니다.

 

예를 들어 let z = 10;은 문입니다. 이 문은 변수를 선언하고 10이라는 값을 할당하지만, 이 문 자체가 어떤 값으로 평가되지는 않습니다. 반면, 10 + 20은 표현식이므로, 이 코드가 실행되면 30이라는 값이 나옵니다.

 

이 차이는 코드의 구조를 이해하는 데 매우 중요합니다. 특히 JavaScript에서는 표현식이 문으로 사용될 수 있지만, 문이 표현식으로 사용될 수는 없다는 점을 기억해야 합니다. 이를테면, 다음 코드처럼 표현식을 문으로 사용할 수 있습니다.

let result = 10 + 20; // 10 + 20은 표현식이지만, 전체는 문입니다.

그러나 문을 표현식으로 사용할 수는 없습니다. 예를 들어 let x = let y = 5;는 문법 오류를 일으킵니다. 왜냐하면 let y = 5는 문이기 때문에 값으로 평가될 수 없기 때문입니다.

 

4. 표현식과 문의 활용

JavaScript에서 문과 표현식의 개념을 명확히 구분하면 코드를 더 깔끔하게 작성할 수 있습니다. 특히 React 같은 라이브러리에서는 표현식만 사용해야 하는 상황이 많습니다. 예를 들어 JSX에서는 if문을 사용할 수 없고, 대신 삼항 연산자 같은 표현식을 사용해야 합니다.

const isLoggedIn = true;
const message = isLoggedIn ? "Welcome back!" : "Please sign in.";

위 예제에서 isLoggedIn ? "Welcome back!" : "Please sign in."은 삼항 연산자 표현식입니다. 이 표현식은 isLoggedIn의 값에 따라 다른 문자열을 반환하죠.

---

 

표현식과 문은 JavaScript에서 매우 중요한 개념입니다. 표현식은 하나의 값으로 평가되는 코드 조각이고, 문은 특정 작업을 수행하는 명령어입니다. 이 둘의 차이를 명확히 이해하면, 더 나은 코드를 작성할 수 있을 뿐만 아니라, JavaScript 코드의 흐름을 더 잘 이해할 수 있습니다.

표현식과 문을 구분하는 능력은 초보 개발자부터 숙련된 개발자까지 모두에게 중요한 스킬입니다.

이 글을 통해 이 두 개념이 어떻게 다른지 이해하고, 실무에 적용해 보세요!