식별자(Identifier)
식별자(Identifier)란?
식별자는 코드 내의 변수, 함수, 혹은 속성(en-US)을 식별하는 문자열입니다. MDN참조
규칙
식별자를 지정하는 것에도 문법적인 규칙이 있다. 규칙을 위반할 시 에러가 발생한다.
1. 대소문자를 구분
예시
const name = '홍길동';
const Name = '이순신';
console.log(name, Name);
// 홍길동 이순신코드설명
위의 코드에서 name과 Name이 같을 것 같지만 JS에서는 대소문자를 구분하기 때문에 name과 Name은 다른 것이다.
2. 숫자로 시작 불가능
예시
const 1 = '1';
// Variable declaration expected
const 1one = '1';
// An identifier or keyword cannot immediately follow a numeric literal.코드설명
코드에서 1과 1one을 입력하면 빨간 줄이 뜬다. 문제가 있다는 것인데 마우스를 올려보면 이러한 문구가 떠있다.
| 변수명 | 에러문구 | 해석 |
|---|---|---|
| 1 | Variable declaration expected | 변수 선언이 필요함 |
| 1one | An identifier or keyword cannot immediately follow a numeric literal | 식별자 또는 키워드는 숫자 리터럴 바로 뒤에 올 수 없습니다. |
문구를 살펴보면 1은 우리의 생각으로 변수를 선언했는데 컴퓨터는 변수 선언이 필요하다고 한다. 이 말은 1, 즉 숫자는 변수의 식별자로 인식하지 않는다는 것이다. 또한 1one은 숫자 뒤에 식별자 또는 키워드가 오지 못한다고 한다. 즉, one은 식별자 또는 키워드로 인지하고 1은 그냥 숫자로 인지한다는 것이다.
공백 불가능
예시
let my food = '김치'코드설명
위의 코드처럼 입력하면 "',' expected."라는 에러가 뜬다.
변수 선언에 공백이 있어서 my와 food를 구분하려는 의도로 컴퓨터는 파악을 하여서 ','를 붙여 두개의 변수를 생성하라고 유도한다.
$, _, 숫자(0~9)로만 구성 가능
숫자로 시작하는 것은 안되지만 숫자가 포함하는 것은 가능하다.
예시
const $0a = "a";
const _0b = " b";
const a1b2c3 = "a1b2c3";
console.log($0a, _0b, a1b2c3);
// a b a1b2c3코드설명
이처럼 숫자로 시작은 안되지만 중간에 포함하면 아무 문제가 발생하지 않는다.
그리고 &와_는 식별자가의 시작값으로도 가능하다.
길이의 제한이 없다.
예시
const qwertyuiopasdfghjklzxcvbnm = "hello";
console.log(qwertyuiopasdfghjklzxcvbnm)
// hello코드설명
이처럼 식별자명의 길이는 제한이 없다.
이러면 개발자만 불편할듯..ㅋ
문자열을 식별자로 사용할 수 있다.
JS에서는 식별자를 문자열로 변환하는 방법은 없지만, 문자열을 식별자 처럼 쓸 수 있는 경우가 있다.
말로는 이해하기 힘드니 코드로 알아보자
예시
const obj = {
name: "홍길동",
["1. my favorite food"]: "김치",
};
console.log(obj["1. my favorite food"]);
코드설명
코드에서 보면 우리가 위에서 안된다고 했던 것들을 다 사용하고 있다.
- 숫자로 시작 불가능
- $, _, 숫자(0~9)로만 구성 가능
- 공백 불가능
그래도 가능한 이유는 '"1. my favorite food"'를 하나의 문자열로 보고 있고 이 문자열을 식별자로 사용하고 있기 때문이다.
사용을 하려면 브래킷([ ], 대괄호, Bracket)을 사용하여 선언을 해야하고 사용을 할때에도 브래킷을 이용하여 사용해야 한다.
네이밍 컨벤션(Naming convention)
위반한다고 에러가 나지는 않지만 많은 개발자들이 지키고 있어 가독성을 높여 유지보수성을 높인다.
상수(constant)는 대문자로만
// js에서 상수는 const 키워드를 사용한다.
const TEL_NUMBER = '010-1234-5678';
const COUNT = '287';코드설명
상수, 즉 재할당을 할 수 없는 변수에는 대문자로만 식별자를 지정한다. 또한 스네이크표기법(Snake case)과의 짬뽕으로 단어를 구분할때 '_'를 넣어서 구분해 준다.
장점
이렇게 작성하면 협업이나 유지보수할때 대문자로된 식별자를 보면 '대문자로 되어 있으니 상수구나! 대문자여서 상수니깐 재할당이 안되겠구나' 라는 생각을 할 수 있게 된다.
식별자의 역할마다의 표기법
카멜 케이스(Camel Case)
낙타표기법으로, 카멜 케이스는 낙타등처럼 중간에 툭 튀어나온 것처럼 생겨서 이름이 붙여졌다.
let personName = '홍길동'위의 코드처럼 식별자의 뜻은 사람의 이름을 뜻한다. 하지만 식별자에 공백이 들어갈 수 없기에 두 단어를 합치고 두번째 단어부터는 첫 글자를 대문자로 적어주어 구분을 지어준다.
파스칼 케이스 (Pascal Case)
파스칼 케이스는 쌍봉낙타로 카멜케이스에서 첫글자를 대문자로 표기해주는 표기법이다.
class Person {}주로 class의 식별자로 많이 사용한다.
스네이크 케이스 (Snake case)
상수에서 봤듯이 단어를 이어주기 위해 _를 붙이는 표기법이다.
let person_name = '홍길동';