[JS] DeepDive(5) 표현식과 문

 

 

값

 

이전시간에 변수에 대해 설명하면서 값이란 용어가 많이 나왔다. 그렇다면 값에 대한 정확한 정의는 무엇일까?

 

값이란 식이 평가되어 생성된 결과를 의미한다.

 

평가 ? 

식을 해석해서 값을 생성하거나 참조하는 것

 

 

 

조금 쉽게 생각해보자.

 

10 + 20; //30

 

위 식이 진행되면 10+20이 아닌 그 결과인 30이 저장된다. 이게바로 값이다.

 

 

 

 

4장에서 모든 값은 메모리에 2진수 형태로 저장된다고 했다. 그렇다면 2진수를 숫자인지 문자인지 확인하는 방법이 필요하다. 값을 생성하는 방법중 가장 기본적인 방법인 리터럴에 대해 알아보자.

 

 

리터럴

사람이 이해할 수 있는 문자 또는 약속된 기호를 값을 생성하는 표기법

 

 

 

자바스크립트에는 위와 같은 리터럴이 존재한다. JS엔진은 런타임에 리터럴을 평가해 값을 생성한다. 

 

 

표현식

값으로 평가될 수 있는 문(statement)

 

표현식이 평가되면 새로운 값을 생성하거나 기본값을 참조할 수 있게 된다.

 

 

var score = 50 + 50;

위식을 보면 리터럴과 연산자로 구성되어 있음을 확인할 수 있다. 단 50+50은 100이란 숫자를 생성하으모 표현식으로 볼 수 있다.

 

이처럼 표현식은 리터럴,연산자,함수 호출 등등 값을 생성하지 않고 호출해도 만들어줄 수 있다. 

 

 

조금 더 쉽게 설명하자면 값으로 평가될 수 있는 모든 문이 표현식이다.

 

 

 

1 + 2 = 3

위 수식을 보면 1+2 와 3은 같다는 것을 확인할 수 있다.

 

조금 어려운 말로 1+2와 3은 동치관계에 있다고 생각할 수 있다.

 

 

따라서 표현식은 값처럼 사용할 수 있으며 값이 위치하는 자리에 표현식이 위치해도 문제가 없다는 것을 의미한다.

 

 

 

문(statement)

프로그램을 구성하는 기본 단위이자 최소실행 단위

 

 

프로그래밍을 조금 접해봤던 사람들이라면 if문 for문 등등 문 이라는 단어를 많이 들어봤을 것이다.

 

문은 여러 토큰으로 구성된다.

 

토큰?

문법적인 의미를 가지지만 문법적으로 더 이상 나눌 수 없는 기본 요소

 

 

자바스크립트에서는 문의 범위를 {...} 로 지정한다!

 

 

 

세미콜론

세미콜론(;) 은 문의 종료를 나타낸다.

 

JS엔진은 세미콜론을 활용해 문이 종료되는 위치를 확인한다. 단 0개이상의 문을 중괄호로 묶은 코드블럭 {...} 뒤에는 세미콜론을 붙이지 않는다.

 

 

JS는 타언어와 다르게 세미콜론을 생략 가능하다. JS엔진에 세미콜론의 끝이라 생각되는 곳에 세미콜론을 붙여주는 세미콜론 자동삽입기능(ASI)가 있기 때문이다.

 

 

다만 해당 기능은 종종 개발자의 의도와 다르게 동작하는 경우가 존재한다.

 

 

function foo () {
	return
    	{}
    //개발자의 의도 => return {};
    //실제 동작 => return; {};
}

 

 

세미콜론을 붙여야 한다는 주장이 다수를 차지하고 있고 ESLint나 TC39(ECMAScript 기술위원회)도 세미콜론을 권하는 분위기이므로 이왕이면 세미콜론을 붙여주자.

 

 

표현식과 표현식이 아닌 문

 

 

var x; //변수선언문은 값으로 평가될 수 없으므로 표현식이 아님


x = 1 + 2
//1,2,1+2,x = 1+2 모두 표현식이다.
//x = 1+2는 표현식이면서 문이다.

 

 

표현식과 문이 비슷한 부분이 존재하기 구별하기 어렵다 느낄 수 있다. 가장 확실한 방법은 변수에 할당해 보았을때 정상적으로동작되면 표현식이다.