문장과 표현식

문장 (statements)

자바스크립트 코드는 모두 문장과 표현식으로 구성되어 있다.
자바스크립트에서 문장은 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리를 가르킨다.

let x; 
x = 3;

if (x < 5) {
  console.log('x는 5보다 작다');
} else {
  console.log('x는 5와 같거나 크다');
}

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

위 코드의 첫 번째 줄도 x라는 변수를 선언하는 동작이 일어나는 하나의 문장이고, 두 번째 줄도 x에 3이라는 값을 할당하는 동작이 일어나는 하나의 문장입니다. 그리고 4번줄 부터 8번줄 까지도 하나의 문장이고 그리고 10번줄 부터 12번줄 까지도 반복 동작을 하는 문장의 예시이다. 선언문, 할당문, 조건문, 반복문 .. 이렇게 끝에 문이라고 붙은 이유가 모두 동작을 수행하는 문장이기 때문이다.

표현식 (expressions)

표현식은 결과적으로 하나의 값이 되는 모든 코드를 가르킨다.

5 // 5

'string' // string

어떤 하나의 값을 그대로 작성한 것도 표현식

5 + 7 // 12

'I' + ' Love ' + 'Codeit' // I Love Codeit

true && null // null

연산자를 이용한 연산식도 하나의 값이기 때문에 이것도 표현식

const title = 'JavaScript';
const codeit = {
  name: 'Codeit'
};
const numbers = [1, 2, 3];

typeof codeit // object
title // JavaScript
codeit.name // Codeit
numbers[3] // undefined

위 코드의 마지막 네 줄처럼 선언된 변수를 호출하거나, 객체의 프로퍼티에 접근하는 것도 하나의 값으로 평가된다. 이렇게 길이와 상관없이 결과적으로 하나의 값이 되면 그 코드는 모두 표현식이라 할 수 있다.

표현식이면서 문장, 문장이면서 표현식

표현식은 보통 문장의 일부로 쓰이지만, 그 자체로 문장일 수도 있다. 대표적 예시는 할당식과 함수 호출이다.

// 할당 연산자는 값을 할당하는 동작도 하지만, 할당한 값을 그대로 가지는 표현식이다.
title = 'JavaScript'; // JavaScript

// 함수 호출은 함수를 실행하는 동작도 하지만, 실행한 함수의 리턴 값을 가지는 표현식이다.
sayHi(); // sayHi 함수의 리턴 값

// console.log 메소드는 콘솔에 아규먼트를 출력하는 동작도 하지만, undefined 값을 가지는 표현식이다.
console.log('hi'); // undefined

사실은 할당연산자 자체가 할당한 값을 그대로 리턴하는 특징이 있기 때문에 연산 자체로 값이 되는 표현식이기도 합니다. 그런데 할당식은 왼쪽에 있는 피연산자에 오른쪽 피연산자 값을 할당하는 동작을 하기 때문에, 문장이 되기도 하죠?
그리고 함수 호출도 함수를 호출한 자리가 결국에는 하나의 리턴하는 값을 가지기 때문에 표현식이라고 할 수도 있지만 함수 내부에 정의한 코드를 실행하는 동작이기 때문에 문장이 되기도 하는 것이죠.

표현식인 문장 vs 표현식이 아닌 문장

결과적으로 문장은 표현식인 문장과 표현식이 아닌 문장으로 나눠진다. 이 둘을 구분하는 가장 간단한 방법은 우리가 구분하고자 하는 문장을 변수에 할당하거나, 어떤 함수의 아규먼트로 전달해보는 것이다.

let x; 
x = 3;

console.log(if (x < 5) {
  console.log('x는 5보다 작다');
} else {
  console.log('x는 5보다 크다');
});

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

console.log 메소드의 아규먼트로 if문을 전달하거나 someloop라는 변수에 for 반복문을 할당하면, Error가 발생한다.
조건문이나 반복문은 값으로 평가되지 않고 오로지 문장으로만 평가되기 때문이다.

마무리

자바스크립트의 문법의 깊은 이해와 능숙함을 위해 문장과 표현식의 개념을 명확하게 하는게 중요하다.
참고로 특별한 경우를 제외하면 일반적으로 표현식인 문장은 세미콜론으로, 표현식이 아닌 문장은 자체의 코드 블록으로 그 문장의 범위가 구분된다.

(3 + 4) * 2;
console.log('Hi!');

while(true) {
  x++;
}