[DeepDive JS] 05. 표현식과 문

5.1 값

• 값(value)은 식이 평가되어 생성된 결과를 말함.
• 평가는 식을 해석해서 값을 생성하거나 참조하는 것을 의미함.

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

• 모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장된다.
• 변수: 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 ==> 변수에 할당되는 것은 값 !

5.2 리터럴

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

// 숫자 리터럴 3
3

• 자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성함.
• 리터럴은 값을 생성하기 위해 미리 약속한 표기법이라고 할 수 있음!
• 리터럴을 사용하여 '정수 리터럴, 부동소수점 리터럴, 불리언 리터럴, 객체 리터럴, 함수 리터럴, 정규 표현식 리터럴' 등을 생성할 수 있다.

// 정규 표현식 리터럴
/[A-Z]+/g

5.3 표현식

• 표현식: 값으로 평가될 수 있는 문 ==> 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.
• 리터럴은 값으로 평가된다. 따라서 리터럴도 표현식이다!

var score = 100;
// 100은 리터럴이다.
// 리터럴 100은 js 엔진에 의해 평가되어 값을 생성하므로 리터럴은 그 자체로 표현식이다.
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()
perosn.getName()

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

var x = 1 + 2;

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

• x+3은 표현식.
• +연산자는 좌항과 우항의 값을 산술 연산하는 연산자이므로 좌항과 우항에는 숫자 값이 위치해야 함.
• 좌항 x는 식별자 표현식. 즉, x는 할당되어 있는 숫자 값 3으로 평가됨. => 따라서 숫자 값이 위치해야할 자리에 표현식 x를 상요할 수 있다.
• 표현식은 다른 표현식의 일부가 되어 새로운 값을 만들어 낼 수 있음.

5.4 문

• 문(statement): 프로그램을 구성하는 기본 단위이자 최소 실행 단위.
• 문의 집합으로 이뤄진 것이 바로 프로그램이며, 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍이다.
• 문은 여러 개의 토큰으로 구성됨.
• 토큰(token): 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미함.
• ex. 키워드, 식별자, 연산자, 리터럴, 세미콜론 등의 특수 기호는 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소 => 모두 토큰
• 문은 여러 토큰으로 구성된다!
• 문은 명령문이라고도 부른다.

// 문은 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있다.
// 변수 선언문
var x;

// 할당문
x = 5;

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

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

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

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

• 세미콜론은 문의 종료를 나타냄.
• js 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행함.
• 단, 0개 이상의 문을 중괄호로 묶은 코드 블록 뒤에는 세미콜론을 붙이지 않는다.
• if문, for문, 함수 등의 코드 블록은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 세미콜론 안 붙여도 된다.
• 그러나, 세미콜론은 생략이 가능하다! js 엔진이 코드 해석시 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능이 암묵적으로 수행되기 때문.

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)( ... ) is not a function

그러나 결론적으로는 세미콜론 사용을 권장한다.

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

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

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

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

• 표현식인 문: 평가될 수 있는 문
• 표현식이 아닌 문: 값으로 평가될 수 없는 문.
  ex) 변수 선언문은 값으로 평가될 수 없음. ==> 표현식이 아닌 문이다.
  하지만 할당문은 값으로 평가될 수 있음 ==> 표현식인 문.
  표현식인 문과 아닌 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는 것!

// 표현식이 아닌 문은 값처럼 사용할 수 없다.
var foo = var x; // SyntaxError: Unexpected token var
// 변수 선언문은 표현식이 아닌 문이다. 값으로 평가될 수 없다. 따라서 변수 선언문은 값처럼 사용할 수 없음.

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

// 표현식인 문은 값처럼 사용할 수 있다.
var foo = x = 100;
console.log(foo); // 100
// 할당문을 값처럼 변수에 할당함. 표현식인 문인 할당문은 할당한 값으로 평가된다.
// x = 100은 x 변수에 할당한 값 100으로 평가된다. 따라서 foo 변수에는 100이 할당됨.

완료 값(completion value)

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