Sentio, ergo sum
LecturesStudies

리터럴(Literal)이란?

2020. 05. 01. 13:41 study/gardenist#Javascript#Literal

위키피디아의 정의를 빌리자면 리터럴의 의미는 아래와 같습니다.

컴퓨터 과학 분야에서 리터럴(literal)이란 소스 코드의 고정된 값을 대표하는 용어다. 거의 모든 프로그래밍 언어는 정수, 부동 소수점 숫자, 문자열, 불린 자료형과 같은 용어를 가지고 있다. 어떤 언어는 열거 타입이나, 배열, 자료형, 객체와 같은 용어도 있다. 리터럴과 대조적으로, 고정된 값을 가질 수 있는 변수나 변경되지 않는 상수가 있다. 다음의 예제와 같이, 리터럴은 변수 초기화에 종종 사용된다.

Literal 이라는 단어의 뜻은 “문자 그대로의”이므로, 리터럴로 나타낸 어떤 값은 글자 그대로의 값이 됩니다.

1 이라고 썼다면 글자 그대로 숫자 1, “1”이라고 썼다면 문자열로써의 “1”이 됩니다.

리터럴은 그 의미가 변하지 않습니다. 1은 1일 뿐 1 = 2라고 해서 1이 2가 되지는 않으며, 변하지 않는 값이라는 특징을 갖습니다.

자바스크립트의 리터럴

1. null 리터럴

null

2. boolean 리터럴

true
false

3. 숫자 리터럴

// 10진법
// 0~9로 표현
123
3.14

// 2진법 (ES2015 이상) - Binary Number의 B
// 0~1로 표현
0b10101
0B11100010

// 8진법 (ES2015 이상) - Octal Number의 O
// 0~7로 표현
0O761
0o12472
// 0O가 아닌 0으로 시작해도 되지만 8~9가 들어가면 10진수로 변환됨
0812 // -> 10진수 812
0513 // -> 8진수 331
// 0O로 시작하면 8진수 범위를 벗어나면 SyntaxError 발생하므로 명확

// 16진법 - Hexadecimal Number의 X
0xFFFF // -> 65535
0x10000 // -> 65536

4. 객체 리터럴

{ a: 10 }

let value = 10; 
{ value: value }

// ES2015 에서 짧게 쓰기
{ value } // { value: value }와 동일

5. 배열 리터럴

[1, 2, 3]
[1, [2, [3] ] ]
[1, 2, 0xFF, 3.14, { a: 10 }, [1, 2, 3] ]

6. 문자열 리터럴

'Hello'
"World"

// 16진수 이스케이프 시퀀스
// \x00 ~ \xFF 까지 표현 가능
'\xb1' // ± 문자

// 유니코드 이스케이프 시퀀스
// 유니코드의 U+0000 ~ U+FFFF의 코드를 표현
// U+FFFF를 초과한 U+10000 ~ U+10FFFF를 유니코드 이스케이프 시퀀스로
// 표현하기 위해서는 Surrogate pair로 표현가능
// String.fromCharCode(), String.prototype.charCodeAt()
'\u00b1' // ± 문자

// 유니코드 코드 포인트 시퀀스
// 유니코드의 코드 포인트를 Surrogate pair로 변환 없이 그대로 표현 가능
'\u{00b1}' // ±
'\u{1f606}' // 😆

// 긴 문자열 표현 시 + 연산자로 문자열 붙이기
let script = "Bernardo: Who's there?" +
  "Francisco: Nay, answer me. Stand and unfold yourself" +
  "Bernardo: Long live the King!"
// 또는 줄 끝에 슬래시 기호 넣기
let script = "Bernardo: Who's there? \
Francisco: Nay, answer me. Stand and unfold yourself \
Bernardo: Long live the King!"

7. 정규표현식 리터럴 - MDN - RegExp

/hello/

// g - global, 가능한 모든 일치 항목에 대해 테스트
// g가 없는 경우 첫 번째 일치여부만 확인
/(hello)+/g

// i - ignore case, 대소문자 구분하지 않고 비교
// /h/i 인 경우 h와 H가 모두 패턴에 일치됨
/hello/i 

// 슬래시(/)를 넣으려면 역슬래시로 이스케이프
// 이 외에도 정규표현식으로 쓰이는 문자는 역슬래시로 이스케이프
/hello\// 
/\./

8. 템플릿 리터럴 - MDN - 템플릿 리터럴

// ` 문자로 둘러싼 문자열 - `는 Back quote 또는 Backtick으로 읽음
`Hello World`

// ` 문자 이스케이프
`\`` // == "`"

// 표현식 삽입(보간이라고 하지만 단어가 와닿지 않음..)
// => Expression Interpolation
let name = "Gardenist";
// 일반적인 문자열 리터럴의 경우
"Hello! " + name; // -> "Hello! Gardenist"
// 템플릿 리터럴의 경우
`Hello! ${name}`; // -> "Hello! Gardenist"

// 여러 줄에 걸친 템플릿 리터럴
let longSentence = `안녕하세요
Gardenist
여러분`
// == "안녕하세요\nGardenist\n여러분"

// 줄바꿈이 생기지 않게 하려면
let longSentence = `안녕하세요\
Gardenist\
여러분`
// == "안녕하세요Gardenist여러분

let longSentence = `안녕하세요\
    Gardenist\
    여러분`
// == "안녕하세요    Gardenist    여러분"
// 줄 바꿈 시 앞 부분에 공백이 있으면 공백도 포함됨

References

  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Lexical_grammar#리터럴