리터럴

00. TL;DR

• 리터럴(literal) 은 값 자체를 소스 코드에 직접 작성한 것.
  • 객체나 변수를 따로 선언하거나 생성하지 않고도, 코드 내에서 곧바로 사용할 수 있는 고정된 데이터 값을 말합니다.
    • 예: "Hello", 42, true, null, [1, 2, 3], { name: "John" }
• 표현식(expression) 은 값을 생성하거나 평가할 수 있는 코드 단위.
• 리터럴은 표현식의 일종이며, 항상 값으로 평가되는 가장 단순한 표현식

---

01. 리터럴(Literal)이란?

01.01. 기본 정의

리터럴은 프로그래머가 작성한 코드 안에서 값 그 자체를 직접 나타낸 것입니다.

 

다시 말해, 어떤 데이터 값을 표현하기 위해 사용하는 고정된 표현식이며, 그 값은 이미 컴파일되거나 해석되는 시점에 정해져 있는 값입니다.

 

예를 들어, 아래 코드에서 42, "Hello", true 같은 값이 모두 리터럴입니다.

const age = 42;              // 숫자 리터럴
const greeting = "Hello";    // 문자열 리터럴
const isReady = true;        // 불리언 리터럴

이 리터럴들은 값이 고정되어 있으며, 별도의 연산이나 함수 호출 없이도 그 자체로 의미를 가지는 값입니다.

---

01.02. 리터럴의 종류 (JavaScript 기준)

타입	예시	설명
숫자 리터럴	42, 3.14, -7	정수와 실수 모두 가능
문자열 리터럴	"Hello", 'World', `Hi`	따옴표 또는 백틱으로 감싼 문자
불리언 리터럴	true, false	논리값
null 리터럴	null	"값 없음" 또는 "의도적 없음"
undefined	undefined	초기화되지 않은 상태
배열 리터럴	[1, 2, 3]	대괄호로 표현한 배열
객체 리터럴	{ name: "John", age: 30 }	중괄호로 표현한 키-값 쌍
정규식 리터럴	/[a-z]+/gi	패턴을 직접 표현

---

02. 리터럴은 왜 사용하는가?

02.01. 간결함과 직관성

• 리터럴은 간단하고 직접적인 방법으로 데이터를 표현할 수 있게 해줍니다.
• 별도로 변수나 함수를 만들 필요 없이, 필요한 데이터를 바로 사용할 수 있습니다.

console.log("Hello, world!"); // 함수 인자로 문자열 리터럴 직접 전달

02.02. 객체 생성의 편의성

• 객체나 배열 같은 복잡한 데이터 구조도 리터럴로 간편하게 만들 수 있습니다.

const user = { name: "Jane", age: 25 }; // 객체 리터럴
const numbers = [1, 2, 3, 4];           // 배열 리터럴

02.03. 표현의 명확성

• 값의 의미가 한눈에 드러나기 때문에 코드 가독성이 좋아집니다.
• 예를 들어, true 또는 "guest" 같은 리터럴은 해당 값이 어떤 의미인지 바로 이해할 수 있습니다.

02.04. 성능 측면

• 대부분의 경우 리터럴은 미리 정의된 값이기 때문에, 생성 비용이 낮고 빠르게 처리됩니다.
• 이는 함수 호출이나 생성자 호출보다 더 빠르게 실행될 수 있습니다.

---

03. 리터럴이 아닌 경우와 비교

아래는 같은 값을 생성하지만 리터럴을 사용하지 않은 경우입니다.

const str = new String("hello"); // 비추천. 객체 래퍼 생성자 사용

위 코드는 "hello"라는 값이 실제 문자열이 아닌, String 객체로 감싸진 복잡한 형태가 됩니다.

일반적으로 문자열 리터럴 "hello"처럼 단순하고 명확한 방식이 더 권장됩니다.

---

04. 리터럴과 표현식의 관계

04.01. 표현식(Expression)이란?

표현식은 "값으로 평가될 수 있는 코드 조각"입니다.

즉, 표현식은 실행하면 값이 나오는 코드 단위를 말합니다.

 

예를 들어 다음은 모두 표현식입니다.

3 + 4        // → 7
a * 2        // → a가 5일 때, 10
"Hi" + "!"   // → "Hi!"

 

표현식에 포함되는 것들:

• 리터럴 (42, "text", true 등)
• 변수 (x, y, user.name)
• 연산자 사용 (x + y, a * b)
• 함수 호출 (getName(), Math.max(1, 5))
• 삼항 연산 (x > 0 ? "positive" : "negative")

---

04.02. 리터럴은 표현식이다!

리터럴은 항상 평가되면 값 그 자체가 되는 표현식입니다.

"hello"      // 문자열 리터럴 → 표현식 (값: "hello")
5            // 숫자 리터럴 → 표현식 (값: 5)
true         // 불리언 리터럴 → 표현식 (값: true)
[1, 2, 3]     // 배열 리터럴 → 표현식 (값: 배열)

모든 리터럴은 표현식이지만, 모든 표현식이 리터럴은 아닙니다.

리터럴은 값 자체이므로, 표현식 중 가장 단순한 형태라고 볼 수 있습니다.

---

05. 리터럴의 내부 동작 (JS 엔진 관점)

05.01. 자바스크립트 엔진이 리터럴을 해석하는 방식

자바스크립트 엔진(V8, SpiderMonkey 등)은 코드가 실행되기 전에 다음을 합니다:

1. 파싱(Parsing):
   • 코드가 토큰(token) 단위로 분해되고 AST(Abstract Syntax Tree)로 변환됩니다.
2. 컴파일(Compilation):
   • AST를 바탕으로 실행 가능한 명령어(Bytecode)를 생성합니다.
3. 실행(Runtime):
   • 이 명령어를 기반으로 실제 실행이 이뤄지며 리터럴은 즉시 값으로 메모리에 저장됩니다.

const message = "Hi";

 

이 코드의 "Hi"는 문자열 리터럴이고, 컴파일 타임에 이미 메모리에 로드되어 있습니다.
실행 시점엔 별도 연산 없이 바로 변수에 할당됩니다.

---

05.02. 객체/배열 리터럴의 경우

const user = { name: "Tom", age: 20 };

 

위의 객체 리터럴은 런타임에 다음 과정을 거칩니다:

• 빈 객체를 생성 (Object.create(null) 또는 {})
• 프로퍼티 키-값을 순차적으로 할당 (user.name = "Tom")
• 최종 객체를 변수 user에 바인딩

따라서 리터럴은 단순 숫자나 문자열뿐만 아니라 구조화된 데이터도 직접 표현할 수 있게 해줍니다.

---

06. 리터럴 vs 표현식 vs 문(Statement)

구분	정의	예시	평가 결과
리터럴	고정된 값 자체	"Hello", 42, true	값 그 자체
표현식	값으로 평가되는 코드 조각	a + b, "Hi" + name	값
문(Statement)	동작을 수행하는 코드의 완전한 구문 단위	let x = 10;, if (...) {...}	없음

let x = 10;은 문(statement)이며, 10은 리터럴이고, 동시에 표현식입니다.

---

07. 리터럴 사용 이유

이유	설명
빠른 평가	엔진이 미리 컴파일함 (컴파일 타임에 값 확정)
메모리 절약	종종 내부 캐싱 적용됨 (예: string interning)
코드 간결성 & 직관성	new Object()보다 {}가 더 직관적
부수 효과 없음 (pure value)	연산이 아닌 값 그 자체로 사용됨