[JS] 객체 (Object)

객체

• 여러 속성(property)을 하나의 변수에 저장할 수 있게 해줌
• 속성(property)는 이름(key)과 값(value)으로 구성되어 있음
• 속성 값으로 함수가 올 때의 프로퍼티를 메소드(method)라고 한다.
• 자바스크립트에서는 숫자, 문자열, 불리언, undefined 타입(=원시타입)을 제외한 모든 것이 객체

let 객체명 = {
  프로퍼티명1(key) : 값1(value),
  프로퍼티명2(key) : 값2(value)
  ...
}

객체 다루기

1. 프로퍼티 참조

값(value) 가져오기

Dot notation

• 객체.key
  정해진 key가 있을 때만 사용할 수 있고, 객체에 빠르게 접근할 수 있다.

Bracket notation

• 객체['key']
  key에 문자열이 아닌 변수를 넣으면 동적으로 활용할 수 있다.

매서드

• 객체.key()

2. 프로퍼티 추가 및 수정

객체 내의 key값 유무에 따라 프로퍼티를 추가하거나 수정할 수 있다.

let user = {
  name : {
    firstName : 'steve',
    lasgName : 'Lee'
    },
  age : 20,
  hello() {
    console.log(`hello ${this.name.firstName}`)
  }
}

user.gender = '남' // 추가
user.gender = '여' // 수정

콘솔에 user를 입력하면 해당 객체에 프로퍼티가 추가된 걸 확인할 수 있다.

3. 프로퍼티 삭제

• delete 객체명.key
  

4. key 존재 여부 확인

• 'key' in 객체명 : 존재여부에 따라 true / false 출력한다.

'gender' in user // true
'age' in user // false

매서드

1. key 또는 value를 배열로 반환하는 매서드

let obj = {
  a: 2,
  b: 'hello',
  c: false
}

• Object.keys(객체이름) : 주어진 객체의 속성명(key)들을 배열로 반환한다.

console.log(Object.keys(obj))
// [a, b, c]

• Object.values(객체이름) : 주어진 객체의 값(value)들을 배열로 반환한다.

console.log(Object.values(obj))
// [2, 'hello', false]

2. 객체를 합치거나 복사하는 매서드

let obj = {a: 1, b: 2}
let obj2 = {b: '일', c: '이'}

• Object.assign(타겟객체, 합칠객체) : 타켓객체에 합칠객체가 더해진 후, 타겟객체가 반환된다.

let assignObj = Object.assign(obj, obj2)

console.log(obj) // {a: 1, b: '일', c: '이'}
console.log(obj === assignObj) // true

obj와 assignObj는 같은 주소에 저장된 객체이므로 한쪽의 값이 변경되면 다른 한 쪽도 변경된다.

obj.a = '일'

console.log(obj) // {a: '일', b: '일', c: '이'}
console.log(assignObj) // {a: '일', b: '일', c: '이'}

• Object.assign({}, 객체이름) : 객체가 깊은 복사된다.
  기존 주소가 아닌 다른 주소에 저장되어 서로 영향을 끼치지 않는다.

let newObj = Object.assign({}, obj)
console.log(newObj) // {a: '일', b: '일', c: '이'}
console.log(obj === newObj) // false

4. 두 객체가 같은지 비교하는 매서드

• Object.is(객체1, 객체2)

Object.is(obj, newObj) // false
Object.is(obj, assignObj) // true

for...in

객체의 key에 접근하여 반복작업

let obj = {
  a: 2,
  b: 'hello',
  c: false
}

for(key in obj) {
  console.log(`${key} : ${obj[key]}`);
}

/*
a : 2
b : hello
c : false
*/