Object Helpers (오브젝트 헬퍼 펑션)

Object Helper function(오브젝트 헬퍼 펑션)

Object 타입은 object의 key와 value를 수정하거나 찾아낼 수 있는 몇가지 'helper' function이 존재한다.

---

Object.keys()

Object.keys는 오브젝트를 인수로 받고, 오브젝트의 키를 어레이 형태로 리턴한다.

const info = {
    ironman: 'arrogant',
    spiderman: 'naive',
    hulf: 'strong'
}

const result = Object.keys(info)

키를 Array로 만든 것이 return 되었음

• Object.keys(오브젝트) 형태로 이용한다.
• 오브젝트 내 키들이 어레이의 형태로 리턴된다.

---

그런데 왜 info.keys() 처럼 사용하지 않을까??

 

대부분의 Object의 헬퍼 펑션들은 정적함수기 때문이다.

(어레이에서 배웠던 프로토타입의 펑션과는 다르다.)

 

Object.keys와 같이 사용하는 이유가 있는데,

만약 프로토타입 상속처럼 info.keys()와 같이 사용할 경우,

오브젝트 내에 keys라는 키값쌍이 있다면 어떻게 될까?

 

아마 헬퍼 펑션과 key가 충돌하게 될 것이다.

이러한 이유로 Object는 프로토타입을 상속받는 메서드보다는

자체로 정적인 헬퍼 펑션을 쓰는 일이 많다.

 

---

Object.values()

Object.values는 인수로 오브젝트를 받으며, 오브젝트 내 value들을 모아 어레이로 만들어 리턴한다.

const info = {
    ironman: 'arrogant',
    spiderman: 'naive',
    hulk: 'strong'
}

const result = Object.values(info)

밸류를 Array로 만든 것이 return 되었음.

 

---

Object.entries()

Object.entries()는 인수로 오브젝트를 받으며, 오브젝트 내 키, 값 쌍들을 어레이로 만든 뒤, 이 어레이들을 어레이로 감싸서 리턴한다. (어레이가 어레이들을 감싼 형태이다.)

const info = {
    ironman: 'arrogant',
    spiderman: 'naive',
    hulk: 'strong'
}

const result = Object.values(info)

키, 값 쌍을 어레이로 만들어 그 어레이들을 어레이로 감싼 후 return 한다.

---

Object.prototype.hasOwnProperty()

얘가 뭔지 알아보기에 앞서서...

왜 이 친구에게는 prototype이 붙어있을까?

그건 hasOwnProperty의 역할에 기인한다고도 볼 수 있다.

 

일단 hasOwnProperty 메서드의 역할에 대해 알아보고 더 알아보자.

만약 특정한 프로퍼티가 오브젝트내에 있다면 true를, 없다면 false를 반환한다.

 

 

const myObj = {
  name: 'test',
  age: 100
}

myObj.hasOwnProperty('name') // true
!!myObj['name'] // true

myObj.hasOwnProperty('age') // true
!!myObj['name'] // true

myObj.hasOwnProperty('ddd3334') // false
!!myObj['ddd3334'] // false

myObj.hasOwnProperty('toString') // false
!!myObj['toString'] // true

나머지는 잘 했으면서 왜 마지막에는 두개가 다를까?

<< myObj[''] 앞의 !! 는 myObj를 boolean 값으로 바꿔주기 위함이다. >>

 

myObj 오브젝트에는 toString이라는 프로퍼티(키, 값 쌍)가 없다.

그래서

myObj.hasOwnProperty('toString')은 정확히 false 값이 나오는데

!!myObj['toString']은 그 값이 존재한단다. 그래서 true가 반환된다.

 

왜일까?

 

이유는

우리가 [] 표기법을 사용할 때는

우리가 사용하는 오브젝트 내 프로퍼티는 물론이고,

거기에 엮인 상속대상인 prototype의 사슬까지 전부를 헤집는다.

prototype에 toString이라는 메서드가 있으므로 !!myObj['toString']은 true를 반환한다.

 

반면, hasOwnProperty는 자신을 상속한 Object 내부의 프로퍼티만 확인한다.

(즉 모든 prototype까지 내려가지 않는다.)

 

---

만약 내가 라이브러리를 사용하거나, 어딘가에서 정의된 오브젝트를 사용하는 경우,

어떤 키가 프로토타입 체인에 정의가 되어있는지 알 수 없다.

따라서 [] 노테이션을 사용하여 내부 프로퍼티를 찾아볼 수 있겠지만...

아무래도 후회하는 것 보다는 안전하게 Object.prototype.hasOwnProperty를 사용하는 것이 낫겠다.

 

(hasOwnProperty는 오로지 프로퍼티가 오브젝트 안에만 존재하고, prototype엔 존재하지 않는다는 것을 확인할 때만 사용하는 것이 좋다.)

---

delete

이 펑션은 오브젝트 내의 키와 밸류를 삭제하는 역할을 한다.

const info = {
    ironman: 'arrogant',
    spiderman: 'naive',
    hulk: 'strong',
    thanos: 'powerful'
}
delete info.thanos

thanos가 지워졌다.

왜 이건 Object.delete(info)처럼 쓰이지 않을까?

그 이유는 delete가 펑션이 아니라 연산자이기 때문이다.

이것은 어레이나 몇가지 변수에도 사용할 수 있지만, 대부분의 경우에서는 오브젝트에서 사용하게 된다.