체인의정석

javascript 객체에 key, value 값 추가하기 본문

개발/backend

javascript 객체에 key, value 값 추가하기

체인의정석 2022. 12. 9. 11:40
728x90
반응형

객체에 key, value값 추가하기를 찾아보다가 좋은 링크를 발견했다.


출저 : https://stackoverflow.com/questions/1168807/how-can-i-add-a-key-value-pair-to-a-javascript-object

 

How can I add a key/value pair to a JavaScript object?

Here is my object literal: var obj = {key1: value1, key2: value2}; How can I add field key3 with value3 to the object?

stackoverflow.com

Conclusions

  • fastest mutable solutions are much faster than fastest immutable (>10x)
  • classic mutable approach like obj.key3 = "abc" (MA,MB) is fastest
  • for immutable solutions the {...obj, key3:'abc'} and Object.assign (IA,IB) are fastest
  • surprisingly there are immutable solutions faster than some mutable solutions for chrome (MC-IA) and safari (MD-IB)

여러 함수가 있지만 속도는 클래식한 함수가 가장 빠르다고 한다.

객체.키값 = "value" 또는 

객체['키값']= "value" 이다.

 

무조건 속도를 빠르게 해야하는 상황이므로 (크롬기준) MA 방식으로 추가해야 겠다.

 

위 링크에서 가져온 소스코드

var o = {
    key1: true,
    key2: 3,
};

var log= (s,f)=> console.log(`${s} --> ${JSON.stringify(f({...o}))}`);



function MA(obj) {
  obj.key3 = "abc";
  return obj;
}

function MB(obj) {
  obj['key3'] = "abc";
  return obj;
}

function MC(obj) {
  Object.assign(obj, {key3:'abc'});
  return obj;
}

function MD(obj) {
  Object.defineProperty(obj, 'key3', {
    value: "abc",       // undefined by default
    enumerable: true,      // false by default
    configurable: true,    // false by default
    writable: true         // false by default
  });
  return obj;
}

function IA(obj) {
  return {...obj, key3:'abc'};
}

function IB(obj) {
  return Object.assign({key3:'abc'}, obj);
}

function IC(obj) {
  let ob= JSON.parse(JSON.stringify(obj))
  ob.key3 = 'abc';
  return ob;
}


function ID(obj) {
    let ob= Object.fromEntries(Object.entries(obj));
  ob.key3 = 'abc';
  return ob;
}

function IE(obj) {
    return Object.fromEntries(Object.entries(obj).concat([['key3','abc']]))
}



log('MA',MA);
log('MB',MB);
log('MC',MC);
log('MD',MD);
log('IA',IA);
log('IB',IB);
log('IC',IC);
log('ID',ID);
log('IE',IE);

 

728x90
반응형
Comments