Javascript 표현식과 명령문

Javascript의 명령문(statement) 표현식(expression)에 대해 알아보자. 이 둘은 구분하는 건 중요하다. 특히, React JSX에서.

표현식(expression)

표현식(expression)은 값을 생성해준다.

예시

• 100 → 100 값 생성
• "summer" → "summer" 값 생성
• 100 - 5 → 95 값 생성
• count > 10 → true 혹은 false 값 생성
• isAdult? "Adult" : "Child" → "Adult" 혹은 "Child" 라는 값
• [1, 2, 3].pop() → 3 값 생성

+표현식은 여러 표현식의 조합으로 이루어질 수도 있다.

10 * 2 + 5 - 3

명령문(Statement)

명령문은 컴퓨터가 특정 작업을 하도록 지시하는 명령어이다.

예시

let name = "dugi";

if (count > 10) {
}

대게의 명령문들은 세미콜론 ; 으로 끝난다. 하지만 if문, while문, for문 같은 명령문에서는 세미콜론 ; 이 붙지 않기도 한다.

명령문-표현식 관계

명령문과 표현식의 관계는 이렇게 생각하면 좋다. 표현식이 명령문 안에서 사용될 수 있다.

let ok = "dugi"

위 전체 덩어리는 명령문이지만, 안의 "dugi" 는 표현식이다.

명령문, 표현식 구분하기

console.log() 를 활용하면 간단하게 명령문과 표현식을 구분할 수 있다. console.log() 의 인수로 사용할 수 있다면 표현식이고, 아니라면 명령문이다.

console.log(true? "ok" : "") 
//실행됨 -> 표현식

console.log(if(true){return "ok"}); 
//실행 안됨 -> 명령문
//return 

함수의 인수는 값이 전달되어야 한다. console.log() 안에 전달되는 인수가 값(표현식)이라면 실행되고 명령문이라면 값이 아니기 때문에 실행되지 않는다.

정리

• 표현식 : 값을 생성한다. 이 값은 변수에 할당하거나, 함수에 전달될 수 있다.
• 명령문 : 변순 선언, 반복문 실행 같은 작업을 수행하기 위한 명령어다.

React - 명령문, 표현식

React로 작업할 때 JSX에 표현식을 넣을 수는 있지만 명령문을 넣는 것은 허용되지 않는다. 그래서 이 둘의 차이점을 잘 이해하고 있어야한다.

const isTrue = true;

//이 코드는 가능하지만
const jsxElement = (
	<div>
		{isTrue? <p>True</p> : <p>False</p>
	</div>
)

//이 코드는 안된다.
const jsxElement = (
	<div>
		{if(isTrue) { <p>True</p> }}
	</div>
)

javascript 삼항 연산자(Ternary Operator)는 표현식이지만, if문은 명령문이어서 그렇다.

if문 대신에 표현식인 && 을 활용하면 된다.

const jsxElement = (
	<div>
    {isTrue && <p>True</p>}
	</div>
)

정말 if문을 쓰고 싶으면.. 함수를 실행해서 값을 생성하는 거대한 표현식으로 만들수도 있기는 하다. (하지만 이렇게 쓰지는 말자)

const jsxElement = (
	<div>
    {(() => {
      if (true) {
        return <h1>hello</h1>;
      }
    })()}
	</div>
);