[Javascript] 객체에 해당 key값이 존재하는지 확인하는 방법

예전에 자바스크립트에서 한 객체가 특정한 키값을 가졌는지 확인한 뒤 처리 해야 하는 로직이 있었는데, 그때마다 내가 작성한 코드가 비효율적이란 생각을 떨치기 위해 공부하고 정리하려고 한다.

HOW?

1. 일단 찾아보기

Javascript란 정말 요망한 언어라고 생각한다.
비록 undefined지만 Object에 없는 프로퍼티에 접근 가능하다니...

const object_1 = {
	test1:'test 1'
}

console.log(typeof object_1.test_2 === 'undefined') // true

undefined면 없는거겠지?라며 너무 쉽게 생각했던 적이 있었다.
하지만 이 방법은 다음의 경우는 완전히 원하는 정보를 정확하게 얻을 수 없다.

const object_2 = {
	test_1:'test 1',
    	test_2:undefined
}

console.log(typeof object_2.test_1 === 'undefined') // false
console.log(typeof object_2.test_2 === 'undefined') // true

undefined도 할당 가능한 값이다. object2는 test2라는 프로퍼티를 가지고 있다. 처음 원했던 객체가 특정한 키 값을 가졌는지의 정보와는 조금 다르다고 생각한다.

2. Object의 keys를 이용해보자

Object.keys는 객체의 키를 배열로 리턴한다. 이를 이용하여 찾는 값이 있는지 알 수 있을 것이다!!

const object_1 = {
	test_1:'test 1'
}

const isExist_1 = Object.keys(object_1).includes('test_1')
const isExist_2 = Object.keys(object_1).includes('test_2')

console.log(isExist_1) // true
console.log(isExist_2) // false

이렇게 하면 아래 경우도 커버 가능하다.

const object_2 = {
	test_1:'test 1',
    test_2:undefined
}

const isExist_3 = Object.keys(object_2).includes('test_1')
const isExist_4 = Object.keys(object_2).includes('test_2')

console.log(isExist_3) // true
console.log(isExist_4) // true

해당 코드는 내가 꽤 많이 싸지른 코드이다…. 일단 원하는 대로 값을 가져왔다. 하지만 코드를 볼 때마다 굳이 Array를 만들어서 찾아야 할까??라는 생각이 들었다. 비효율적이며, 가독성도 떨어진다.

3. key in Object

최근 자바스크립트 기본을 다시 다지기 위해 읽는 사이트에 예제가 있었다.
기본도 못하고 있다는 생각이 들어버렸다.. 방법은 간단했다.

const object_1 = {
	test_1:'test 1'
}

console.log( 'test_1' in object_1 ) // true
console.log( 'test_2' in object_1 ) // false

물론 다음의 경우도 커버 가능하다.

const object_2 = {
	test_1:'test 1',
    test_2:undefined
}

console.log( 'test_1' in object_2 ) // true
console.log( 'test_2' in object_2 ) // true

욕먹어도 싸다고 생각했다... 하지만 이 방법엔 단점이 있다.
다음에서 처럼 Object의 프로토타입 체인으로 생성한 프로퍼티도 체크한다는 것이다.

const object_3 = {
	test_1:'test 1'
}
Object.prototype.test_2 = undefined
console.log( 'test_1' in object_3 ) // true
console.log( 'test_2' in object_3 ) // true

4. Object.hasOwnProperty

Object.hasOwnProperty가 존재한다는 것을 글을 쓰기 위해 MDN web docs로 체크하다가 봐버렸다...
먼저 해당 메소드는 객체가 특정 프로퍼티를 소유했는지를 반환한다. 특히 객체가 지정된 속성을 프로토타입 체인을 통해 상속되지 않은 그 객체의 직접 속성으로 포함하는지를 나타내는 boolean을 반환한다.
해당 메소드는 MDN doc과 여기에 잘 설명 해놓았다.

해당 메소드를 사용하면

const object_1 = {
	test_1:'test 1'
}

console.log( object_1.hasOwnProperty('test_1') ) // true
console.log( object_1.hasOwnProperty('test_2') ) // false

const object_2 = {
	test_1:'test 1',
    test_2:undefined
}

console.log( object_2.hasOwnProperty('test_1') ) // true
console.log( object_2.hasOwnProperty('test_2') ) // true

위 두 경우 모두 커버가 가능 할 뿐 아니라

const object_3 = {
	test_1:'test 1'
}
Object.prototype.test_2 = undefined

console.log( object_3.hasOwnProperty('test_1') ) // true
console.log( object_3.hasOwnProperty('test_2') ) // false

해당 객체의 직접적인 속성만을 검사 할 수 있다.

마치며

원래 목적은 3번에서 와~ 깔끔하쥬? 하고 마치려 했으나, 글을 쓰려고 다시 보는 동안 더 효율적인 방식을 찾았고 왜 그런지 배울 수 있었다.
블로깅을 자주 하기로 한 뒤 첫 글이었는데, 왜 기록으로 남겨야 하는지 잘 느낄 수 있었다.

결론

문서를 잘 읽자..