표현식Expressions & 문장Statements

표현식(Expressions)

1. 표현식은 값을 만들어 낸다. 얼마나 긴 표현식 이던지, 결국은 하나의 값으로 귀결된다는 것이다. 아래의 코드 모두 표현식이며, console.log로 확인해 보면 하나의 값이 반환된다. 따라서, 하나의 값을 예상하는 곳에서 쓰인다.

   2 + (2 * 3) / 2(Math.random() * (100 - 20)) + 20;
   functionCall();
   window.history ? useHistory() : noHistoryFallback();
   1 + 1, 2 + 2, 3 + 3;
   declaredVariable;
   true && functionCall();
   true && declaredVariable;
   

   
   

2. 표현식은 항상 상태를 바꾸지는 않는다. 예를들어,

   const assignedVariable = 2; //this is a statement, assignedVariable is state
   assignedVariable + 4; // expression
   assignedVariable * 10; // expression
   assignedVariable - 10; // expression
   console.log(assignedVariable); // 2
   

   여러가지 표현식들이 실행된 후에도 assignedVariable 값은 여전히 2로 바뀌지 않는다. 하지만, 함수 호출은 표현식이며, 함수는 값을 변화시키는 문장(statement)를 포함할 수 있다. 아래 함수는 표현식 이지만, 상태를 바꾸는 문장(assignedVariable = 14)을 포함하고 있어 함수를 호출하면 상태가 바뀌게 된다.

   const foo = foo () => {
   assignedVariable = 14
   }
   

   따라서 위의 함수 표현식과 문장을 더 나은 방법으로 재작성 한다면,

   const foo = foo () => {
   return 14 //explicit return for readability
   }
   assignedVariable = foo()
   

   혹은, 아래와 같이 작성할 수 있다. 아래의 코드가 더욱 가독성이 좋고, 구성하기 좋으며, 표현식과 문장이 확연하게 구분되는 방법이다.

   const foo = foo (n) => {
   return n//explicit return for readability
   }
   assignedVariable = foo(14)
   

STATEMENTS

반면에, 문장(statement)은 값이 예상되는 곳에서는 사용될 수 없으며, 무언가를 수행하는 역할을 한다. 따라서, 함수의 인자로도, 대입 연산의 값으로도,연산자의 피연산자로도 사용될 수 없으며, 반환값으로도 사용할 수 없다. 아래 리스트는 모두 자바스크립트에서의 문장(statement)이다.

아래 코드를 브라우저 콘솔에서 쳐보면, 18이 리턴된다.

if (true) {
  9 + 9;
}

하지만 이것을 표현식처럼 사용하거나 값이 예상되는 자리에서 쓸수는 없다. 위의 설명에 따라, 문장이 아무것도 반환하지 않을거라고 예상했기 때문에 이 결과는 이상하게 느껴질 것이고, 반환값을 이용할수 없으면 아무런 의미가 없기 때문에 더욱더 이상하게 느껴지겠지만, Well, that’s Javascript for you, weird.