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

5.1 값

값은 표현식이 평가되어 생성된 결과를 말한다. 좀 더 쉽게 풀어 설명하면 값은 실제로 프로그램이 다루는 데이터이다.

10 + 20; //30

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

5.2 리터럴

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다. 이를 좀 더 쉽게 풀어 설명하면 코드에 직접 작성한 표현이다.

// 숫자 리터럴 3
3

자바스크립트 엔진은 런타임에 리터럴을 평가해서 값을 생성할 수 있다.

아래는 실제 JS에서 선언될 수 있는 리터럴들의 예시이다.

// ===== 숫자 리터럴 (Number Literals) =====
const intNum = 10;          // 정수
const floatNum = 3.14;      // 실수(부동소수점)
const binaryNum = 0b1010;   // 2진수 표기 (10)
const octalNum = 0o17;      // 8진수 표기 (15)
const hexNum = 0xFF;        // 16진수 표기 (255)
const expNum = 1e6;         // 지수 표기 (1,000,000)

// ===== BigInt 리터럴 =====
const bigNum = 123n;        // 숫자 뒤에 n을 붙이면 BigInt (매우 큰 정수 표현 가능)

// ===== 문자열 리터럴 (String Literals) =====
const singleQuote = 'hello';          // 작은따옴표
const doubleQuote = "hello";          // 큰따옴표
const templateLiteral = `hi ${intNum}`; // 템플릿 리터럴, 백틱(`) 사용, ${}로 변수/표현식 삽입 가능

// ===== 불리언 리터럴 (Boolean Literals) =====
const isTrue = true;    // 참
const isFalse = false;  // 거짓

// ===== 배열 리터럴 (Array Literals) =====
const arr = [1, 2, 3];  // new Array() 대신 이 방식을 권장

// ===== 객체 리터럴 (Object Literals) =====
const obj = {
  name: 'kim',  // key: value 쌍으로 구성
  age: 20
};                       // new Object() 대신 이 방식을 권장

// ===== 정규표현식 리터럴 (RegExp Literals) =====
const regex = /ab+c/i;  // 슬래시(/) 사이에 패턴 작성, i는 대소문자 무시 플래그

// ===== null 리터럴 =====
const emptyValue = null;  // "값이 의도적으로 없음"을 명시

// ===== undefined =====
let notAssigned;         // 값을 할당하지 않으면 자동으로 undefined
console.log(notAssigned); // undefined 출력

// ===== 함수 리터럴 (Function Literals) =====
const regularFunc = function() {   // 함수 표현식
  console.log('일반 함수');
};

const arrowFunc = () => {          // 화살표 함수 (ES6)
  console.log('화살표 함수');
};

// ===== 실행 확인용 콘솔 출력 =====
console.log(intNum, floatNum, binaryNum, octalNum, hexNum, expNum);
console.log(bigNum);
console.log(singleQuote, doubleQuote, templateLiteral);
console.log(isTrue, isFalse);
console.log(arr);
console.log(obj);
console.log(regex.test('abbbc')); // true
console.log(emptyValue);
regularFunc();
arrowFunc();

5.3 표현식

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

// ===== 리터럴 표현식 (Literal Expression) =====
// 값 자체를 그대로 표현하는 것
10;              // 숫자 리터럴
'hello';          // 문자열 리터럴
[1, 2, 3];        // 배열 리터럴
{ a: 1 };         // 객체 리터럴 (단, 문장 맨 앞에 오면 블록으로 해석되니 괄호 필요)

// ===== 연산자 표현식 (Operator Expression) =====
// 연산자를 사용해 값을 계산/결합하는 것
const sum = 3 + 5;          // 산술 연산자 → 8
const isEqual = 3 === 3;    // 비교 연산자 → true
const result = (3 > 2) && (5 > 4); // 논리 연산자 → true
const text = 'hi ' + 'there'; // 문자열 결합 연산자

// ===== 함수/메서드 호출 표현식 (Function/Method Call Expression) =====
// 함수나 메서드를 호출해서 결과값을 만드는 것
function add(a, b) {
  return a + b;
}
add(3, 4);              // 함수 호출 표현식 → 7

const arr = [1, 2, 3];
arr.map(x => x * 2);    // 메서드 호출 표현식 → [2, 4, 6]

console.log('hello');   // 메서드 호출 표현식 (console 객체의 log 메서드)

5.4 문

문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위다.
토큰은 문법적인 의미를 가지고 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다. ex -> 키워드, 식별자, 연산자, 리터럴, 세미콜론, 마침표등의 기호는 문법적인 의미를 가지며 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소이므로 모두 토큰이다.

// ===== 변수 선언문 =====
let x;          // let 선언
const y = 10;   // const 선언

// ===== 할당문 =====
x = 5;          // 값 할당
x += 3;         // 복합 할당 → x = x + 3

// ===== 함수 선언문 =====
function greet(name) {
  return `안녕, ${name}`;
}

// ===== 조건문 =====
if (x > 5) {
  console.log('5보다 큼');
} else {
  console.log('5 이하');
}

// ===== 반복문 =====
for (let i = 0; i < 3; i++) {
  console.log(i);   // 0, 1, 2
}

let n = 3;
while (n > 0) {
  console.log(n);
  n--;
}

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

세미클론(;)는 문의 종료를 나타내는데 이는 선택적으로 사용할 수 있따. 그 이유는 세미콜론 자동 삽입 기능(ASI) 이 암묵적으로 실행되기 때문이다.

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

표션식은 문의 일부일 수도 있고 그 자체로 문이 될 수도 있는데 예시를 통해서 설명하겠다.

// 변수 선언 문은 값으로 평가될 수 없으므로 표현식이 아니다.
var x;

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

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

// ===== 표현식인 문 (할당해서 값이 담기면 표현식) =====

var a = (x = 1 + 2);   // OK. 할당식 자체가 값(3)으로 평가됨 → 표현식
console.log(a);        // 3

var b = (function () {
  return 10;
})();                  // OK. 함수 호출도 값으로 평가됨 → 표현식
console.log(b);        // 10

var c = (3 > 2);        // OK. 비교 연산도 값(true/false)으로 평가됨 → 표현식
console.log(c);         // true


// ===== 표현식이 아닌 문 (할당해 보면 에러 발생) =====

var d = (var e = 5);
// SyntaxError. 변수 선언문은 그 자체로 값이 없으므로 표현식이 아니다.

var f = (if (true) { 1 });
// SyntaxError. 조건문도 값으로 평가되지 않으므로 표현식이 아니다.

var g = (function foo() {});
// 주의: 이건 함수 '선언문'이 아니라 '함수 표현식'으로 해석됨 (괄호 안 문맥이라 표현식 취급).
// 최상위 레벨에서 function foo() {} 단독으로 쓰면 선언문 → 값으로 할당 불가