.svg)
이번 게시물을 시작으로, JavaScript Essential에 대해 간략하게 정리해보고자 합니다. JS Essential 시리즈를 통해, 자바스크립트 이론에 대한 부분을 꼼꼼히 정리할 생각입니다.
해당 게시물은 도서 <모던 자바스크립트 Deep Dive>와 패스트캠퍼스 강의 "김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential"를 참고하여 작성되었습니다.
식별자?
MDN의 공식 문서부터 살펴보도록 하겠습니다. 제일 첫 줄에 식별자의 정의가 나와 있습니다.
코드 내의 변수, 함수, 혹은 속성을 식별하는 문자열
쉽게 말해서 자바스크립트를 사용하면서 우리가 부품들에 붙이는 이름표라고 간주할 수 있겠습니다.
다음 내용을 읽어보죠.
식별자는 대소문자를 구분하며, 유니코드 글자 및 숫자, 그리고 $와 _로 구성할 수 있습니다.
// 당연히 아래 두 변수는 다른 식별자를 가지고 있습니다.
const aB = '';
const Ab = '';
// 느낌표를 넣은 변수는 에러가 뜨겠죠. 사용할 수 없는 특수 문자를 사용했으니까요.
const $dollar = "$";
const !dollar = "$";
// 숫자를 식별자에 포함할 수는 있어도, 숫자로 시작하면 안됩니다!
const number1 = 1;
const 1number = 1;이는 식별자 네이밍 규칙에 해당하는 내용인데, 사실 우리가 코드를 다룰 때 쓰는 IDE들에서 이러한 네이밍 규칙들을 다 걸러주기 때문에, 굳이 외울 필요는 없어 보여요.
다시 식별자 설명으로 돌아와서, 마지막 줄을 보면 이런 내용이 있습니다.
식별자는 코드의 일부이지만 문자열은 데이터이기 때문에, 식별자와 문자열은 다릅니다. JavaScript에서 식별자를 문자열로 변환하는 방법은 없지만, 어떤 경우 문자열을 분석해 식별자로 사용할 수 있습니다.
일단 첫 번째 문장에, 식별자와 문자열은 서로 다른 것이다라는 부분은 사실 이해하기 어렵지 않습니다.
당연히 식별자는 자바스크립트 내 요소들을 구분하기 위해 쓰는 이름표이고, 문자열이라는 것은 실제 데이터 형태를 지칭하는 것이니까요.
두 번째 문장에서는 식별자를 문자열로 변환하는 방법은 없지만, 문자열은 분석후 식별자로 사용할 수 있다고 합니다.
이 부분이 다소 어렵게 다가오네요. 코드를 통해 이를 좀 더 자세하게 알아봅시다.
// 다음과 같은 객체가 있다고 생각해 봅시다.
const a = {
age: 10,
['myName'] : 'Kim'
}
// 객체 내에 존재하는 key들을 통해서 우리는 실제 value에 접근할 수 있습니다.
console.log(a.age) // 10
console.log(a.myName) // 'Kim'위 코드 블럭에서, 우리는 ['myName']이라는 key를 접근하여 실제 값을 얻어 내고 있죠.
이 경우, 객체 안의 'myName'은 원래 데이터였지만 결국 식별자로 작동한다는 것을 알 수 있습니다.
그런데 다음과 같은 경우는 어떻게 될까요?
const b = {
age: 10,
['123myName'] : 'Kim'
}
console.log(b.123myName) // ??보시는 것과 같이, 객체 내에 있는 123myName은 식별자 네이밍 규칙을 준수하고 있지 않습니다.
아까 살펴본 것 처럼 식별자는 숫자로 시작할 수 없죠.
이런 경우에는 다음 코드 블럭과 같이 접근해야 실제 식별자처럼 작동합니다.
console.log(b.['123myName'])식별자 컨벤션
문법 및 이론적인 내용은 위에서 다루어 봤습니다. 다음으로는 식별자와 관련된 일부 관습을 한 번 알아보겠습니다.
물론 식별자는 네이밍 규칙만 잘 준수하면 되고, 반드시 컨벤션을 지켜야 하는 것은 아닙니다. 어디까지나 컨벤션이니까요.
다만 대다수의 개발자들이 사용하는 컨벤션이니까, 알아 두고 있으면 유용할 뿐만 아니라 코드를 잘 짜는 척 흉내도 낼 수 있지 않겠어요?
- 상수를 담은 식별자는 대문자로!
굉장히 오래된 컨벤션입니다. 상수를 담고 있는 변수는 조작되어지지 않고 언제나 사용만 될텐데, 대문자로 식별자를 만들어서 상수를 담은 변수를 알아보기 쉽게 하기 위해 이러한 컨벤션이 생겨났습니다.
const AGE = 10;- 여러 단어가 조합된 식별자는 Camel Case로!
이는 자바스크립트를 접한지 얼마 되지 않은 분들도 많이 보셨을 겁니다. 식별자 네이밍을 하다 보면, semantic하게 짓기 위해 여러 단어를 붙여서 만드는 경우도 많죠. 이 경우에, 가장 앞 글자는 소문자로 하되, 다음에 오는 단어의 첫 글자를 대문자로 적어주는 Camel Case로 식별자를 만들어 줍니다.
const myName = 'Kim';
const addNumberFunction() {
return;
}마치며...
간단하게 자바스크립트 식별자에 대해 알아 보았습니다.
식별자는 사실 문법적으로 아주 중요하거나 이해하기 어려운 부분은 절대 아닙니다. 다만, 앞으로 자바스크립트 이론을 꾸준히 정리해나가는 과정에 있어서 일종의 웜업 같은 느낌으로 정리했네요.
앞으로도 제 무기가 될 자바스크립트 이론들을 한땀 한땀 제 손으로 적어내려가면서, 제 것으로 만들고 싶은 마음이 큽니다.
나중에 가서도 제 벨로그의 첫 번째 게시물을 보면서, 꾸준히 공부하는 개발자의 초심을 잃지 않고 싶습니다.
혹시 게시물 내용에 궁금하신 점이나, 잘못된 사항이 있다면 언제든 댓글 남겨주세요!
