Object 메서드 종류

mdn 문서를 참고하여 정리한 내용이며, 부가적인 옵션은 추후에 업데이트 할 예정입니다.

Object.assign(target, ...source)

짧은 설명 : source 객체들을 복사해 target에 붙여넣는다.

const target = { a : 1, b : 2 }
const source = { b : 3, c : 4 }

const returnTarget = Object.assign(tartget, source);

console.log(returnTarget)//{ a : 1, b : 3, c : 4 }
console.log(returnTarget === target)// true;

assign 메서드는 불변성을 가지고 있지 않아 target객체와 returnTarget객체는 모두 같은 주소값을 가졌으며 같은 객체를 바라보고 있다.

Object.defineProperties()

짧은 설명 : 객체에 새로운 속성을 부여하거나 기존의 속성을 수정하고 그 객체를 반환

//객체 생성
const obj = {};

//
Object.defineProperties(obj, {
  //name 속성을 부여하였으며 값은 10 할당, 수정 불가능
  name: {
    value : 'kim',
    writable: false
  },
  
  //age 속성을 부여하였으며 수정가능
  age : {
  	value : 20 ,
    writable : true
  }
});

console.log(obj.name);//kim
console.log(obj.age);//20

//obj의 name 속성을 park으로, age 속성을 30으로 수정
obj.name = 'park';
obj.age = 30;

console.log(obj.name);//kim
console.log(obj.age);//30

//name속성은 수정이 안되는것을 확인할 수 있다. writable을 false로 사용하여 객체 내부의 값을 함부로 수정하지 못하게 막았기 때문이다. 

Object.entries()

짧은 설명 : 매개변수로 받은 obj의 enumerable속성을 [key, value] 쌍을 배열로 반환합니다.

const case1 = { a : 1, b : 2, c : 3 }
console.log(Object.entries(case1)) // [ ['a',1], ['b',2], ['c',3] ]

const case2 = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(case2)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

Object.fromEntries()

짧은 설명 : 매개변수로 전달받은 키-값쌍 목록을 객체로 반환해준다.
쉽게말해 Object.entries()의 반대되는 메서드임.

const case1 = [ ['a',1], ['b',2], ['c',3] ];
console.log(Object.fromEntries(case1))//{a: 1, b: 2, c: 3}

//배열을 객체로 만들어서 반환


const case2 = [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ];
console.log(Object.fromEntries(case2))//{2: 'b', 7: 'c', 100: 'a'}

//배열을 객체로 만들어서 반환

Object.freeze()

짧은 설명 : 객체를 동결시켜 속성값을 추가하거나 변경하거나 제거를 방지함

//배열생성
const case1 = [1,2,3];
//case1를 동결시켜볼께요
Object.freeze(case1)
//배열에 2를 추가해볼께요
case1.push(1);//error
case1.pop()//error
case1[0] = 10;//error를 발생시키지 않고 조용히 넘어감 대신 변경은 안됨!!
console.log(case1[0])// 1
//case1이 동결인지 아닌지 확인해볼께요
Object.isFrozen(case1);//true

//객체생성
const case2 = { name : 'kim' }

//동결시켜보자
Object.freeze(case2)

//age속성을 추가시킨후에 case2를 출력시켜보면
case2.age = 100
console.log(case2)//{name: 'kim'}

//name속성을 삭제시킨후 콘솔을 찍어보면
delete case2.name
console.log(case2)//{name: 'kim'}

//name속성 값을 변경시킨 후 콘솔을 찍어보면
case2.name = 'park'
console.log(case2)//{name: 'kim'}


Object.defineProperties()메서드는 각 속성을 수정할지 안할지 결정할 수 있었지만 
Ojbect.freeze()메서드는 모든 것을 막는다.