[자바스크립트] 리터럴(literal) 쉽게 이해하기 편. with javascript

안녕하세요. 신기한 연구소입니다.

자바스크립트(javascript)를 공부하면 초반에 만나게 되는 용어가 있습니다.

바로 리터럴인데요. (literal)

책의 설명을 읽어도 처음에는 이해가 잘 안 가더군요.

정확히 무엇을 가지고 리터럴이라고 하는지 쉽게 이해가 되도록 설명해보겠습니다.

 

흰 티에 청바지를 입은 어떤 사람(변수)이 있습니다.

직업이 무엇인지 추측이 가나요? 학생인가? 명확하지 않습니다. 

그냥 어떤 사람입니다. (undefined)

이제 그 사람이 피팅룸에 들어가서 경찰 제복을 입고 나왔습니다.

직업이 무엇인지 추측이 됩니다. 경찰이겠지요.

경찰 제복, 경찰근무복을 입고 있으면 경찰임을 알게 되고,

축구선수 복장을 하고 있으면 축구선수임을 알게 됩니다.

어떤 옷을 입냐에 따라 직업을 판단할 수 있게 되었습니다.

이때 종류별 옷이 바로 리터럴입니다.

경찰 리터럴은 경찰제복, 경찰 근무복이 되겠지요.

군인들이 입는 군복은 경찰 리터럴이 아닙니다.

군인 리터럴이겠지요.

 

리터럴 기준에서 변수를 본다면

리터럴은 변수의 형(type)을 정하는 능력이 있습니다.

 

위키백과를 보면 '컴퓨터 과학 분야에서 리터럴이란 소스 코드의 고정된 값을 대표하는 용어'라고 되어 있습니다.

고정된 값을 대표한다는 의미는 변수의 형(type)을 의미한다고 볼 수 있습니다.

자바스크립트에서 리터럴의 종류는 어떤 것이 있을까요?

 

배열 리터럴, 불리언 리터럴, 숫자 리터럴, 부동 소수점 리터럴, 문자열 리터럴, 정규식 리터럴, 객체 리터럴이 있습니다.

 

var myVar;

 

자바스크립트 변수가 여기 있습니다.

여러분이 보기에 myVar는 어떤 형(타입) 같나요?

정답은 알 수 없습니다.

값이 할당되어 초기화가 되면 어떤 형(타입)인지 확실해질 겁니다.

만약 불리언 타입으로 지정하고 싶다고 가정해 봅니다.

 

myVar = 'boolean';

 

문자열 'boolean' 값을 myVar에 할당했습니다.

불리언 타입으로 지정하고 싶었지만 초기화 값으로 문자열 리터럴을 사용했네요.

그럼 myVar는 문자열 리터럴을 사용했기에 불리언 타입이 될 수 없습니다.

정말 불리언 타입으로 만들고 싶었다면...

불리언 리터럴인 true나 false로 초기화(할당)했어야 하거든요.

 

배열 리터럴에 대해 잠깐 살펴보겠습니다.

 

var myArr;

 

우선 myArr를 선언했습니다. 당연히 값이 할당이 안되었기에 형(타입)을 알 수 없습니다.

Arr이라는 이름에 걸맞게 배열로 초기화해보겠습니다.

배열로 초기화하기 위해서는 배열 리터럴을 사용해야 합니다.

우선 자바스크립트에서 배열은 [ ]를 사용합니다.

그리고 [ 와 ] 사이에 , (컴마)를 기준으로 값을 할당하면 됩니다.

값은 문자열, 숫자 등 원하는 값을 넣으면 됩니다.

 

myArr = ['a', 'b', 'c'];

 

할당을 했습니다. 그런데 값을 보니 문자(열)로 초기화를 했군요.

그럼 문자열 리터럴로 myArr은 문자형이 된 걸까요?

아닙니다. 문자들은 , (컴마)로 구분되고 [ ] 안에 갇혀 있습니다.

[ ]와 , (컴마)가 바로 배열 리터럴의 핵심입니다.

이런 형식으로 초기화를 하는 값을 배열 리터럴이라고 합니다.

 

myArr = ['a', , 'c];

 

이 또한 배열 리터럴로 초기화를 해서 myArr를 배열 타입으로 만들었습니다.

그런데 중간이 비어있군요.

배열 초기화 시 빈 형태의 값을 넣을 수 있습니다.

그럼 myArr[0], myArr[1], myArr[2]는 어떤 값이 나올까요?

배열 []의 숫자는 배열 인덱스(index)라고 하고 해당 위치를 말합니다.

첫 번째 인덱스는 0으로 1씩 증가하게 됩니다.

myArr[0]은 배열의 첫 번째 값으로 'a'입니다.

myArr[1]은 배열의 두 번째 값인데 비어 있기에 변수 선언 때처럼 undefined값이 들어갑니다.

myArr[2]은 배열의 세 번째 값으로 'c'입니다.

myArr[3]은 존재하지 않기에 오류가 납니다.

 

지금까지 리터럴이 무엇인지에 대해 알아봤습니다.

이해가 되셨나요?

누군가 리터럴에 대해 묻거나 이해하기 힘들어한다면

여러분이 도와주시면 됩니다.

 

다음 포스팅에서는 각 리터럴의 범위에 대해 자세히 알아보겠습니다.

어떤 값을 넣어야 해당 리터럴이 되는지 같이 살펴보도록 해요.