💎 프로퍼티(property)

: 키(key)와 값(value)으로 구성된다.

var example = {
	keyname : "value"
}

---

🗝️ 프로퍼티 키(property key)

: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값을 의미한다.

🐾 식별자 네이밍 규칙

프로퍼티의 식별자 역할을 하지만 식별자 네이밍 규칙을 항상 따라야 하는 건 아니다. 그래도 식별자 네이밍 규칙을 따를 것을 권장한다!

- 식별자 네이밍 규칙을 따른 경우

let person = {
	name : "Kiara",
  	age : 25
};

console.log(person);		//{ name: 'Kiara', age: 25 }

- 식별자 네이밍 규칙을 따르지 않은 경우

let person = {
	'My-name' : "Kiara",
  	'My-age' : 25			
};

console.log(person);		//{ 'My-name': 'Kiara', 'My-age': 25 }

일반적으로 -는 연산자로 인식되기 때문에 '' 없이 My-name이나 My-age를 키로 작성한다면 Syntax Error가 발생할 것이다. 따라서 식별자 네이밍 규칙을 따르지 않을 때는 반드시 따옴표를 사용해야 한다.

🐾 프로퍼티 키 동적 생성

빈 객체를 할당받은 변수 obj와 문자열을 할당받은 변수 key를 이용하여 동적으로 프로퍼티의 키를 생성해보자.

var obj = {};
var key = "hello";

obj[key] = "world";		//객체 obj의 프로퍼티 키를 "hello"로, 값을 "world"로 저장함

console.log(obj);		//{ hello : 'world' }

식별자 네이밍 규칙을 따르지 않는 문자열을 변수 key에 저장해도 정상적으로 출력될까?

var obj = {};
var key = "hello-everyone";

obj[key] = "world";

console.log(obj);		//{ 'hello-everyone': 'world' }

객체를 출력한 결과를 보면, 프로퍼티 키가 ''를 포함하여 정상적으로 출력된 걸 확인할 수 있다.

🐾 빈 문자열

const foo = {
  '' : '' // 빈 문자열을 키와 값으로 받을 수 있다.
};
console.log(foo); // {'': ''}

🐾 암묵적 타입 변환

키에 문자열이나 심벌 값 외의 값을 사용하면 문자열로 암묵적 타입 변환이 이뤄진다.

let foo = {
	0: 1,
  	1: 2,
  	2: 3
};

console.log(foo); // { 0: 1, 1:2, 2:3 }

다음 코드에서 키로 사용된 숫자 리터럴 0, 1, 2,는 따옴표는 붙지 않지만 문자열로 변환된 값이다.

🐾 중복 선언 시

에러 발생 없이 나중에 선언된 프로퍼티가 이전에 선언한 프로퍼티를 덮어쓴다.

let day = {
	today : "Monday",
  	today : "Tuesday"
};

console.log(day);	//{today: 'Tuesday' }

---

🗝️ 프로퍼티 값(property value)

: Javascript에서 사용할 수 있는 모든 값

🐾 프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값을 할당하면 값이 갱신된다.

let coffee = {
  type : "americano"
};

coffee.type = "latte";
console.log(coffee.type); 	//latte

🐾 프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 프로퍼티 값이 할당된다.

let menu = {
  coffee : "americano"
};

menu.dessert = "choco cake"; 		//프로퍼티 동적 생성
console.log(menu); 	//{ coffee: 'americano', dessert: 'choco cake' }

🐾 프로퍼티 삭제 : delete 연산자 이용

let menu = {
  coffee : "americano"
};

menu.dessert = "choco cake"; 

delete menu.coffee;	

console.log(menu);			//{ dessert: 'choco cake' }

delete 연산자는 객체의 프로퍼티를 삭제할 수 있고, 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 한다.

let menu = {
  coffee : "americano"
};
delete menu.dessert;	
console.log(menu); 			//{ coffee: 'americano' }

존재하지 않는 프로퍼티를 삭제하려고 하면 에러 없이 무시된다.

---

🗝️ 프로퍼티 접근 방식

프로퍼티 키가 식별자 네이밍 규칙을 따를 때 사용할 수 있다!!

🐾 마침표 표기법

: 마침표 프로퍼티 접근 연산자.를 사용하는 방식

let person = { 
  name : "Kiara"
};
//마침표 표기법에 의한 프로퍼티 접근
console.log(person.name);		//Kiara

let ex = { 
  1: 0
};
//대괄호 표기법에 의한 프로퍼티 접근
console.log(ex.1);			//SyntaxError
console.log(ex.'1');		//SyntaxError

프로퍼티 키가 숫자로 이뤄진 문자열의 경우에는 따옴표 표기법을 사용하면 에러가 발생한다.

🐾 대괄호 표기법

: 대괄호 프로퍼티 접근 연산자[...]를 사용하는 방식

let person = { 
  name : "Kiara"
};
//대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']);		//Kiara

대괄호 표기법을 사용할 때는 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 따옴표로 감싼 문자열이어야 한다. 쉽게 말하면 접근하고자 하는 프로퍼티의 키 앞뒤에 따옴표를 꼭 써야 한다는 뜻이다.

let person = { 
  name : "Kiara"
};
//대괄호 표기법에 의한 프로퍼티 접근
console.log(person[name]);		//ReferenceError 발생

따옴표로 감싸지 않은 경우에는 식별자로 해석하여 에러가 발생한다.

let ex = { 
  1: 0
};
//대괄호 표기법에 의한 프로퍼티 접근
console.log(person[1]);			//0
console.log(person['1']);		//0

그러나 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표를 생략할 수 있다.

---

Ref.
모던 자바스크립트 Deep Dive