[Javascript] 식별자와 프로퍼티

https://pixabay.com/ko/photos/해바라기-꽃들-노란-꽃-꽃잎-6515860/

오늘 linter를 이용해서 컨벤션의 어긋난 코드를 수정하면서, Airbnb Javascript Style Guide에서 아래의 규칙을 발견했습니다.

3.6 Only quote properties that are invalid identifiers. eslint: quote-props

해당 규칙은 객체(object) 내의 프로퍼티의 이름과 관련된 규칙으로, Javascript 식별자 네이밍 규칙을 준수하는 프로퍼티 이름은 '(따옴표)를 쓰지 않아도 된다는 규칙입니다.

 

해당 영어 구문의 indentifiers을 보고 식별자가 매칭이 안돼서 번역기를 돌렸습니다.

따라서 'identifier === 식별자'를 각인시키는 겸, 이번 글에서는 Javscript의 용어인 식별자와 프로퍼티에 대해 정리하려 합니다.

 

식별자(identifier)

• 코드 내의 변수, 함수, 프로퍼티를 구분하는 문자열
  • 변수의 이름 또는 함수의 이름이 식별자이다.
  • 식별자는 '변수 또는 함수 등이 저장된 메모리 공간에 쉽게 접근하기 위한 문자열'로 생각할 수 있다

const testVal = 1; // testVal이 식별자이다.

function testFunction() {
  // testFunction이 식별자이다.
  console.log('this is function');
}

 

식별자 네이밍 규칙

Javascript에서 식별자의 이름을 지을 때는 아래의 규칙을 따라야 합니다.

 

• 식별자는 $(달러), _(언더스코어) 또는 특수 문자를 제외한 문자로 시작해야 합니다.
• 그 이후에는 $(달러), _(언더스코어), 특수 문자를 제외한 문자 또는 숫자(0~9)를 사용할 수 있습니다.
• Javascript의 예약어는 식별자로 사용할 수 없습니다.
  • 예약어의 목록은 여기서 확인 가능합니다.

 

식별자 컨벤션

네이밍 컨벤션은 많은 사람들이 이용하는 컨벤션인 Airbnb Javascript Style Guide에도 명시되어 있습니다.

 

Airbnb Javascript Style Guide의 23.2번과 23.3번 규칙에 의하면 네이밍 컨벤션은 아래와 같습니다.

• 함수, 객체(object), 인스턴스(instance)는 camelCase를 사용하라
  • 주로 변수의 식별자도 camelcase 사용합니다.
• 클래스(class)는 PascalCase를 사용하라

 

프로퍼티(property)

MDN 문서에서는 객체를 아래와 같이 정의합니다.

객체(object)는 관련된 데이터와 함수의 집합입니다.

각각의 데이터와 함수를 객체의 프로퍼티라고 하며, 프로퍼티는 키와 값으로 구성되어 있습니다.

* 보통, 프로퍼티 중 함수와 같이 호출할 수 있는 것들을 메서드라고 합니다. 해당 내용은 여기에 명시되어 있습니다.

 

프로퍼티의 특징은 아래와 같습니다.

• 프로퍼티의 키로는 모든 문자열이 사용될 수 있습니다.
  • 다만, 식별자의 네이밍 규칙을 준수하지 않은 프로퍼티 키는 '(따옴표)로 묶어줘야 합니다.

const testObject = {
  testKey: 123,
  '^_^test': 100, // 식별자 네이밍 규칙에 어긋나기 때문에 키를 '(따옴표)로 묶어줬다.
};

console.log(testObject.testKey); // 결과값: 123
console.log(testObject['^_^test']); // 결과값: 100

 

• 프로퍼티의 값으로는 모든 값이 올 수 있다.

 

---

참고 자료

https://developer.mozilla.org/ko/docs/Glossary/Identifier

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#variables

https://mathiasbynens.be/notes/javascript-identifiers-es6

https://poiemaweb.com/js-data-type-variable

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Lexical_grammar#키워드

https://github.com/airbnb/javascript#naming-conventions

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics

 

읽어 주셔서 감사합니다 :)

잘못된 부분이 있다면 댓글로 편히 알려주세요😊