자바스크립트 표현식과 문

값이 뭔지 아십니까!

뭔가 대충 뭔지 알긴하겠지만, 막상 말로 설명하려 하니 어렵다.

개념을 이해한다는 것은 바로 용어를 정확히 이해하고 설명할 수 있다는 것이다.

 

값

값은 식(표현식)이 평가되어 생성된 결과를 말한다.

평가란, 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다.

10 + 20; // 30
//10 + 20 은 평가되어 숫자 값 30을 생성한다

모든 값은 데이터 타입을 가지고 타입에 따라 다르게 해석될 수 있다.

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다.

따라서 변수에 할당 되는 것은 값이다.

var sum = 10 + 20; // 30
//변수에는 10+20 이 평가되어 생성된 숫자 값 30이 할당된다.

위 예제 sum 변수에 할당 된 것은 10+20이 아니고, 평가된 결과인 숫자 값 30이다.

즉 sum이 기억하는 메모리 공간에는 값 30이 저장된 것이다.

 

리터럴 ( literal )

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다.

3
// 숫자 리터럴 3

3은 단순한 아라비아 숫자가 아니라 숫자 리터럴이다.

사람이 이해할 수 있는 아라비아 숫자를 사용해 숫자 3을 코드에 기술하면 자바스크립트 엔진은 이를 평가해 숫자 값 3을 생성한다.

 

이처럼 리터럴은!!

사람이 이해할 수 있는 문자 또는 미리 약속된 기호로 표기한 코드이다.

자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다.

즉, 리터럴은 값을 생성하기 위해 미리 약속한 표기법일고 할 수있다.

 

리터럴 종류	예시
정수 리터럴	100
문자열 리터럴	'Hello' "world"
불리언 리터럴	true false
객체 리터럴	{name : kim, age :20}
배열 리터럴	[1, 2, 3]
함수 리터럴	function () {}
정규 표현식 리터럴	/[A-Z]+/g

 

 

표현식

표현식은 값으로 평가될 수 있는 문이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.

var score = 100;

100은 리터럴이다.

리터럴 100은 자바스크립트 엔진에 의해 평가되어 값을 생성하므로 리터럴 그 자체로 표현식이다.

var score = 50 + 50;

50 + 50 은 리터럴과 연산자로 이루어져 있다. 

하지만, 50 + 50 도 평가되어 숫자 값 100을 생성하므로 표현식이다.

score; // 100

변수 식별자를 참조하면 변수 값으로 평가된다.

식별자 참조는 값을 생성하지는 않지만 값으로 평가되므로 표현식이다.

 

표현식은 리터럴, 식별자(함수, 변수 등의 이름) , 연산자, 함수 호출 등의 조합으로 이루어질 수 있다.

즉, 값으로 평가될 수 있는 문은 모두 표현식이다.

//리터럴 표현식
10
'hello'

//식별자 표현식(선언이 이미 존재한다고 가정하에)
sum
person.name
arr[1]

//연산자 표현식
10 + 20 
sum = 10;
sum !== 10

//함수/ 메서드 호출 표현식(선언이 이미 존재한다고 가정)
square()
person.getName()

표현식은 값으로 평가된다.

이때 표현식과 표현식이 평가된 값은 즉 동등한 관계, 즉 동치다. 

 

 

 

문

앞으로 자바스크립트를 표현 할 때 '문' 과 '표현식' 이라는 용어가 자주 등장할 것이다.

자세히 살펴보자

 

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

문의 집합으로 이뤄진 것이 바로 프로그램이며, 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍이다.

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

'토큰'이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다.

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

키워드, 식별자, 연산자, 리터럴, 세미콜론이나 마침표 등의 특수기호는 문법적인 의미를 가지며, 

문법적으로 더 이상 나눌 수 없는 코드의 기본요소이므로 모두 토큰이다.

 

문을 명령문이라고도 부른다. 즉, 문은 컴퓨터에 내리는 명령이다. 

// 변수 선언문
var x;

// 할당문
x = 5;

//함수 선언문
function foo() {}

//조건문
if(x > 1){console.log(x);}

//반복문
for(var i=0; i<2; i++){consoel.log(i);}

 

 

세미콜론과 세미콜론 자동 삽입 기능

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

즉, 자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행한다.

물론 생략가능하지만, 자바스크립트 엔진이 소스코드를 해석할 때 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입기능(ASI)이 암묵적으로 수행되고 있따!

(나도 해봐야지 ES lint로 정적 분석 도구에서도 기본으로 설정되고 있다고하니, 해보면 좋을 듯 하다)

 

 

표현식인 문과 표현식이 아닌문

표현식은 문의 일부일 수도 있고 그 자체로 문이 될 수도 있다.

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

//1, 2, 1 + 2, x = 1 + 2는 모두 표현식이다.
//x = 1 + 2 는 표현식이면서 완전한 문이기도 하다.

x = 1 + 2;

구별하기 어렵다고 느낄 수 있다.

문에는 표현식인 문과 아닌 문이 있다.

 

표현식인 문은 값으로 평가 될 수 있는 문, 아닌 문은 값으로 평가 될 수 없는 문을 말한다.예를 들어, 변수 선언문은 값으로 평가될 수 없다. 따라서 표현문이 아닌 문 이고,                  할당문은 값으로 평가될 수 있다. 따라서 표현문인 것이다.

 

표현식 문과 아닌 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는 것이다.

var foo = var x; // SyntaxError : Unexpected token var

// 표현식이 아닌 문은 값처럼 사용할 수 없다.

위 예제의  변수 선언문은 표현식이 아닌 문이다.

var x;

//변수 선언문은 표현식이 아닌 문이다.

x = 100;
// 할당문은 그 자체가 표현식이지만 완전한 문이기도하다. 즉, 할당문은 표현식인 문이다.

표현식인 문은 값처럼 사용할 수 있다.

var foo= x = 100;
//표현식인 문은 값처럼 사용할 수 있다.

console.log(foo); //100

할당문을 값처럼 변수에 할당했다. 표현식인 문은 할당문은 할당한 값으로 평가된다.

 

 

 

추가적인 지식!

와.... 순간 변수 선언하고 나면, undefined는 기본으로 처음에 있는데, 이 값 자체도 값으로 하는데 선언하고서 왜 표현문이 아닌 문인가 생각이 들었는데 .. undefined는 완료값으로 표현식의 평가 결과가 아니라는 것에 놀랐다.

##완료 값 
크롬 개발자 도구에서 표현식이 아닌 문을 실행하면 언제나 undefined를 출력한다. 이를 완료 값이라고한다.
완료 값은 표현식의 평가 결과가 아니다.
따라서 다른 값과 같이 변수에 할당할 수 없고 참조할 수도 없다.