Merge two objects into one with conditional attributes in Javascript

Question

I have the following dilemma, I need to assemble an object to send to a API rest. But I have data that starts from a variable. I thought of several ways to do this but I don’t know which one is right, or if none of them are right.

if (true){
  var obj = {
    "a": a,
    "b": b,
    "c": c,
    "d": d,
    "e": E,
    "f": F,
    "g": G,
  }
} else {
  var obj = {
    "a": a,
    "b": b,
    "c": c,
    "d": d,
    "e": H,
    "f": I,
    "g": J,
  }
}

// envio via ajax este obj para a API.

This was the first way I did it. But I think I write too much, if you notice, I did this because some of the object values, I’m going to take either from one variable already declared, or from another. (in this object I put only 7 items to not get too extensive, but in my case there are more than 20 items, so my code gets even bigger by typing the object twice.

After that I thought of making the following way:

if (true){
 var x = E;
 var y = F;
 var z = G;
} else {
 var x = H;
 var y = I;
 var z = J;
}

var obj = {
  "a": a,
  "b": b,
  "c": c,
  "d": d,
  "e": x,
  "f": y,
  "g": z,
}

// envio via ajax este obj para a API.

In my code, the items that are conditional, are 5, of a total of approximately 23. so doing this way, I managed to save some lines.

But I wasn’t happy yet, I know the push function and the Concat function (in my project I use jquery and angular.js tbm).

But with these functions, it forms 1 array with 2 objects. There is a way to do this "merge" that results in 1 array of 1 single object?

Answer 1

Another way to do what you need is the one below. The interesting points are:

1. Store the return of the condition in a variable to, if the condition changes over time, simply change a line of code;
2. Using the ternary operator on attributes that have conditional value, avoiding rewriting the object, or part of it, more than once;

var condicao = true;

var obj = {
  "a": 1,
  "b": 2,
  "c": 3,
  "d": 4,
  "e": (condicao) ? 5 : -5,
  "f": (condicao) ? 6 : -6,
  "g": (condicao) ? 7 : -7
};

console.log(obj);

The code output, to the true condition:

{
  "a": 1,
  "b": 2,
  "c": 3,
  "d": 4,
  "e": 5,
  "f": 6,
  "g": 7
}

Already, for the false condition:

{
  "a": 1,
  "b": 2,
  "c": 3,
  "d": 4,
  "e": -5,
  "f": -6,
  "g": -7
}

Note: I used the numerical values to be able to reproduce the result without having to define numerous variables, however, in its application, the values of the attributes can be defined from variables naturally.

Ternary operator

Ternary operator has the following syntax:

condition ? expr1 : expr2 

In which condition must be an expression, or variable, boolean that is evaluated astrue or false and Expr1, expr2 are expressions with values of any kind. The description of the function is as follows: if condition for true, the operator returns the value of Expr1, if no, returns the value of expr2.

This way, having a code var x = a > 2? 1 : -1 would be the same as having:

if (a > 2) {
    x = 1;
} else {
    x = -1;
}

Only with much less code and more readable.