객체 프로퍼티 접근.md

객체 프로퍼티 접근

1. 프로퍼티 키

프로퍼티 키는 일반적으로 문자열(빈 문자열 포함)을 지정한다. 프로퍼티 키에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다. 또한 문자열 타입의 값으로 수렴될 수 있는 표현식도 가능하다. 프로퍼티 키는 문자열이므로 따옴표(‘’ 또는 ““)를 사용한다. 하지만 자바스크립트에서 사용 가능한 유효한 이름인 경우, 따옴표를 생략할 수 있다.

프로퍼티 값은 모든 값과 표현식이 올 수 있으며 프로퍼티 값이 함수인 경우 이를 메소드라 한다.

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male',
  1: 10,
  function: 1 // 예약어는 사용하지 말아야 한다.
};

console.log(person);

Java Script 예약어

abstract arguments boolean break byte case catch char class const continue debugger default delete do double else enum eval export extends false final finally float for function goto if implements import in instanceof int interface let long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var void volatile while with yield

부가 정보

• 프로퍼티 키 first-name에는 반드시 따옴표를 사용해야 하지만 first_name에는 생략 가능하다. first-name은 자바스크립트에서 사용 가능한 유효한 이름이 아니라 ‘-‘ 연산자가 있는 표현식이기 때문이다.

• 표현식을 프로퍼티 키로 사용하려면 키로 사용할 표현식을 대괄호로 묶어야 한다. 이때 자바스크립트 엔진은 표현식을 평가하기 위해 식별자 first를 찾을 것이고 이때 ReferenceError가 발생한다.

2. 프로퍼티 값 읽기

프로퍼티 키가 유효한 자바스크립트 이름이고 예약어가 아닌 경우 프로퍼티 값은 마침표 표기법, 대괄호 표기법 모두 사용할 수 있다

const obj = {
  123: 'digit',
  123name: 'start with digit',
  name123: 'does not start with digit',
  $name: '$ sign',
  name-123: 'hyphen',
  NAME: 'upper case',
  name: 'lower case'
};

2.1. 점(.) 표기법

obj.123;      // ❌ SyntaxError
obj.123name;  // ❌ SyntaxError
obj.name123;  // ✅ 'does not start with digit'
obj.$name;    // ✅  '$ sign'
obj.name-123;  // ❌ SyntaxError
obj.'name-123';// ❌ SyntaxError
obj.NAME; // ✅ 'upper case'
obj.name; // ✅ 'lower case'

이점 : 읽기가 쉬우며 입력하는 것이 훨씬 빠름

한계 : 유효한 식별자로만 작동

식별자 규칙

• 키워드를 사용하면 안된다.
• 공백 문자를 포함할 수 없다.
• $와 _ 허용됨
• 숫자 (0–9)는 괜찮지만 숫자로 시작할 수 없다.

2.2. 대괄호([ ]) 표기법

obj['123'];     // ✅ 'digit'
obj['123name']; // ✅ 'start with digit'
obj['name123']; // ✅ 'does not start with digit'
obj['$name'];   // ✅ '$ sign'
obj['name-123']; // ✅ 'does not start with digit'
obj['NAME']; // ✅ 'upper case'
obj['name']; // ✅ 'lower case'

프로퍼티 이름이 유효한 자바스크립트 이름이 아니거나 예약어인 경우 프로퍼티 값은 대괄호 표기법으로 읽어야 한다.

대괄호 내에 들어가는 프로퍼티 이름은 반드시 문자열이어야 한다. 객체에 존재하지 않는 프로퍼티를 참조하면 undefined를 반환한다.

정리

점표기법	대괄호표기법
프로퍼티 식별자는 오직 알파벳만 가능( _ & $ 포함)	프로퍼티 식별자는 문자열 혹은 문자열을 참조하는 변수
숫자로 시작할 수 없음	숫자로 시작할 수 있음
변수를 포함할 수 없음	변수, 공백 사용 가능
OK ㅡ obj.prop_1, obj.prop$	OK ㅡ obj["1prop"], obj["prop name"]
NOT OK ㅡ obj.1prop, obj.prop name