JS - Objects 객체에 대한 모든 것 - 5

JS - Objects 객체에 대한 모든 것 링크

1. JS - Objects 객체에 대한 모든 것 - 1
2. JS - Objects 객체에 대한 모든 것 - 2
3. JS - Objects 객체에 대한 모든 것 - 3
4. JS - Objects 객체에 대한 모든 것 - 4
5. JS - Objects 객체에 대한 모든 것 - 5

 

JS - Objects 객체에 대한 모든 것

1 부터 ~ 5 까지 쭉 이어서 보는걸 권장한다.

 

 

 

이전 글에서 객체에 undefined가 들어있을 경우 혹은 속성 자체가 없는경우 

var obj = {
	a:undefined
}

console.log(obj.a); // undefined
console.log(obj.b); // undefined

둘다 undefined가 나온다.

obj.a 는 명시적으로 a 라는 속성(프로퍼티)에다가 직접 undefined를 할당을 해서

console.log에는 undefined가 출력이 되고,

obj.b 는 b라는 속성(프로퍼티)가 없어서 undefined가 출력이 되었다.

 

근데 console.log 를 찍으면 둘다 undefined가 나오는데 이 두개를 구별 할 수 있는방법이 없을까?

그 구별 하는 방법을 알아보자.

 

▶ 존재여부

hasOwnProperty('속성') 과 in 연산자
→ 해당 객체에 속성이 있는지 검사

var obj = {
	a:undefined
}

console.log(myObject.hasOwnProperty( "a" )); // true
console.log(myObject.hasOwnProperty( "b" )); // false

console.log("a" in myObject); // true
console.log("b" in myObject); // false

둘다 해당 객체 obj 에 a 라는 속성과 b 라는 속성이 있는지 검사하여 있으면 true를 반환하고,

없으면 false를 반환한다.

 

하지만 이 둘은 차이점이 있다.

나중에 prototype 에 관련해서도 글을 올릴꺼지만 자바스크립에는 이 프로토타입이라는 심오한 녀석이 있는데

지금은 그냥 객체에 관련해서 글을 작성중 이므로 객체에만 집중해서 글을 작성하겠다.

 

이 in 이라는 연산자는 [[prototype]]에도 속성이 있는지 검사를 하고, 

hasOwnProperty는 obj 에만 속성이 있는지 확인하고 [[prototype]] 여기는 검사를 진행하지 않는다.

 

암튼 이 둘 차이점은 in 연산자는 프로토타입도 같이 검사하고 hasOwnProperty는 검사를 하지 않는다는

것만 알면 된다.

 

자 이번엔 이 전글에서 설명한 enumerable(열거를 가능여부 속성) 을 활용하여 확인해보자.

enumerable 이 속성의 설명은 이 글 참조 -> https://knowing-passion.tistory.com/50

 

var obj = {}

Object.defineProperty(obj, 'a', {
	enumerable:true,
    	value:2
});

Object.defineProperty(obj, 'b', {
	enumerable:false,
    	value:10
});


// ------------ 열거가능 속성에 대한 확인방법 -1 ----------------//
console.log('b' in obj); // true
console.log(obj.hasOwnProperty('b')); // true

for(var i in obj){
	console.log(obj[i]); // 2
}

// ------------ 열거가능 속성에 대한 확인방법 -1 ----------------//



// ------------ 열거가능 속성에 대한 확인방법 -2 ----------------//
console.log(obj.propertyIsEnumerable('a')); // true
console.log(obj.propertyIsEnumerable('b')); // false

console.log(Object.keys(obj)); // ['a']
console.log(Object.getOwnPropertyNames(obj)); // ['a', 'b']
// ------------ 열거가능 속성에 대한 확인방법 -2 ----------------//

 

위 코드를 보면 a 속성엔 enumerable 속성을 true 하고 b 속성엔 enumerable 속성을 false로 셋팅해놨다.

 

콘솔로그 부분을 봐보자.

in 연산자를 사용해서 b라는 속성을 검사해보니 있다고 해서 true가 나왔다.

hasOwnProperty를 이용하여 b 속성 검사를 해봤더니 존재여부가 true 로 나왔다.

 

그런데 for~in문을 이용하여 속성이 찍히는지 확인해보면 b 속성에는 enumerable 이게

false라 b 속성을 빼고 콘솔로그에 찍힐 것이다. 그래서 결과 값은 2 만 나온다.

 

이 처럼 열거속성enumerable 이것을 false로 설정을 해도 in연산자나,

hasOwnProperty는 속성을 검사할 수가 있다.

 

또 다른 방법도 있다. 열거가능 속성에 대한 확인방법 2번째를 봐보자.

propertyIsEnumerable() 이걸 사용한 부분 콘솔로그를 확인해보면 enumerable 이 속성이 true인지 false

인지에 따라 반환값이 정해진다.

 

즉, 열거속성(enumerable ) 이게 false 이면 false를 반환하고, true이면

true를 반환한다.

 

Object.keys() 이것도 우리가 자주 사용하는거지만 열거속성(enumerable)이 false 인 b 속성에 대해선

값이 찍히질 않는다.

 

이처럼 b 속성이 존재하지만 열거속성(enumerable)이 false인 경우는 속성을 찾지

못한다. 그러나 다음 코드를 확인해보자.

 

Object.getOwnPropertyNames() 이걸 사용하면 열거속성(enumerable)이 false라 할지라도 전부 속성을

찾아서 확인이 가능하다.

 

이처럼 열거속성을 false로 하여금 그 객체에 속성이 보이지 않게 하려고

해놨음에도 불구하고 확인하는 방법은

1. in 연산자를 사용한다.
2. hasOwnProperty() 를 사용한다.
3. Object.getOwnPropertyNames() 를 사용한다.

이 3가지를 이용하여 열거속성(enumerable)이 false라 할지라도 확인이 가능하다.