05장 표현식과 문

5.1 값

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

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

// [예제 05-01]
// 10 + 20 은 평가되어 숫자 값 30을 생성한다.
10 + 20; // 30

변수와 값의 관계

변수: 저장된 메모리를 위한 참조 주소. (값이 아니다.)

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

값은 어떻게 변수에 할당될까?

5.2 리터럴(literal)

리터럴: 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법(notation)

표기된 리터럴을 자바스크립트 엔진이 평가하여 값을 생성한다.

// [예제 05-03]
// 숫자 리터럴 3
3

위 예제에 3은 단순한 숫자가 아닌 숫자 리터럴이다. 사람이 숫자 3을 입력하면 자바스크립트 엔진이 이를 평가하여 숫자 값 3을 생성한다.

리터럴의 다양한 종류

리터럴	예시	비고
정수 리터럴	100
부동 소수점 리터럴	10.5
2진수 리터럴	0b01000001	0b로 시작
8진수 리터럴	0o101	ES6에서 도입. 0o로 시작
16진수 리터럴	0x41	ES6에서 도입. 0x로 시작
문자열 리터럴	‘Hello’, ”world”
불리언 리터럴	true, false
null 리터럴	null
undefined 리터럴	undefined
객체 리터럴	{name : ‘Lee’, address: ‘Seoul’}
배열 리터럴	[1, 2, 3]
함수 리터럴	function( ){ }
정규 표현식 리터럴	/[A-Z]+/g

5.3 표현식(expression)

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

// [예제 05-04]
var score = 100;

위 예제에서 100은 리터럴이다. 자바스크립트 엔진에 의해 평가되어 값을 생성한다.

// [예제 05-05]
var score = 50 + 50;

위 예제에서 50 + 50은 숫자 리터럴과 연산자로 구성되어 있다. 50 + 50도 평가되어 숫자 100을 생성하므로 표현식이다.

// [예제 05-06]
score; // => 100

변수 식별자를 참조하면 변수 값으로 평가된다. 식별자 참조는 값을 생성하지는 않지만 값으로 평가된다.

// [예제 05-07]
10
'Hello'

// 식별자 표현식(선언이 이미 존재한다고 가정)
sum
persom.name
arr[1]
// 식별자를 통해 변수 값을 알 수 있다.

// 연산자 표현식
10 + 20
sum = 10
sum !== 10
// 연산자를 통해 값을 만들어 낼 수 있다.

// 함수/메소드 호출 표현식(선언이 이미 존재한다고 가정)
square()
person.getName()
// 함수/메소드의 return값, result를 통해 결과 값을 만들어 낼 수 있다.

이처럼 표현식을 통해 값을 만들어 낼 수 있다. 따라서 표현식은 값으로 간주될 수 있다.

동치란?

1 + 2 = 3

1 + 2는 3이다. 3은 숫자 3을 의미한다. 둘은 같다고 할 수 있다. 즉 자바스크립트의 표현식 1+2는 평가되어 값 3을 생성하므로 표현식 1 + 2와 3은 동치이다.

따라서 표현식은 자바스크립트에서 값처럼 사용 할 수 있다.

// [예제 05-08]
var x = 1 + 2;

// 1 + 2 라는 표현식은 3이라는 값을 생성한다.

// 식별자 표현식 x는 3으로 평가된다.
x + 3; // => 6

5.4 문

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

문은 토큰(token)으로 구성이 된다. 토큰은 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다.

ex ) 선언문, 할당문, 조건문, 반복문 ..

// [예제 05-09]
// 변수 선언문
var x;
// 변수가 선언이 된다.

// 할당문
x = 5;
// 변수에 값이 할당된다.

// 함수 선언문
function foo () {}
// 함수가 선언이 됩니다.

// 조건문
if (x > 1) { console.log(x); }
// 지정된 조건에 따라 실행할 코드가 결정된다.

// 반복문
for (var i = 0; i < 2; i++) { console.log(i); }
// 특정 코드가 반복되어 실행이 됩니다.

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

세미콜론의 의미 : 문의 종료를 나타낸다.

자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행한다. 따라서 문을 끝낼 때는 세미콜론을 붙여야 한다.

무조건 붙여야 하나요?

아니다. 0개 이상의 문을 중괄호로 묶은 코드블록 {} 과 같은 if문, for문, 함수등의 코드 블록 뒤에는 세미콜론을 붙이지 않는다. 자체 종결성(self closing)을 갖기 때문이다.

사실.. 문의 끝에 붙이는 세미콜론은 옵션이다. 즉, 세미콜론은 생략이 가능하다. 이는 자바스크립트 엔진이 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙이는 세미콜론 자동 삽입 기능(ASI automatic semicolon insertion)이 암묵적으로 수행되기 때문이다.

그러나 자동 삽입이 의도와 다르게 동작하는 경우도 있다.

function foo(){
	return
	{}
// ASI의 동작결과 return; {};
// 개발자의 예측 return {};
}

console.log(foo()); // => undefined

var bar = function(){}
(function() {})();
// ASI의 동작 결과 => var bar = function(){}(function(){})();
// 개발자의 예측 => var bar = function(){}; (function(){})();
// TypeError: (intermediate value)(...) in not a function

세미콜론을 붙이지 말자는 의견도 있지만. 붙이는 것을 추천한다.

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

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

// [예제 05-11]
// 변수 선언문은 값으로 평가될 수 없으므로 표현식이 아니다.
var x;

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

x = 1 + 2;

표현식인 문은 값으로 평가될 수 있는 문이며, 표현식이 아닌 문은 값으로 평가될 수 없는 문을 말한다.

// [예제 05-12]
var boo; // 변수 선언문
// boo가 어떤 값인지 알 수 없다. 이는 값으로 평가될 수 없으므로 표현식이 아닌 문이다.

boo = 10; // 할당문
// boo는 10인걸 알 수 있다. 이는 표현식인 문이다.

위 예제처럼 변수 선언문은 값으로 평가될 수 없다. 따라서 변수 선언문은 값이 못된다.

// [예제 05-13]
// 표현식이 아닌 문은 값처럼 사용할 수 없다.
var foo = var x; // SyntaxError : Unexpected token var

// [예제 05-14]
// 표현식인 문은 값처럼 사용할 수 있다.
var foo = x = 100;
console.log(foo); // 100

5.7 완료 값

크롬 개발자 도구에서 표현식이 아닌 문을 실행하면 undefined를 출력한다. 이를 완료 값(completion value)이라고 한다. 이는 표현식의 평가 결과가 아니라, 실행이 완료되었음을 알려주는 값이다. 참고만하자.

표현식이 아닌 문을 실행 하였을 때 결과

표현식을 실행 하였을 때 결과

Last modified: 10 December 2024