(15) Modern JavaScript - 문장과 표현식

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

그것은 문장(statements)과 표현식(expressions)이라고 부르며

모든 자바스크립트 코드는 모두 문장과 표현식으로 구성되어 있다.

---

문장 (statements)

자바스크립트에서의 문장은 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리를 가리킨다.

// 문장 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);
}

위 코드에서 첫 번째 줄 (let x;)은 x라는 변수를 선언하는 동작이 일어나는 하나의 문장이고 

두 번째 줄 (x = 3) 도 x에 3이라는 값을 할당하는 동작이 일어나는 하나의 문장이다.

if문도 하나의 문장이고 for문도 반복 동작을 하는 문장의 예시라고 볼 수 있는데

선언문, 할당문, 조건문, 반복문..등 이렇게 끝에 문이라고 끝나는 이유가 모두 동작을 수행하는 문장이기 때문이다.

---

표현식 (expressins)

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

이말은 즉슨

아래와 같이 어떤 하나의 값을 그대로 작성하는 것도 표현식이며

연산자를 이용한 연산식도 결국은 하나의 값이 되고

마지막줄에 선언된 변수를 호출하거나 객체의 프로퍼티에 접근하는 것도

모두 결국에는 하나의 값으로 평가 된다.

5;
("string");

console.log(`---------------------------------------`);

5 + 7; // 12
"Seop" + "E";
true && null; // null

console.log(`---------------------------------------`);

const title = "JavaScript";
const myName = {
  name: "SeopE",
};
const numbers = [1, 2, 3];
typeof myName; // object
title; // JavaScript
myName.name; // SeopE
numbers[3]; // undefined

그래서 길이와는 상관없이 결과적으로 하나의 값이 되는 코드를 표현식 이라고 할 수 있다.

---

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

표현식은 보통 문장의 일부로 쓰이지만 그 자체로 문자일 수도 있다.

가장 대표적인 예시가 할당식과 함수 호출이다.

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

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

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

사실 할당연산자 자체가 할당한 값을 그대로 리턴하는 특징이 있기 때문에

연산 자체로 값이 되는 표현식이기도 하다.

그런데 할당식은 왼쪽에 있는 피연산자에 오른쪽 피연산자 값을 할당하는 동작을  하기 때문에

문장이 되기도 한다.

 

그리고 함수 호출도 함수를 호출한 자리가

결국에는 하나의 리턴하는 값을 가지기 때문에 표현식이라고도 할 수 있지만

함수 내부에 정의한 코드를 실행하는 동작이기 때문에 문장이 되기도 한다.

---

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

결과적으로 문장은 표현식인 문장과 표현식이 아닌 문장으로 나눌 수 있으며

이 둘을 구분하는 방법은

구분하고자하는 문장을 변수에 할당하거나

어떤 함수의 아규먼트로 전달해보는 것이다.

let y;
y = 3;

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

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

console.log 메소드의 아규먼트를 if문으로 전달하거나

someloop 변수에 for 반복문을 할당하게 되면 에러가 발생하는데

이 뜻은 조건문이나 반복문은 값으로 평가되지 않고

오로지 문장으로만 평가된다는 의미이다.

---

참고로 자바스크립트에서 특별한 경우를 제외하면

일반적으로 표현식인 문장은 세미콜론으로,

표현식이 아닌 문장은 문장 자체의 코드 블록(중괄호)으로 그 문장의 범위가 구분되며

그 예시는 다음과 같다.

(3 + 4) * 2;
console.log("hi");

while (ture) {
  x++;
}

이런식으로 세미콜론과 중괄호를 따라가보면 

좀 더 쉽게 표현식인 문장과 표현식이 아닌 문장을 구분할 수 있다.