JS Object 메서드2

김현태·2023년 5월 26일
1

js

목록 보기
3/3
post-thumbnail

Object.getOwnPropertyDescriptor()

구문

Object.getOwnPropertyDescriptor(obj, prop)

설명

obj객체의 prop 속성에 대한 설명자를 반환해요

예제

const case1 = Object.defineProperties({},{
	'name' : {
                value : '홍길동',
                writable : true,
                enumerable : true,
             },
    'age' : {
    			value : 100,
                writable : false,
                enumerable : false
			}
})

//case1 객체의 name 속성을 찍어보자
console.log(Object.getOwnPropertyDescriptor(case1, 'name'))
configurable : false 
enumerable : true
value : "홍길동"
writable : true

//case1 객체의 age 속성을 찍어보자
console.log(Object.getOwnPropertyDescriptor(case1, 'age'))
configurable : false
enumerable : false
value : 100
writable : false

참고로 defineProperties()메서드를 사용하여 속성을 정의할 경우
configurable, enumerable, writable 기본값은 false입니다.

Object.getOwnPropertyDescriptors()

구문

Object.getOwnPropertyDescriptors(obj)

설명

매개변수로 들어온 obj객체의 모든 속성들의 설명자를 반환해요

예제

const case1 = Object.defineProperties({},{
	'name' : {
                value : '홍길동',
                writable : true,
                enumerable : true,
             },
    'age' : {
    			value : 100,
                writable : false,
                enumerable : false
			}
})

// case1 객체의 설명자가 궁금해요
console.log(Object.getOwnPropertyDescriptors(case1))

age : 
	configurable : false
	enumerable : false
	value : 100
	writable : false
    
name : 
	configurable : false
	enumerable : true
	value : "홍길동"
	writable : true

Object.getOwnPropertyNames()

구문

Object.getOwnPropertyNames(obj)

설명

매개변수의 속성들을 배열에 담아 반환시켜줍니다.

예제

//case1를 만들어볼께요
const case1 = { a : 1, b : 2, c : 3}
//객체에 어떤 속성이 있는지 궁금해요
console.log(Object.getOwnPropertyNames(case1))

결과값 => [ 'a', 'b', 'c' ]

//case2를 만들어 볼께요
const case2 = { name : '홍길동', age : 100 }
//콘솔찍어 볼께요
console.log(Object.getOwnPropertyNames(case2))

결과값 => [ 'name', 'age' ]

Object.getPrototypeOf()

구문

Object.getPrototypeOf(obj)

설명

매개변수의 프로토타입(상속받은 객체)을 반환해요.

예제

//객체를 하나 만들어 볼께요
let obj1 = { name : '홀깅돌' , age : 100 };

//obj1을 상속받는 객체를 하나 만들어 볼께요
let obj2 = Object.create(obj)

// Object.getPrototypeOf(obj2) === obj1

결과값 => true

Object.keys()

구문

Object.keys(obj)

설명

주어진 객체의 속성 이름들을 배열에 담아 반환해줘요

예제


//객체를 하나 만들어 볼께요
const object1 = {
  a: 'something',
  b: 100,
  c: 'kim'
};
//Object.keys()를 사용해볼께요
console.log(Object.keys(object1))// [ 'a', 'b', 'c' ]


//이번엔 defineProperties()메서드를 사용해서 원하는 key들만 반환시켜볼께요
const object2 = Object.defineProperties({},{
	a : {
 			value : 'somestring',
  			enumerable : true
    	},
  	b : {
      		value : 42,
      		enumerable : false
  		},
  	c : {
			value : 'kim',
      		enumerable : true
  		}
})

// b만 enumerable(순회할 때 출력을 결정할 수 있는 옵션)을 false로 설정했어요
// 어떻게 나올지 콘솔찍어볼께요

console.log(Object.keys(object2));//[ 'a' , 'c' ] 
// b 키만 출력되지 않았어요

Object.seal(), Object.preventExtensions(),

구문

Object.preventExtensions(obj)
Object.seal(obj)

설명

매개변수로 받아온 객체를 밀봉하여 객체의 확장을 막아요(새 속성 추가 X)
하지만 기존 속성의 값을 변경할 수있다는 점에서 Object.freeze()메서드와 차이점이 존재해요.

예제


//age속성을 갖는 객체를 하나 만들어볼께요.
const object1 = {
  age : 100,
};
//만들객체를 밀봉시켜볼께요
Object.seal(object1);

//1. name 속성을 추가 시켜볼께요
object1.name = '홍길동';
//콘솔을 찍어봐요
console.log(object1.name);
// 결과값 => undefined

//2. 기존에 있던 age 속성을 지워볼께요
'use strict'
delete object1.age
//Uncaught TypeError: Cannot delete property 'age'

//3. age값을 변경시켜볼께요
object1.age = 200;
//콘솔찍어봐요
console.log(object1.age);
//결과값 => 200

Object.preventExtensions() 메서드도 동일하게 작동하기 때문에 예제에 포함시키지 않았고 만약 속성의 값을 변경시켜 주기 싫다 하시면 Object.freeze() 또는 Object.defineProperties() 사용할 수 있어요

0개의 댓글