javascript - Add property to object literal and return

Question

I have object literal what I consider as base object:

var obj = {
   key1   : 'value1',
   key2   : 'value2'
}

and would like to use this object and pass it to function with extention like

myFunction( obj + { key3 : 'value3' } );

// param became:
{
   key1   : 'value1',
   key2   : 'value2',
   key3   : 'value3'
}

or

myFunction( obj + { key2 : 'new value2' } );

// param became:
{
   key1   : 'value1',
   key2   : 'new value2'
}

+ operator is not correct for it. How I can do it? Is it a way ?

EDIT: Do you want to permanently alter obj? - No, I would like to able to reuse it for next call as base.

Answer 1

With ES2018 or TypeScript 2.1 you can use the object spread syntax.

// properties on the right overwrite properties on the left

// Overwrite properties from obj
myFunction( { ...obj, key3: 'value3' } );

// Don't overwrite properties from obj
myFunction( { key3: 'value3', ...obj } );

With ES2015 you can use Object.assign.

// Object.assign(a, b, c, ..) - copy properties from b to a, then from c to a etc.

// Overwrite properties from obj
myFunction( Object.assign({}, obj, { key3: 'value3' }) );

// Don't overwrite properties from obj
myFunction( Object.assign({ key3: 'value3' }, obj) );

---

Demo

var obj = { key1: 'value1', key2: 'value2'}

console.log('-- Object Spread --');
console.log({ ...obj, key3: 'value3' });
console.log('overwrite');
console.log({ ...obj, key2: 'NEW2' });
console.log('no overwrite');
console.log({ key2: 'NEW2', ...obj });

console.log('-- Object Assign --');
console.log(Object.assign({ key3: 'value3' }, obj));
console.log('overwrite');
console.log(Object.assign({}, obj, { key2: 'NEW2' }));
console.log('no overwrite');
console.log(Object.assign({ key2: 'NEW2' }, obj));


console.log('-- Original Object unchanged --');
console.log(obj);

Answer 2

If you're okay with altering obj, just change it before you pass it:

var obj = { /* stuff */ };

obj.key3 = 'value3';
myFunction(obj);

---

Do you want to permanently alter obj? - No, I would like to able to reuse it for next call as base.

Okay, so you need to make a copy of obj, and alter the copy — either before you call myFunction:

var obj = { /* stuff */ };
var extension = {key3: 'value3'};

myFunction($.extend({}, obj, extension));

or pass obj and the "extension" to myFunction:

var obj = { /* stuff */ };
var extension = {key3: 'value3'};

myFunction(obj, extension);

and have myFunction do the work:

function myFunction(base, ext)
{
    if (typeof base === 'object' && typeof ext === 'object')
    {
        base = $.extend({}, base, ext);
    }

    // rest of the function logic here
}

If you're already (or don't mind) using jQuery, $.extend() will be your best friend for the task.