Object Methods

오민영·2021년 7월 13일
0

Javascript

목록 보기
2/6
post-thumbnail

Object iteration(순환)

Object.keys(obj)

객체의 키(key)만 담은 배열을 반환한다.

Object.values(obj)

객체의 값(value)만 담은 배열을 반환한다.

Object.entries(obj)

객체의 [key, value] 쌍을 담은 배열을 반환한다.

let user = {
	name: 'minyoung',
    age: '55',
}

Object.keys(user); // ['name', 'age']

Object.values(user); // ['minyoung', 55]

Object.entries(user); // [['name', 'minyoung'], [age, 55]]

Object.freeze(obj)

객체(배열도 동결)를 동결한다. 동결된 객체는 더 이상 변경될 수 없다.

즉, 동결된 객체는 새로운 속성을 추가 / 존재하는 속성을 제거하는 것을 방지하며, 속성의 불변성, 설정 가능성, 작성 가능성 등 모든 변경될 부분을 제한한다. 또한 프로토타입이 변경되는 것도 방지한다.

freeze()는 전달된 동일한 객체를 반환한다.

const obj = {
	prop: 52
}

Object.freeze(obj);

obj.prop = 33;
// Throws an error in strict mode

console.log(obj.prop);
// expected output: 52

Object.freeze() 메소드는 얕은 동결이기 때문에, 객체 내의 객체에는 동결되지 않는다.

var employee = {
  name: "Mayank",
  designation: "Developer",
  address: {
    street: "Rohini",
    city: "Delhi"
  }
};

Object.freeze(employee);

employee.name = "Dummy"; // 비엄격 모드에서 조용하게 실패
employee.address.city = "Noida"; // 자식 객체의 속성은 수정 가능

console.log(employee.address.city) // 출력: "Noida"

Object.assign(target, ... sources)

Object.assign()메소드는 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 복사할 때 사용한다.

대상 객체를 반환하는데, 동일한 key가 존재하는 경우 대상 객체의 속성은 출처 객체의 속성으로 덮여쓰여진다!

  • target: 대상 객체
  • sources: 하나 이상의 출처 객체
let obj1 = {a: 1, b: 2}
let obj2 = {b: 3, c: 'ho'}

let sumObj = Object.assign(obj1, obj2);

console.log(sumObj) // {a: 1, b: 3, c: 'ho'}

console.log(obj1) // {a: 1, b: 3, c: 'ho'}

console.log(obj2) // {b: 3, c: 'ho}

객체 클로닝

let obj = {a: 1}

const copy = Object.assign({}, obj);

console.log(copy); //{a: 1}

깊은 클로닝

Object.assign() 메소드는 속성의 값을 복사하기 때문에, 다른 대안을 사용해야 한다.
출처 값이 객체에 대한 참조인 경우, 참조 값 만을 복사한다.

function test() {
  'use strict';

  let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

  obj1.a = 1;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

  obj2.a = 2;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}

  obj2.b.c = 3; // obj1, obj2 모두에 영향을 줌
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}

  // 깊은 클론
  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
}

test();
profile
이것저것 정리하는 공간

0개의 댓글