[JavaScript] 표현식과 문

1. 값

식(표현식)이 평가(evaluation)되어 생성된 결과

변수
1. 하나의 값을 저장하기 위해 확보된 메모리 공간 자체
2. 그 메모리 공간을 식별하기 위해 붙인 이름

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

2. 리터럴

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

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

리터럴	예시
정수	100
부동소수점	10.5
2진수	0b01000001
8진수	0o101
16진수	0x41
문자열	'Hello' 'World'
불리언	true false
null	null
undefined	undefined
객체	{ name:'Kang', address:'Seoul' }
배열	[1, 2, 3]
함수	function() {}
정규 표현식	/[A-Z]+/g

3. 표현식

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

리터럴도 표현식이다.

var score = 100;
// 리터럴 100은 그 자체로 표현식

표현식은 리터럴, 식별자, 연산자, 함수 호출 등의 조합으로 이뤄질 수 있다.
값으로 평가될 수 있는 문은 모두 표현식이다.

// 리터럴
10;
"PPoFMan";

// 식별자
sum;
person.name;
arr[1];

// 연산자
10 + 20;
sum = 10;
sum !== 10;

// 함수/메서드 호출
square();
person.getName();

표현식과 표현식이 평가된 값은 동치다.
다른 표현식의 일부가 되어 새로운 값을 만들어낼 수 있다.

표현식은 값처럼 사용할 수 있다.

var x = 1 + 2;

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

4. 문(statement)

문 : 프로그램을 구성하는 기본 단위이자 최소 실행 단위
문의 집합 : 프로그램
문을 작성하고 순서에 맞게 나열하는 것 : 프로그래밍

문은 여러 토큰으로 구성된다.
토큰 : 문법적인 의미. 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소
예) 키워드, 식별자, 연산자, 리터럴, 세미콜론

문 : 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); }

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

세미콜론 : 문의 종료
자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행한다.
단, 중괄호로 된 코드 블록 {...} 뒤에는 세미콜론을 붙이지 않는다. (코드 블록의 자체 종결성)

ASI(Automatic semicolon insertion)
세미콜론은 옵션이다. 생략 가능하다.
자바스크립트 엔진이 소스코드를 해석할 때 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능(ASI)이 암묵적으로 수행된다.
하지만 이 수행이 잘못되는 경우가 있다.

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

세미콜론을 반드시 붙여야 한다 vs 붙이지 말아야 한다
ESLint 같은 정적 분석 도구에서도 세미콜론 사용을 기본으로 설정
TC39(ECMAScipt 기술 위원회)도 세미콜론 사용을 권장하는 분위기

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

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

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

표현식인 문 : 값으로 평가될 수 있는 문 (변수 할당문)
표현식이 아닌 문 : 값으로 평가될 수 없는 문 (변수 선언문)

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

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

완료 값 : 표현식이 아닌 문을 실행하면 undefined (할당/참조 불가)

표현식인 문 : 평가된 값 반환