프론트엔드/Javascript

문장 vs 표현식

묘나 2022. 1. 28. 03:45
728x90
반응형
SMALL

자바스크립트의 다양한 문법들을 이해할 때 알아두면 유용한 기초 개념을 한 번 짚고 넘어가고자 합니다.

바로, 문장과 표현식에 대한 개념인데요. 영어로는 각각 statements와 expressions라고 부릅니다.

문장 (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++;
}

그래서 다른 사람들이 작성한 코드를 볼 때도 이 세미콜론과 중괄호를 따라가 보면 좀 더 쉽게 표현식인 문장과 표현식이 아닌 문장을 구분할 수가 있습니다.

728x90
LIST