[모던 자바스크립트 Deep Dive] 5장 - 표현식과 문

🎉 표현식과 문

😉 값

• 값(Value) : 표현식(expression) 이 평가(Evaluate) 되어 생성된 결과

• 모든 값은 메모리에 2진수(bit)의 나열로 저장된다. 이때 값은 데이터 타입을 가지며, 이에 따라서 값을 다르게 해석하게 된다. 값 0100 0001을 Number로 해석하면 65지만 String으로 해석하면 ‘A’이다.

• 변수는 하나의 값을 저장하기 위해 메모리에 확보한 공간 또는 이를 식별하기 위해 붙인 이름이다. 따라서 변수에는 값이 할당된다.

// 변수에는 10 + 20(식)이 아니라 평가된 결과인 30(값)이 저장된다.
var sum = 10 + 20;

😉 리터럴

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

3;

• 위 3은 단순한 아라비아 숫자 3이 아니라 숫자 리터럴이다. 사람이 이해할 수 있는 아라비아 숫자 3을 이용해 숫자 리터럴 3을 코드에 기술하면 자바스크립트 엔진은 이를 평가하여 숫자 값 3(0000 0011)을 생성한다.

• 자바스크립트는 런타임(runtime) 시점에서 리터럴을 평가해 값을 생성한다. 다시말해, 리터럴은 값을 생성하기 위해서 미리 약속된 표기법이다

🐱‍🐉 변수란 무엇인가? 왜 필요한가?

• 하나의 값을 저장하기 위해 확보한 메모리 공간 자체

🐱‍🐉 식별자

• 어떤 값을 구별해서 식별할 수 있는 고유한 이름

• 식별자 result가 값 30을 식별한다고 하자. 값은 메모리 공간에 저장되어 있으니, result는 메모리 주소 0x0669F913을 기억해야 한다.

  -> 즉, 식별자는 값 자체가 아니라 값을 참고할 수 있는 메모리 주소를 기억하는 것. 때문에 식별자로 값을 식별할 수 있다.

  -> 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다

😉 표현식

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

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();

• 표현식과 값은 동치(equivalent)다. 자바스크립트에서 표현식 1 + 2(표현식)은 평가되어 3(값)을 생성하므로, 1 + 2과 3은 동치다. 이것은 문법적으로 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다는 것을 의미한다.

var x = 1 + 2;

x + 3; // -> 6

• 위 코드에서 x + 3은 표현식이다. + 연산자는 좌항과 우항의 값을 산술 연산하는 연산자이므로, 좌항과 우항에는 숫자 값이 위치해야 한다. 이때 좌항 x는 식별자 표현식이다. x에는 숫자 값 3이 할당되어 있고, 식별자 표현식 x를 평가하면, 숫자 값 3이 결과로 생선된다. 따라서 숫자 값이 위치해야할 자리에 표현식 x를 사용할 수 있다.

😉 문

• 문(statement) : 프로그램을 구성하는 기본 단위이자 최소 실행단위. 문의 집합으로 이뤄진 것이 프로그램이며, 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍이다. 문은 여러 토큰(token)으로 구성된다.

• 토큰(token) : 문법적 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소. 예를 들어 키워드, 식별자, 연산자, 리터럴, 세미콜론, 마침표 등의 기호는 문법적 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본요소이므로 모두 토큰이다.

문은 명령문이라고도 불리며, 문이 실행되면 명령이 실행되고, 무슨일인가가 일어나게 된다.

문은 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있다. 변수 선언문을 실행하면 변수가 선언되고, 할당문을 실행하면 값이 할당된다. 조건문을 실행하면 조건에 따라 실행할 코드블록이 결정되어 실행되고, 반복문을 실행하면 특정 코드블록을 반복 실행한다.

// 변수 선언문
var x;

// 할당문
x = 5;

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

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

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

• 문은 표현식과 표현식이 아닌 문을 포함한다.

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

//  문이면서 표현식임
x = 1 + 2;

• 표현식은 값으로 평가될 수 있는 문이다. 표현식이 아닌 문은 값으로 평가되지 않는 문이다. 이를 명확하게 구분할 수 있는 방법은 변수에 할당해보는 것이다.

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

• 위 코드에서 볼 수 있듯 변수 선언문은 표현식이 아니다. 따라서 변수 선언문을 값처럼 사용 할 수 없다.

var x; // 표현식이 아닌 문(변수 선언문)
x = 100; // 할당문은 표현식이면서 완전한 문이다.

• x = 100은 리터럴 100에 대한 평가 결과인 숫자 값 100을 x라는 변수에 할당하는 할당문이다. 이 때 리터럴 100은 평가 결과 값을 가지므로 변수에 할당할 수 있다. 또한 할당문 x = 100은 그 자체로도 평가식이기에 평가 결과 값은 100이다.

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

• 위 코드에서 할당문을 값처럼 변수에 할당했다. 할당문은 표현식이므로 값으로 평가된다. 즉 x = 100은 x 변수에 100을 할당한 값 100으로 평가된다. 따라서 foo 변수에는 100이 할당된다.