Eojin Han

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

💡

열거 가능한 값을 하나씩 오브젝트로 복사할 때도 사용가능.

Object.assign(target, ...sources)

params

target : 타겟 객체

sources : 하나 이상의 소스 객체

반환값

타겟 객체

설명

동일한 키가 존재할 경우 타겟 객체의 속성은 소스 객체의 속성으로 덮어쓰여집니다. 후에 소스의 속성은 이전의 소스의 속성과 유사하게 덮어씁니다.

객체 안에 객체 생성 (개인적으로 자주 씀)

test.dep1.dep2에 value을 넣어야하는 경우


const test = {}
const value = 3

// bad
if(!test.dep1){
	test.dep1 = {}
}
test.dep1.dep2 = value

// good
Object.assign( test, { dep1: { dep2:value }} );


console.log("test", test);
// [LOG]: "test",  {
//   "dep1": {
//     "dep2": 3
//   }
// }

객체 클로닝


const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

원시 자료형을 객체로 래핑

열거 가능한 자료만 가능.

나머지 (bool, number, symbol 등은 무시됨)


var v1 = 'abc';
var v2 = true;
var v3 = 10;
var v4 = Symbol('foo');

var obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
// 원시 자료형은 래핑되지만, null 과 undefined 는 무시됨.
// 스트링 래퍼만 자체 열거형 속성을 가짐을 유의.
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

활용 코드

참고링크 : https://codingcoding.tistory.com/1244

배열에서 {{}, {}, {}} 형태로 변환하기


const dateArray = ['2021-02-06', '2021-02-08', '2021-02-09'];

const objs = dateArray.reduce((a, c) => Object.assign(a, { [c]: { selected: true, marked: true } }), {});
/*
{
	2021-02-06: {selected: true, marked: true}
	2021-02-08: {selected: true, marked: true}
	2021-02-09: {selected: true, marked: true}
}
*/

오브젝트[] → { {}, {}, … } 형태로 변경하기


const test = [
        {
          "maxAmount": 1500,
          "nutrientGroup": {
            "name": "오메가3"
          }
        },
        {
          "maxAmount": 50,
          "nutrientGroup": {
            "name": "유산균"
          }
        },
        {
          "maxAmount": 400,
          "nutrientGroup": {
            "name": "마그네슘"
          }
        },
        {
          "maxAmount": 70,
          "nutrientGroup": {
            "name": "비타민B"
          }
        },
        {
          "maxAmount": 2000,
          "nutrientGroup": {
            "name": "비타민C"
          }
        },
        {
          "maxAmount": 5000,
          "nutrientGroup": {
            "name": "비타민D"
          }
        },
        {
          "maxAmount": 15,
          "nutrientGroup": {
            "name": "멀티미네랄"
          }
        },
        {
          "maxAmount": 130,
          "nutrientGroup": {
            "name": "밀크씨슬"
          }
        },
        {
          "maxAmount": 1000,
          "nutrientGroup": {
            "name": "칼슘"
          }
        },
        {
          "maxAmount": 30,
          "nutrientGroup": {
            "name": "철분"
          }
        }
      ]


Object.assign(...test.map((maxInfo) => ({[maxInfo.nutrientGroup.name] : maxInfo.maxAmount})))


{
	마그네슘 : 400
	멀티미네랄 : 15
	밀크씨슬 : 130
	비타민B : 70
	비타민C : 2000
	비타민D : 5000
	오메가3 : 1500
	유산균 : 50
	철분 : 30
	칼슘 : 1000
}