05장 표현식과 문

1. 값

• 값(Value): 식(expression)이 평가되어 생성된 결과.
• 자바스크립트 프로그램은 값을 만들어내고, 값을 저장하고, 값을 참조해서 동작합니다.
• 예를 들어 10 + 20은 계산을 통해 30이라는 값을 생성합니다.
• 변수는 하나의 값을 저장하기 위해 획보된 메모리 공간 차제이고, 변수에 할당되는 것은 값입니다.

2. 리터럴

• 리터럴: 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법.
• 정수, 부동소수점, 2진수, 문자열, 불리언, null, undefined, 객체, 배열, 함수, 정규 표현식 리터럴 등이 있습니다.

3. 표현식(Expression)

• 표현식(Expression): 값으로 평가될 수 있는 문(statement).

• 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조합니다.

• 즉, 결과적으로 값을 생성하는 문을 말합니다.

• (값으로 평가될 수 있는 문은 모두 표현식입니다.)

• 표현식은 값이기 때문에 어디에서든 사용 가능합니다.

• 표현식은 다음과 같은 형태로 구분할 수 있습니다.

  // 리터럴 표현식
  10;
  ("Hello");
  true;
  
  // 식별자 표현식
  sum; // 변수 sum의 값을 참조
  person.name;
  arr[1];
  
  // 연산자 표현식
  10 + 20;
  sum = 10;
  
  // 함수 호출 표현식
  square(2);
  person.getName();
  

4. 문(Statement)

• 문(Statement): 프로그램을 구성하는 기본 단위이자 최소 실행 단위.

• 문은 여러 토큰으로 구성됩니다.

  • 토큰이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 말합니다.
  • ex: 키워드, 식별자, 연산자, 리터럴, 세미콜론, 마침표 등

• 문은 명령문이라고도 부르며, 실행하면 특정 작업을 수행합니다.

• 문 예시:

  var x = 10 + 20; // 변수 선언문 + 할당문 + 표현식
  if (x > 10) {
    console.log(x); // 조건문 + 함수 호출문
  }
  

• if, for, while, switch, return, var 등은 모두 문입니다.

• 대부분의 문은 끝에 세미콜론(;)을 붙입니다.

5. 세미콜론과 세미콜론 자동 삽입(ASI)

• 자바스크립트는 문 끝에 세미콜론을 문의 종료로 인식해, 문이 종료한 위치를 파악하여 순차적으로 문을 하나씩 실행합니다.
• 문을 끝낼 때는 세미콜론을 붙여야 하며, 코드블록 뒤에는 붙이지 않습니다.
  • 코드 블록은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 떄문입니다.
• 하지만 ASI가 수행되어 세미콜론은 생략 가능합니다.
• ASI (Automatic Semicolon Insertion): 문법적으로 문제가 없으면 자바스크립트 엔진이 세미콜론을 자동 삽입함.
• 다만, 자동 삽입이 의도대로 되지 않는 경우 발생 → 예측 불가능한 버그 발생 가능.

// 올바른 예
var foo = 1;
var bar = 2;

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

6. 표현식 문(Expression Statement)

• 표현식 문: 표현식을 문처럼 사용하는 경우.
• 자바스크립트는 표현식 뒤에 ;을 붙이면 그것을 문으로 간주합니다.
• 표현식인 문인지 구별하는 방법은 변수에 할당해 보는 것 입니다.

var foo = 10; // 변수 선언문 (할당문이 포함된 표현식 문)
foo + 20; // 표현식 문 (단독으로 실행하면 아무 일도 일어나지 않음)

• 문은 문맥에 따라 표현식으로 해석되지 않음. → 예: if, for는 표현식으로 사용할 수 없음.

7. 표현식 vs 문

구분	설명
표현식	값으로 평가되어 결과를 생성 (e.g. 10 + 20, 'hello')
문	실행되어 동작 수행 (e.g. if, var, return)
표현식 문	표현식을 세미콜론으로 문처럼 사용 (e.g. foo + 10;)

요약 정리

구분	설명
값(Value)	식이 평가되어 생성된 결과.
표현식(Expression)	결과적으로 값을 생성하는 구문. 문 안에도 포함될 수 있음.
문(Statement)	실행 가능한 명령문. 세미콜론으로 종료.
표현식 문	표현식을 세미콜론으로 종료하여 문처럼 사용.
ASI	세미콜론 자동 삽입. 가독성과 안정성을 위해 명시적 세미콜론 사용 권장.

주요 포인트

• 표현식은 값을 반환하며, 문은 실행을 위해 존재한다.
• 표현식은 문으로 사용할 수 있지만, 문은 표현식처럼 사용할 수 없다.
• 표현식 문은 단독 실행할 땐 의미가 없을 수 있다.
• **ASI(세미콜론 자동 삽입)**는 JS 문법의 유연함을 제공하지만, 명시적 세미콜론 사용이 안정적이다.
• 코드의 의미와 실행 흐름을 명확하게 파악하려면 표현식과 문의 차이를 반드시 이해해야 한다.

// 대표적인 예시
var x = 10 + 20; // 표현식 + 문
if (x > 10) console.log(x); // 문 안에 표현식 포함