객체에 대해서 알아보자.

객체는 중괄호({}) 속에 key 와 value를 넣어서 만들 수 있습니다.

obj = {'name': 'sangkwon', 'city': 'daegu'}
	key     value       key     value

객체의 속성을 추가, 조회, 변경, 삭제하기

[조회]
object = { name: 'sangkwon', age: 30, city: 'changwon' }
해당 객체의 내용을 조회하는 경우

obj.name // .name => dot notation 이라고 하는데, 아래에서 자세하게 알아보도록 하겠습니다.
'sangkwon' // 이처럼 객체 내부의 값을 조회.

[변경]
obj.age = 20 // 객체의 key를 dot notation으로 입력하고 새로 할당하면 값이 변경.
20

obj
{name: 'sangkwon', age: 20, city: 'changwon'}

[삭제]
delete obj.city // delete + 객체.key 를 입력하면 해당 key가 삭제.
true

[추가]
obj.email = '*****@naver.com' // 존재하지 않는 key를 선언하고 value를 할당하면 객체에 추가.

obj
{name: 'sangkwon', age: 20, email: '*****@naver.com'}

---

Dot Notation 과 Bracket Notationd

Dot Notation은 이름으로 알 수 있듯이 점(.) 표기법입니다.

 

Bracket Notation은 이름으로 알 수 있듯이 괄호([ ]) 표기법입니다.

object = { name: 'sangkwon', age: 30, city: 'changwon' }

 

object객체의 벨류를 조회하는 방법으로 object.name(Dot Notation)과 object['name'](Bracket Notation)은 동일한 결과값을 호출할 수 있습니다.

object = { name: 'sangkwon', age: 30, city: 'changwon' }

object.name // 객체 + . + key 
'sangkwon'

object['name'] // 객체 + [ 'key' ]
'sangkwon'

object[name] // 하지만 이처럼 bracket notation에서 문자 표기 방법인 ''을 빼게 되면 호출X
undefined

 

 

아무래도 Dot Notation이 Bracket Notation보다 더 사용하기 편리한데, Dot Notation은 ''로 둘러쌓여있어서 . 고정되기 때문에 반복문이나 함수에서 활용할 수 없습니다.

반면, Bracket Notation은 [ ] 내부에 변수를 넣음으로써 각 키를 조회할 수 있습니다.

객체와 키를 입력받아 키에 해당하는 값을 리턴해야 합니다.

[출력 예시]

const person = {
  name: 'Steve',
  age: 16,
};

let output = getProperty(person, 'name');
console.log(output); // --> 'Steve'
-------------------------------------------------------------------------------------
function getProperty(obj, property) {
  return obj[property]; 
  // property가 정해져 있는 key가 아니기 때문에 obj의 키로 변수를 넣어야 되서 
  // dot notation이 아닌 braket notation으로 넣어준다.
}

여기에서 Dot Notation을 쓰게 된다면 obj.property가 되어 obj내부에 property라는 이름의 키에서 벨류를 찾는 것이기 때문에 해당 함수가 작동하지 않습니다.

 

이처럼 변수로써 키 값이 들어갈 경우 Bracket Notation 을 사용하면 됩니다.