티스토리 뷰
https://www.notion.so/simsimjae/expression-vs-statement-dc4e667043ac4b2fb6e682548cb4ac80
const x = 5; const y = getAnswer();
위의 두 코드라인은 컴퓨터과학에서는 상황에 따라 유사한 코드일수도 아닐수도 있다.
실제로 어떤일이 일어나는지에 대해서 생각하면 두 라인은 전혀 유사하지않다.
하나는, 값을 할당하는것이고 또하나는 외부 함수를 호출하는것이다.
다른 관점에서 생각해보자.
뛰는것과 비행기를 타는것은 매우 다른 행위이지만 특정 레벨에서 보면 이 두개는 비슷한 행위이다.
둘다 이곳에서 저곳까지 가는 행위이다.
위의 두 코드도 어떤 레벨에서 보면 유사한코드이다. 값을 할당하고 있기 때문이다.
expression은 value로 귀결되는 코드 조각이다.
const x = 5;
나는'5'가 이미 값이라는것을 알고 있다. 근데 인터프리터의 입장에서 5는 expression이다. 그리고 이 expression이 value가 된다.
또 다른 expression은 2+3이있다. 2+3과 5는 같은 value로 귀결되는 expression이다.
getAnswer();이라는 함수는 value로 귀결되기 때문에 expression이다.
함수 호출의 결과가 값이 되었기 떄문에 getAnswer();라는 문장은 statement가 아니라 expression이다.
자바스크립트는 expression과 statement를 다르게 취급한다.
statement는 어떤 액션이다.
if, while, for등은 어떤 액션만 취하지 값으로 귀결되지 않기 때문에 statement이다.
너무 교과서적인 얘기만 하는것같은데, 실제로 statement와 expression의 차이를 아는것은 중요하다.
expression을 잘 이해하는것은 식이 어떻게 계산되는지를 이해하는데 도움이 된다.
- 위 코드는 3개의 expression과 subexpression들로 구성되어 있다.
- 12라는 expression은 12라는 value로 귀결된다.
- square(7+5)에서 7+5라는 expression은 12라는 value로 귀결된다.
- square(12)라는 expression은 144라는 value로 귀결된다.
최종적으로 자바스크립트는 모니터에서 보이는 코드를 보게 된다.
표현식은 최종적으로 하나의 값이 될때까지 계속 계산된다.
12 + 144 + 16
→ 156 + 16 → 172라는 값이 될때까지 계속 계산된다.
(계산의 방향은 왼쪽에서 오른쪽이다.)
expression을 넣어야하는곳에 statement를 넣을수없다.
console.log(const x); let b = if ( x > 10 ) { return 100; }
위의 두가지 케이스는 에러를 배출한다. 왜냐면, expression이 기대되는곳에 statement를 넣었기 때문이다.
이 두개의 차이를 정확히 이해하고있으면 다음과 같은 슈퍼파워가 생긴다.
- 수백만줄의 코드가 있더라도 코드의 큰그림을 볼 수 있게 된다. → 어떤 함수가 expression임을 알게 되면 그것이 하나의 value로 귀결된다는걸 알기 때문에 추상화 하여 코드를 볼 수 있다.
- 왜 해당 부분에서 코드가 실행되지 않는지를 expression과 statement의 관점에서 이해할수있게된다.
'Javascript' 카테고리의 다른 글
#8 IIFE(즉시호출함수표현식) (2) | 2019.07.29 |
---|---|
#7 문장 vs 표현식 (3) | 2019.07.29 |
#6 함수와 블록스코프 (1) | 2019.07.29 |
#5 ==와 ===의 차이 (1) | 2019.07.29 |
#4 암묵적 타입 변환 (0) | 2019.07.29 |
- Total
- Today
- Yesterday
- mobx
- atomic design
- design system
- react hooks
- hydrate
- javascript
- reactdom
- return type
- reducer
- webpack
- useRef
- Action
- rendering scope
- Next.js
- props
- Babel
- async
- server side rendering
- promise
- state
- reflow
- react
- es6
- type alias
- await
- Polyfill
- computed
- useEffect
- typescript
- storybook
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |