Object Method

Object Method

 

Object.entries()

• 객체를 순회하며 모든 프로퍼티를 [key, value] 쌍의 배열 형태로 반환한다.
• 반환된 배열은 객체가 정의된 순서와 상관 없이 나오기 때문에 sort()로 정렬을 하는 것이 좋다.
  
  • ⇒ Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]))

obj = { a: 1, b: 2, c: 3 }

console.log(Object.entries(obj)) // [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

 

Object.keys()

• 객체를 순회하며 해당 객체가 갖는 key 값으로 이루어진 배열을 반환한다.

const score = {
 math: 100,
 english: 95,
 history: 99,
 korean: 98
}

console.log(Object.keys(score)) // [ 'math', 'english', 'history', 'korean' ]

 

Object.values()

• 객체를 순회하며 해당 객체가 갖는 value 값으로 이루어진 배열을 반환한다.

const score = {
 math: 100,
 english: 95,
 history: 99,
 korean: 98
}

console.log(Object.keys(score)) // [ 100, 95, 99, 98 ]

 

Object.hasOwnProperty()

• 객체가 특정 프로퍼티를 가지고 있는지 Boolean 값으로 반환한다.
• hasOwnProperty는 프로퍼티의 존재 유무를 판단하는 것이지, 프로퍼티의 값을 확인하는 것이 아니기 때문에 프로퍼티 값이 undefined나 null이어도 true를 반환한다.

// 기본 예제 1
const obj = { a: 1 }

obj.hasOwnProperty("a") // true 
obj.hasOwnProperty("b") // false

// 기본 예제 2
obj = new Object()
obj.name = 'hizini'
obj = {prop: 'hizini'}

// 직접 소유한 obj 고유속성
obj.hasOwnProperty('prop') // true

// 프로토타입 상속받은 속성
obj.hasOwnProperty('toString') // false
obj.hasOwnProperty('hasOwnProperty') // false

 

- 해당 객체에 특정 프로퍼티가 존재하면 true, 그렇지 않으면 false 를 반환한다.

- 단, 프로토타입 체인은 확인하지 않고 해당 객체가 스스로 정의한 프로퍼티만을 판단한다.

obj.b = 2
Object.prototype.c = 3
obj.b // 2
obj.c // 3
obj.hasOwnProperty("b") // true
obj.hasOwnProperty("c") // false

 

Object.assign()

• 타겟을 지정한 객체로 다른 객체의 속성을 복사한다.

// 구문
Object.assign(target, ...sources)

// 기본 예제 1 
const target = { a: 1, b: 2 }
const source = { b: 3, c: 4 }
const returnedTarget = Object.assign(target, source)

console.log(target) // { a: 1, b: 3, c: 4 }
console.log(source) // { b: 3, c: 4 }
console.log(returnedTarget) // { a: 1, b: 3, c: 4 }

// 기본 예제 2
const source1 = {a:1}
const source2 = {b:2}
const source3 = {c:3}
const returnedTarget2 = Object.assign({}, source1, source2, source3)

console.log(returnedTarget2) // {a: 1, b: 2, c: 3}

• 기본 예제 1
  • target 값은 source 값이 병합되어 객체의 속성이 변경되거나 추가된다.
  • source 값은 변경 되지 않는다.
  • 리턴으로 받은 returnedTarget 객체는 target 객체와 같은 객체를 참조하고 있다.
• 기본 예제 2
  • target 인자에 빈 객체를 주고, source 인자에 각 객체들을 넘겨주면, 빈 객체에 병합이 된다.
  • ⇒ Object.assign 의 결과가 새로운 객체를 반환해야 한다면, target 으로 빈 객체를 주면 된다.

 

Object.create()

• 지정된 프로토타입 객체 및 속성(property)을 갖는 새 객체를 만든다.
  • 쉽게 말해, 프로토타입의 객체 및 속성을 그대로 가져오는 메소드이다. (상속)
  • 상위클래스의 메소드를 하위클래스 메소드로 가져올 수 있다.
  • 다만 상위클래스의 constuctor가 복사되어 오기 때문에 하위클래스 constuctor를 따로 지정해 주어야 한다.
• JavaScript 내부에서 생성자로 객체를 생성하면서 연결이 깨지는 것을 방지하기 위해 사용한다.

// 구문
Object.create(proto[, propertiesObject])

• proto
  • 프로토타입으로 사용할 객체 (객체 또는 null)
• propertiesObject (선택)
  • 새로운 객체의 추가할 프로퍼티 정보
    ✅ MDN 설명
    ..........😂

// 기본 예제

const obj = Object.create(null, { // null 프로토타입을 사용하여 새로운 객체를 만들고
	x: { value: 100, enumerable: true }, // x좌표를 나타내는 열거할 수 있는 프로퍼티와
  y: { value: 200, enumerable: true }  // y좌표를 나타내는 열거할 수 있는 프로퍼티를 추가
})

obj.x // x좌표, 100
obj.y // y좌표, 200
Object.getPrototypeOf(obj) // 객체의 프로토타입을 반환, null

console.log(obj, Object.getPrototypeOf(obj)) // { x: 100, y: 200 } null

 

Object.is()

• 두 값이 같은 값인지 판별하여 boolean 값을 반환한다.
• 값과 타입이 일치해야만 true를 반환하기 때문에 판별하는 기본적인 동작은 === 이다.
• NaN도 체크할 수 있다.

console.log(Object.is(1, '1')) // false 
console.log(Object.is(0, '')) // false 
console.log(Object.is(true, 'true')) // false 
console.log(Object.is(NaN, NaN)) // true

 

Object.freeze()

• 객체를 변경할 수 없는 (immutable) 값으로 동결한다.
• 즉, 상수(const)처럼 변경할 수 없는 값이 되어 바꿀 수도, 삭제할 수도 없다.
  • const로 선언된 객체의 값이라도 내부 프로퍼티 및 메소드의 값을 변경할 수 있는데, freeze()를 사용할 경우 참조 값의 내부 프로퍼티, 메소드 값 변경이 불가능하다.

// freeze 사용
const freezeData = { a: 123 }
Object.freeze(freezeData)
freezeData.a = 456
freezeData.b = 456

console.log(freezeData) // { a: 123 }

// const 사용
const constData = { a: 123 }
constData.a = 456
constData.b = 456

console.log(constData) // { a: 456, b: 456 }

 

Object.isFrozen()

• 객체가 동결됐는지 판별하여 boolean 값을 반환한다.

const freezeData = { a: 123 }
Object.freeze(freezeData)

const constData = { a: 123 }

console.log(Object.isFrozen(freezeData)) // true
console.log(Object.isFrozen(constData)) // false

 

Object.seal()

• 객체를 봉인하여 속성을 추가하거나 제거할 수 없다.
• 이미 존재하는 속성의 값은 수정할 수 있다. (Object.freeze() 와의 차이점)

const sealData = { a: 123 }
Object.seal(sealData)
sealData.a = 33

console.log(sealData.a) // 33

delete sealData.a
console.log(sealData.a) // 33

 

Object.isSealed()

• 객체가 봉인됐는지 판별하여 boolean 값을 반환한다.

const sealData = { a: 123 }
console.log(Object.isSealed(sealData)) // false

Object.seal(sealData)
console.log(Object.isSealed(sealData)) // true