[JS분기다루기]값식문

Bonggus·2021년 10월 29일

자바스크립트

목록 보기

16/23

문법

문법은 중요한가? 중요하다면 왜 그럴까? 프로그래머는 프로그래밍 언어를 사용하는 사람이다.프로그래머는 언어를 통해 컴퓨터를 이해시켜야 한다. 문법에 에러가 있다면 컴퓨터를 프로그래머가 요청한 명령을 처리하지 못한다.

그치만 문법을 지킨다는 것은 쉽지 않다. 특히 문법이 파괴되기 쉬운 부분은 값식문이다

값식문

1. 값 value

값은 조작할 수 있는 어떠한 표현을 의미한다. 값은 문자열, 문자, 숫자 처럼 어던 데이터 형식도 가질 수 있다.

Value => Left-value / Right-value로 나누어 생각할 수 있는데, =을 기준으로 나뉜다고 생각하면 된다. Left-Value는 메모리 주소를 가지고있어 식별자를 통해 프로그래밍으로 컨트롤 가능하다. Right-Value는 단일 표현식에서만 사용되는 임시값이다.

2. 식 expression

식(표현식)은 값을 결정짓기 위해 평가될 수 있는 구문이다. 식은 상수, 변수, 함수,연산자들의 조합으로 이루어진다. 식을 통해 또 다른 값을 생성해내는데, 이러한 연산과정을 평가라고 한다.

3 + 2 // 5로 평가되는 연산식
4 === 4 // false로 평가되는 관계식

3. 문 statement

문은 수행할 액션의 구문 단위이다. 데이터에 어떤 액션을 취할 것인지 결정한다. 프로그래밍은 문의 연속이라 할 수 있다. 문은 식을 내부요소로 가질 수 있다. 문은 실행시 사이드이펙트를 발생시킨다.

const a = 1; // 선언'문'
b = a + 2; // 할당'문'

play(car); // 함수호출
return; //리턴 호출

for ~ // for(반복) 문
if // if(조건) 문

예시

특히 React를 사용할 때 문법적 오류가 많이 발생한다. 아래는 React를 사용해봤다면, 한번쯤은 보게되는 기본적인 코드이다.

// JSX
ReactDOM.render(
  <div id="msg">Hello Wrold</div>,
  mountNode
);

// transfiling to JS
ReactDOM.render(
  React.createElement('div', { id : 'msg' }, 'Hello World'), mountNode)
);

ERROR

// JSX
ReactDOM.render(
  <div id={if (condition) { 'msg' }}>Hello Wrold</div>,
  mountNode
);

// transfiling to JS
ReactDOM.render(
  React.createElement('div', { id : if (condition) { 'msg' } }, 'Hello World'), mountNode)
);