자바스크립트의 두 가지 주요 구문

  1. Expression(식)
  2. Statement(문)

expression은 statement처럼 작동할 수 있지만 statement는 expression처럼 작동할 수 없기 때문에 두 가지를 구분하는 것은 중요하다.

1
2
const x = 5;
const y = getAnswer();

둘 다 value를 리턴하기 때문에 expression이다. (물론 5는 이미 5라는 값이라고 생각할 수 있지만 computer science에서는 5는 5로 값이 resolve 되었다고 본다.)

Expressions

  1. expression은 하나의 값을 생성한다.

    • expression은 단일 값을 생성하는 자바스크립트 스니펫(재사용 가능한 소스 코드)이다.
    • 원하는 만큼 길게 쓸 수 있지만 결과는 항상 단일 값이다.
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      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. expression이 반드시 상태를 변경할 필요 없다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const assignedVariable = 2; //this is a statement, assignedVariable is state

    assignedVariable + 4 // expression

    assignedVariable * 10 // expression

    assignedVariable - 10 // expression

    console.log(assignedVariable) // 2

    위 스니펫의 모든 expression에도 불구하고 assignedVariable의 값은 여전히 2이다. 따라서 이 섹션의 제목에서 ‘반드시 변경할 필요가 없다’라고 한 이유는 함수 호출이 expression이지만 함수가 상태를 변경하는 statement를 포함할 수 있기 때문이다.

    따라서 foo()라는 함수 자체는 undefined를 리턴하거나 다른 값을 리턴하는 expression인데 

    1
    2
    3
    const foo = foo() => {
        assignedVariable = 14
    }

    이렇게 쓰게 되면 호출이 expression이지만 호출로 인해 상태가 변경되었다. 따라서 foo함수와 statement를 더 보기 좋게 쓰는 방법은

    1
    2
    3
    4
    const foo = foo() => {
        return 14 // 가독성을 위한 명시적 리턴 
    }
    assignedVariable = foo()

    위에 보다 더 좋은 방법은

    1
    2
    3
    4
    const foo = foo(n) => {
        return n
    }
    assignedVariable = foo(14)

    이런 방법으로 코드를 더 읽기 쉽게 구성할 수 있고 expression과 statement를 명확하게 구분할 수 있다.

statements

자바스크립트에서는 값이 기대되는 곳에서는 statement를 사용할 수 없다. 따라서 함수의 인자, 연산자의 피연산자, 반환 값 등으로 사용할 수 없다. statement는 단지 액션을 실행하고 제어할 뿐이며 값을 생성하지 않는다.

  • 자바스크립트의 statement
    1. if
    2. if - else
    3. while
    4. do - while
    5. for
    6. switch
    7. for - in
    8. with (더 이상 사용되지 않는 statement)
    9. debugger
    10. variable declaration

밑의 스니펫을 브라우저의 콘솔에 적은 뒤 엔터를 눌러보자

1
if (true) {9+9}

18을 리턴하는 것을 볼 수 있는데, 그럼에도 불구하고 expression이나 Javascript가 값을 기대하는 곳에서는 사용할 수 없다. (expression이 기대되는 곳에 statement를 사용할 수 없다.)

1
let b = if(ture){9+9} // syntax error
  • expressions를 보는 것은 계산 과정을 이해하는 데에 도움이 된다.
    1
    12 + (square(7+5)) + square(square(2));
  1. ‘12’ resolves to ‘12’
  2. ‘7’ resolves to ‘7’
  3. ‘5’ resolves to ‘5’
  4. ‘7+5’ resolves to ‘12’
  5. ‘square 12’ resolves to ‘144’
  6. ‘12’ + ‘144’ resolves to ‘156’

— 1 차 계산 끝 —
자바스크립트에서는 12 + 144 + square(square(2))의 계산 과정 중이다.
단일 값을 반환 할 때까지 끝나지 않는다.
결국 12 + 144 + 16이 되고 +연산자는 왼쪽부터 실행되기 때문에 156+ 16이 되고 172라는 단일 값을 얻게 된다.