객체에 접근하여 값을 변경하기 - 속성접근자

객체에 접근하는 방법으로는 점 표기법과 괄호 표기법이 존재합니다.

 

1. 점 표기법

점 표기법은 접근할 객체 변수뒤에 닷(.)을 입력한 뒤에 key값을 입력하는 형태를 가집니다.

• 데이터 값 가져오기

const obj = {'name' : 'kim', 'age' : 20, 'phone': '01012345678'}
console.log(obj.name) // kim
console.log(obj.age) // 20
console.log(obj.phone) // 01012345678

• 데이터 추가하기

const obj = {'name' : 'kim', 'age' : 20, 'phone': '01012345678'}
// obj.추가할key = 추가할value
obj.like = 'doll'
console.log(obj) // {'name' : 'kim', 'age' : 20, 'phone': '01012345678', 'like':'doll'}

• 데이터 값 변경하기

const obj = {'name' : 'kim', 'age' : 20, 'phone':'01012345678', 'like':'doll'}
obj.age = 21
console.log(obj) // {'name' : 'kim', 'age' : 21, 'phone': '01012345678', 'like':'doll'}

const는 데이터의 값을 수정할 수 없다 했는데 이렇게 데이터 값을 변경할 수 있는 건가요?
원래대로라면 const는 재할당과 재선언이 불가능한데요. 단 const를 객체로 생성했을 때는 속성 자체를 변경하는 것은 불가능 하지만 배열, 객체 재의 값은 변경할 수 있습니다.

 

2. 괄호 표기법

괄호 표기법에서는 key값으로 문자열이나 symbol을 사용할 수 있는데요. 변수 뒤에 대괄호를 넣고 그 안에 key값을 입력해 주어 데이터에 접근을 할 수 있습니다.

• 데이터 값 가져오기

const obj = {'name' : 'kim', 'age' : 20, 'phone': '01012345678'}
console.log(obj['name']) // kim
console.log(obj['age']) // 20
console.log(obj['phone']) // 01012345678

• 데이터 추가하기

const obj = {'name' : 'kim', 'age' : 20, 'phone': '01012345678'}
// obj['추가할key값'] = 추가할 value 값
obj['like'] = 'doll'
console.log(obj) // {'name' : 'kim', 'age' : 20, 'phone': '01012345678', 'like':'doll'}

• 데이터 값 변경하기

const obj = {'name' :'kim', 'age' : 20, 'phone': '01012345678', 'like':'doll'}
obj['age'] = 21
console.log(obj) // {'name' : 'kim', 'age' : 21, 'phone': '01012345678', 'like':'doll'}

 

 

 

---

객체에 데이터를 추가하면 맨 뒤에만 생성이 되는데 맨 앞으로는 가져올 수 없는 걸까요?

그건 전개(spread) 연산자를 이용하여 값을 추가할 수 있습니다.

const obj = {'name' :'kim', 'age' : 20, 'phone': '01012345678', 'like':'doll'}
const newObj = {'job' : 'student', ...obj} 
console.log(newObj) // {'job':'student','name':'kim', 'age' : 20, 'phone': '01012345678', 'like':'doll'}

이렇게 데이터를 삽입하는 방식도 있으니 알아두면 좋을 것 같습니다.😅