개발하는데 다 이유가 있겠지

값(value)

---

💡 값은 식(표현식)이 평가되어 생성된 결과를 말한다.
*평가(evaluate) : 식을 해석해서 값을 생성하거나 참조하는 것

// '10 + 20;'이라는 표현식은 평가되어 30이라는 숫자 값을 생성
10 + 20; // 30

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

메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다.

예를 들어, 0100 0001은 숫자로 해석하면 65이지만, 문자로 해석하면 'A'이다.

// 변수에는 10 + 20;의 표현식이 아닌 평가된 값 30이 할당된다.
var sum = 10 + 20;

변수에 할당되기 이전에 표현식은 평가되어 값을 생성해야 한다.

 

리터럴(literal)

---

💡 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법
(ex. 아라비아 숫자, 알파벳, 한글, '', "", ., [], {}, // 등)

// 숫자 리터럴 3
3

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

리터럴은 평가되어 값을 생성 (모던 자바스크립트 Deep Dive 51p)

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

즉, 리터럴은 값을 생성하기 위해 미리 약속한 표기법이다.

리터럴 종류 및 예시 (모던 자바스크립트 Deep Dive 52p)

 

표현식(expression)

---

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

// 100은 리터럴로 자바스크립트 엔진에 의해 평가되어 값을 생성
var score = 100;

// 50+50은 리터럴과 연산자로 이뤄져 자바스크립트 엔진에 의해 평가되어 값을 생성
var score = 50 + 50;

// score 식별자는 값을 생성하지는 않지만, 메모리 참조를 통해 값으로 평가됨
score; // 100

 

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

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

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

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

표현식과 표현식으로 평가된 값은 동등한 관계, 즉 동치(equivalent)다.

// 산술 연산자 + 좌항과 우항에는 숫자 값이 위치해야 한다.
var x = 1 + 2;

// x는 1 + 2로 평가된 값과 동등한 관계이므로 대신 사용할 수 있다.
x + 3; // 6

 

문(statement)

---

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

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

문은 여러 토큰으로 구성 (모던 자바스크립트 Deep Dive 54p)

문은 컴퓨터에게 내리는 명령이다. 선언문, 할당문, 조건문, 반복문으로 구분할 수 있다.

• 선언문 : 변수 선언
• 할당문 : 값의 할당
• 조건문 : 지정한 조건에 따라 실행할 코드 블록({...})이 결정되어 실행
• 반복문 : 특정 코드 블록이 반복 실행

// 변수 선언문
var x;

// 할당문
x = 5;

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

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

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

 

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

---

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

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

단, 0개 이상의 문을 중괄호로 묶은 코드 블록({...})은 세미콜론을 붙이지 않는다. 이러한 코드 블록은 언제나 문의 종료를 의미하는 자체 종결성(self closing)을 가진다.

// 함수의 자체 종결성
function add(a, b) {
  return a + b; // return 문으로 함수 종료
}

// 조건문의 자체 종결성
let x = 10;
if (x > 5) {
  console.log('x는 5보다 큽니다.');
} else {
  console.log('x는 5보다 작거나 같습니다.');
}

// 반복문의 자체 종결성
for (let i = 0; i < 5; i++) {
  console.log(i);
  if (i === 3) {
    break; // 반복문 중단
  }
}

자바스크립트 엔진은 소스코드를 해석할 때 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능(ASI:automatic semicolon insertion)을 수행하기 때문에 세미콜론은 생략이 가능하다.

하지만 동작을 제대로 예측하지 못하는 아래와 같은 경우가 발생할 수 있다.

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

console.log(); // undefined

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

이와 같은 이유로 ESLint 같은 정적 분석 도구에서도 세미콜론 사용은 기본으로 설정하고 있고, TC39(ECMAScript 기술 위원회)도 세미콜론 사용을 권장한다.

 

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

---

// 변수 선언문은 값으로 평가될 수 없으므로 표현식 X
var x;

// 표현식이면서 완전문이다.
x = 1 + 2;

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

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

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

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

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

⭐️ 완료 값(completion value)

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

표현식이 아닌 문을 실행하면 완료 값 undefined가 출력됨

크롬 개발자 도구에서 표현식인 문을 실행하면 언제나 평가된 값을 반환한다.

 

Reference
모던 자바스크립트 Deep Dive