Expression(표현식) vs Statement(문장)

Expressions(표현식) : 값을 생성하는 JavaScript 코드

아래의 코드는 모두 표현식(화살표 오른쪽은 코드가 생성하는 값)

• 1 -> 1
• "hello" -> "hello"
• 5 * 10 -> 50
• num > 100 -> true or false
• isHappy ? "🙂" : "🙁" -> emoji 둘 중 하나
• [1, 2, 3].pop() -> 3
  * arr.pop()은 배열에서 마지막 요소를 제거하고 그 요소를 반환

+) 표현식은 다른 표현식을 포함할 수 있음

Statement(문장) : 특정한 동작을 하도록 지시하는 명령

아래의 코드는 모두 문장

let hi = 5;
// 변수 선언 및 할당

if (hi > 10) {
// asdf
}
// if문

throw new Error('Sth exploaded!');

📌 Statements(문장)은 expression(표현식)을 위한 공간을 갖고 있을 때가 있다.

let hi = /* expressions */;

• expressions 자리에는 위에서 봤던 예시들이 다 들어갈 수 있음.

---

✍ 어떤 JS 코드가 expression인지 statement인지 확인하고 싶을 때는?
=> console.log()로 출력해보자!

console.log(/* some codes */);

• 제대로 동작하면 expression, 에러가 나타나면 statement. (혹은 invalid JS)

📌 모든 함수의 인자는 표현식이다. 문장은 값을 생성하지 않기 때문에 함수의 인자로 사용될 수 없다.
(All function arguments must be expressions. Statements don't produce a value, and so they can't be used as function arguments.)

---

📌 Expression은 언제나 statement의 한 부분이다. Statement는 본질적으로 Expression을 제외하면 비어있는 것이다.

아래의 문장 모두 표현식 공간이 채워져야 완성됨

let hi = /* expression slot */;

return /* expression slot */;

if (/* expression slot */) { }

*if문, while 반복문, 함수 선언문 등 특정한 statement를 제외한 Statement의 끝에는 세미콜론이 필요함.

---

React로 작업할 때 { }를 이용하면 JSX에서 JS 코드를 넣는게 가능하다.

function CountdownClock({ secondsRemaining }) {
  return (
    <div>
      Time left:
      {Math.round(secondsRemaining / 60)} minutes!
    </div>
  );
}

이 { }는 안에는 오직 값을 생성하는 표현식만 넣을 수 있음!
=> 📌 만일 if/else 로직을 JSX에서 사용하고 싶을 때는 삼항연산자(ternary operator) 표현식을 사용해야 함

function CountdownClock({ secondsRemaining }) {
  return (
    <div>
      {secondsRemaining > 0
        ? `${secondsRemaining} seconds left`
        : "Time expired!"
      }
    </div>
  );
}

---

나에게 제일 필요했던 부분은 마지막 Practical implications in React 부분이었다.. 이 문서를 조금이라도 이해할 수 있다니!

출처 : https://www.joshwcomeau.com/javascript/statements-vs-expressions/#practical-implications-in-react