JS: Modify Value/Pair in JS Object

Question

I\'m trying to work out the best way to modify an object without writing out a similar object three times. So I have these three objects:

var object1 = {
    sta         


        

Answer 1

Create a function

function createObj(start,end,type){
    return  {
        start : start,
        end   : end,
        type  : type
    }
}
var object1 = createObj(start,end,1);
var object2 = createObj(start,end,2);
var object3 = createObj(start,end,3);

// if start and end are in scope to the function 
function createObj(type){
    return  {
        start : start,
        end   : end,
        type  : type
    }
}
var object1 = createObj(1);
var object2 = createObj(2);

UPDATE in lieu of the various answers given.

As there are three answers that are all valid I will present speed tests from jperf.com for both creation and object use.

The test can be found Here jsperf.com

Testing in Chrome 47.0.2526.27 on Windows Server 2008 R2 / 7

Creation Tests

• Create via Object Assign : 84,270 ±0.94%
• Create via function : 18,267,444 ±1.72%
• Create via new and prototype :7,886,088 ±1.69%
• Create inline (literals) : 29,203,404 ±1.34% Fastest Create

Use tests.

• Use for Object Assign : 266,301,340 ±2.45%
• Use for function created : 301,185,103 ±1.78% Fastest Use
• Use for new and prototype created : 18,628,401 ±3.14%
• Use for inline created : 272,981,998 ±2.74%

As can be seen object.assign is very slow on when it come to creating object, but holds its own when the objects are being used.

Creating prototypes is about the worst that you can do. Though not as slow as Object assign it seriously suffers when it comes to using objects created this way. Running at below one tenth the speed of the next fastest.

As expected creating objects inline is by far the fastest, though not the most convenient. Yet it was not the fastest when it came to use which is a bit of a surprise.

The fastest for use is creation via function. Though I do not know why and suspect it has to do with V8's optimisation.

Each method has its pros and cons and should be judged on its use and project standards and conventions. In most cases speed is not an issue. Though keep in mind "green coding" favours code that takes the minimum number of cpu cycles, of which execution speed can give a good estimate of. Saving cycles saves power, money, and the lovely world we live on.

Below is the code for the tests. I think I was fair on all four methods.

//================================================================
// Create via Object Assign
var object1 = {
    start: start,
    end: end,
    type: 1
};

var object2 = Object.assign({}, object1, {type: 2});
var object3 = Object.assign({}, object1, {type: 3});

//================================================================
//Create via function
function createObj(type){
    return  {
        start : start,
        end   : end,
        type  : type
    }
}
var object1 = createObj(1);
var object2 = createObj(2);
var object3 = createObj(3);

//================================================================
//Create via new and prototype
function ObjectMaker (typeVal) {
  this.type = typeVal;
}

ObjectMaker.prototype.start = start;
ObjectMaker.prototype.end = end;

var object1 = new ObjectMaker(1);
var object2 = new ObjectMaker(2);
var object2 = new ObjectMaker(3);

//================================================================
// Create inline objects
var object1 = {
    start: start,
    end: end,
    type: 1
};
var object2 = {
    start: start,
    end: end,
    type: 2
};
var object3 = {
    start: start,
    end: end,
    type: 3
};

Use tests.

//================================================================
// Use case for object created with Object.assign
objectB2.end += 1;
objectB2.start += 1;
objectB2.type += 1;

//================================================================
// Use case for object create with new
objectA1.end += 1;
objectA1.start += 1;
objectA1.type += 1;

//================================================================
// Use case for function created object
objectC1.end += 1;
objectC1.start += 1;
objectC1.type += 1;

//================================================================
// Use of literal object create
objectD1.end += 1;
objectD1.start += 1;
objectD1.type += 1;

Setup code

  Benchmark.prototype.setup = function() {
    // assuming start and end are global
    var start = 0;
    var end = 10;

    // Prototype Method
    // object for use test 
    function ObjectMakerA (typeVal) {
      this.type = typeVal;
    }
    ObjectMakerA.prototype.start = start;
    ObjectMakerA.prototype.end = end;
    var objectA1 = new ObjectMakerA(1);

    // Object assign method 
    // for use test
    var objectB1 = {
        start: start,
        end: end,
        type: 1
    };
    // object to use
    var objectB2 = Object.assign({}, objectB1, {type: 2});

    // Anonymous object
    // for use test
    function createObj1(type){
        return  {
            start : start,
            end   : end,
            type  : type
        }
    }
    // object for use test
    var objectC1 = createObj1(1);

    // Literal object for use test
    var objectD1 = {
        start: start,
        end: end,
        type: 1
    };
  };