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

값(value)

 값은 식(표현식)이 평가되어 생성된 결과, 변수에 할당하되는 것은 값

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

// 10 + 20은 숫자 값 30을 생성한다. 
10 + 20; //30

 

모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장된다.

메모리에 저장된 값은 데이터 타입에 따라 다르게 해석 가능

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

 

위 예제의 sum 변수에 할당 되는 것은 10 + 20이 아니라 결과 값인 30이다. 

즉, 변수 이름 sum이 기억하는 메모리 공간에 저장된 것은 30이다. 

(10 + 20)은 할당 이전에 평가되어 값을 생성해야 한다. 

 

위의 예제처럼 식으로 생성할 수 있지만 가장 기본적인 방법은 리터럴을 사용하는 것

---

리터럴

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

//숫자 리터럴 3
3;

 

위의 예제는 숫자가 아니라 숫자 리터럴이다.

 

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

리터럴은 값을 생성하기 위해 미리 약속된 표기법이라고 할 수 있다. 

---

표현식

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

var score = 100;

 

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

 

var score = 50 + 50;

 

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

score;

 

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

 

다양한 표현식이 있지만 값으로 평가된다는 점에서 동일하다. 즉! 값으로 평가될 수 있는 문은 모두 표현식이다. 

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

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

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

//함수/매서드 호출 표현식(선언이 이미 존재한다고 가정)

square()
person.getName()

 

표현식과 표현식이 평가되는 값은 동등한 관계, 동치이다. 

 

var x = 1 + 2;

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

 

표현식은 다른 표현식의 일부가 되어 새로운 값을 만들어 낼 수 있다. 

---

문

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

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

 

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

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

 

var sum = 1 + 2;

토큰: var, sum, =, 1, +, 2, ;

문: var sum = 1 + 2;

 

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

변수 선언문을 실행하면 변수가 선언되고, 할당문을 실행하면 값이 할당된다.

조건문을 실행하면 저장한 조건에 따라 실행할 코드 블록({ ... })이 결정되어 실행되고,

반복문을 실행하면 특정 코드 블록이 반복 실행된다. 

 

// 변수 선언문
var x;

// 할당문'
x = 5;

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

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

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

---

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

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

 

단, 0개 이상의 문을 중괄호로 묶은 코드 블록({ ... }) 뒤에는 세미콜론을 붙이지 않는다. (예를 들면, if문, for 문, 함수 등 )

이러한 코드 블록은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문이다. 

 

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

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

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

 

---

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

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

// 변수 선언문은 값으로 평가될 수 없으므로 표현식이 아니다. 
var x;
// 1, 2, 1 + 2, x = 1 + 2는 모두 표현식이다. 
// x = 1 + 2는 표현식이면서 완전한 문이기도 하다.
x = 1 + 2;

 

표현식과 문을 구별하는 방법

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

• 표현식인 문은 값으로 평가될 수 있는 문
• 표현식이 아닌 문은 값으로 평가될 수 없는 문

예를 들면, 변수 선언문은 값으로 평가될 수 없다. 따라서 표현식이 아닌 문이다. 하지만 할당문은 값으로 평가될 수 있다. 따라서 표현식인 문이다. 

 

표현식인 문과 표현식이 아닌 문을 구별하는 변수에 할당해 보는 것이다. 표현식인 문은 값으로 평가되므로 변수에 할당할 수 있지만 표현식이 아닌 문은 값으로 평가할 수 없으므로 변수에 할당하면 에러가 발생한다. 

//표현식이 아닌 문은 값처럼 사용할 수 없다.
var foo = var x;

 

위의 예제처럼 변수 선언문은 값처럼 사용할 수 없다.

 

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

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

 

할당문 x = 100 자체가 표현식이다. 즉, 할당문은 표현식인 문이기 때문에 값처럼 사용할 수 있다. 

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

 

x = 100은 x  변수에 할당한 값 100으로 평가된다. 따라서 foo 변수에는 100이 할당된다.