[콜럼Vue스] 리터럴 Literal

**리터럴(Literal)**은 프로그래밍에서 값을 직접 작성한 것을 의미함. 즉, 코드를 작성할 때 변수나 상수를 사용하지 않고, 값을 직접적으로 표현하는 방식임. 자바스크립트와 같은 언어에서 다양한 **자료형(숫자, 문자열, 배열, 객체 등)**을 리터럴로 표현할 수 있음. 리터럴은 코드를 더 직관적으로 작성할 수 있게 해주며, 데이터를 쉽게 표현할 수 있게 해줌.

 

1. 숫자 리터럴 (Numeric Literal)

숫자를 직접적으로 나타내는 방식임. 정수 또는 실수 형태로 표현할 수 있음.

const age = 29; // 숫자 리터럴 (정수)
const pi = 3.14; // 숫자 리터럴 (실수)

2. 문자열 리터럴 (String Literal)

문자열을 표현할 때 사용하며, 큰따옴표("), 작은따옴표('), 또는 **백틱(`)**을 사용하여 문자열을 직접적으로 작성할 수 있음.

const name = "Jerry"; // 문자열 리터럴
const greeting = 'Hello, World!'; // 문자열 리터럴
const template = `Welcome, ${name}!`; // 템플릿 리터럴

 

• 문자열 리터럴: "Hello", 'World!'처럼 따옴표로 감싸서 표현.
• 템플릿 리터럴: 백틱(`)을 사용하여 변수를 삽입하거나 여러 줄의 문자열을 쉽게 작성할 수 있음.

3. 불리언 리터럴 (Boolean Literal)

자바스크립트에서 불리언 리터럴은 참(true) 또는 거짓(false)을 나타내는 리터럴임.

const isVisible = true;  // 불리언 리터럴
const isLoggedIn = false; // 불리언 리터럴

 

 

4. 객체 리터럴 (Object Literal)

객체 리터럴은 **중괄호 {}**를 사용하여 객체를 직접적으로 생성하는 방식임. 프로퍼티와 값을 한 쌍으로 정의하며, 중첩된 객체나 함수도 포함할 수 있음.

const person = {
  name: "Jerry",
  age: 29,
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

 

• 객체 리터럴: { name: "Jerry", age: 29 }처럼 중괄호로 객체를 생성함.
• 객체 리터럴을 사용하면 간단하게 객체를 생성하고, 필요한 프로퍼티를 정의할 수 있음.

5. 배열 리터럴 (Array Literal)

배열 리터럴은 **대괄호 []**를 사용하여 배열을 직접 생성하는 방식임. 배열은 여러 값을 순서대로 저장할 수 있는 자료구조임.

const numbers = [1, 2, 3, 4, 5]; // 배열 리터럴
const fruits = ["Apple", "Banana", "Cherry"]; // 문자열 배열 리터럴

 

 

• 배열 리터럴: [1, 2, 3]처럼 대괄호로 배열을 생성하고, 여러 값을 넣을 수 있음.
• 배열 리터럴은 값을 인덱스에 따라 나열하는 방식으로, 순서가 중요함.

6. 정규식 리터럴 (Regular Expression Literal)

정규식 리터럴은 패턴을 정의하여 문자열에서 특정 문자나 패턴을 찾기 위해 사용함. 정규식은 **슬래시 /**로 감싸서 작성함.

const regex = /abc/; // 정규식 리터럴
const isMatch = regex.test("abcdef"); // true

 

• 정규식 리터럴: /abc/처럼 슬래시로 감싸서 패턴을 정의함.
• 정규식을 사용하면 문자열 검색, 대체, 유효성 검사 등에 활용 가능.

7. 함수 리터럴 (Function Literal)

자바스크립트에서 함수는 일급 객체이므로, 함수를 변수에 직접 할당할 수 있음. 이를 함수 리터럴이라고도 함.

const greet = function() {
  console.log("Hello!");
};

 

• 함수 리터럴: function()처럼 함수를 직접 선언하고 변수를 할당함.
• 함수 리터럴은 함수 표현식에서 주로 사용됨.

8. 템플릿 리터럴 (Template Literal)

ES6에서 도입된 템플릿 리터럴은 **백틱(`)**을 사용하여 문자열을 작성하고, 변수나 표현식을 쉽게 삽입할 수 있는 기능을 제공함. 여러 줄 문자열을 작성하거나 동적으로 문자열을 구성할 때 유용함.

const name = "Jerry";
const greeting = `Hello, ${name}!`; // 템플릿 리터럴
console.log(greeting); // "Hello, Jerry!"

https://jerrycodezzz.tistory.com/59

[콜롬Vue스] 템플릿 리터럴 (Template Literal)

• 템플릿 리터럴: 백틱(`)을 사용하고 ${} 구문을 통해 변수나 표현식을 삽입함.
• 복잡한 문자열을 쉽게 처리할 수 있으며, 여러 줄의 문자열도 가독성 좋게 작성할 수 있음.

 

9. 심볼 리터럴 (Symbol Literal)

**심볼(Symbol)**은 ES6에서 도입된 고유하고 변경 불가능한 데이터 타입으로, 주로 객체의 고유한 프로퍼티 키를 정의할 때 사용됨.

const uniqueKey = Symbol("description"); // 심볼 리터럴
const obj = {
  [uniqueKey]: "value"
};

 

 

• 심볼 리터럴: Symbol()로 고유한 값을 생성함.
• 심볼은 다른 값과 절대 충돌하지 않으며, 객체의 고유한 프로퍼티를 정의할 때 유용함

10. Null 및 Undefined 리터럴

자바스크립트에서 null과 undefined는 각각 존재하지 않음을 나타내는 리터럴임.

let emptyValue = null; // null 리터럴
let undefinedValue = undefined; // undefined 리터럴

 

 

• null 리터럴: 의도적으로 값이 없음을 나타냄.
• undefined 리터럴: 변수가 선언되었지만, 값이 할당되지 않았음을 의미함.

---

요약:

• **리터럴(Literal)**은 값 그 자체를 코드에 직접 작성한 것임.
• 다양한 **자료형(숫자, 문자열, 불리언, 배열, 객체, 함수, 정규식 등)**에 대해 리터럴을 사용하여 값을 정의할 수 있음.
• 리터럴은 가독성을 높이고, 데이터를 쉽게 정의할 수 있는 방식으로, 프로그래밍에서 매우 중요한 개념임.