자바스크립트 - 객체(Object), Dot notation vs Bracket notation

Object

---

• 참조형 데이터타입의 한 종류로, key와 value로 구성된 property들의 집합이다.
• 객체 안에 객체 또는 배열 중첩이 가능하다.
• 배열과 달리 index(순서)가 없다.

let mySelf = {
	name: 'Yejee Cho', 
	location: {country: 'South Korea', city: 'Seoul'},
	age: 28
}

• 객체에 key와 value를 추가, 수정 및 삭제하는 방법 : object.key = value
  

let mySelf = {
	name: 'Yejee Cho',
	location: {country: 'South Korea', city: 'Seoul'},
	age: 28
}

//추가
mySelf.pets = ['dumi', 'bell']
console.log(mySelf)
/*
{
	name: 'Yejee Cho',
	location: {country: 'South Korea', city: 'Seoul'},
	age: 28,
	pets: ['dumi', 'bell']
}
*/

//수정
myself.name = 'Jenny'
console.log(mySelf)
/*
{
	name: 'Jenny',
	location: {country: 'South Korea', city: 'Seoul'},
	age: 28,
	pets: ['dumi', 'bell']
}
*/

//삭제
delete mySelf.location
console.log(mySelf)
//{ name: 'Yejee', age: 28, pets: [ 'dumi', 'bell' ] }

• 배열처럼 index number가 있는 것이 아니기 때문에 key값을 이용해서 value에 접근할 수 있다. 하지만 객체 안에 배열이 value값으로 들어가 있을 경우 배열 안의 요소에 접근하기 위해서는 index넘버를 같이 활용한다.

let mySelf = {
	name: 'Yejee Cho',
	location: {country: 'South Korea', city: 'Seoul'},
	age: 28,
	pets: ['dumi', 'bell']
}

// 1번째 방법 - dot notation
console.log(mySelf.name) // Yejee Cho
console.log(mySelf.location) // {country: 'South Korea', city: 'Seoul'}
console.log(mySelf.location.city) // Seoul
console.log(mySelf.pets[1]) // bell

//2번째 방법 - bracket notation
console.log(mySelf['name'] // Yejee Cho
console.log(mySelf['location']['country']) // South Korea
console.log(mySelf['pets'][0]) // dumi

💡Dot notation(점표기법) vs Bracket notation(괄호표기법)

dot notation이 훨씬 더 간편하지만 왜 두 가지 방법 모두 사용할 줄 알아야 할까..? 같이 알아보자!^^

Dot notation	Bracket notation
변수 포함 불가능	변수, 공백 사용 가능
property 식별자는 오직 알파벳만 가능(_ & $ 포함)	property 식별자는 문자열 혹은 문자열을 참조하는 변수
숫자로 시작 불가능	숫자로 시작 가능

1. Bracket notaion을 통해서만 변수를 포함하는 것이 가능하다.

const person1 = {
    firstName: 'Sarah',
    lastName: 'Davis',
    age: 27,
    job: 'Doctor',
    state: 'Texas'
}

const myValue = 'job' 

//dot notation 사용시
console.log(person1.myValue) //undefined

//bracket notation 사용시
console.log(person1[myValue]) // Doctor

const person1 = {
    firstName: 'Sarah',
    lastName: 'Davis',
    age: 27,
    job: 'Doctor',
    state: 'Texas'
}

const myValue = 'Name'
console.log(person1['first' + myValue], person1['last' + myValue] 
// Sarah Davis

여기서 중요한 것은 키 값을 작은 따옴표로 묶는다는 것이다. 그래야 bracket 접근 방법의 모양이 되기 때문이다.

2. Dot notation은 (_ & $를 포함한) 알파벳만 property 식별자로 사용할 수 있지만, Bracket notation은 문자열 혹은 문자열을 포함하는 변수를 property 식별자로 사용할 수 있다.

const person1 = {
	'my Favorite Food': 'pizza'
}

console.log(person1.my Favorite Food) // error
console.log(person1['my Favorite Food') // pizza