We Keep Coding

how to return almost similar object without repeating the entire object again

I have a javascript object something like below:
something = {
a: 1,
b: 2,
c: 3,
}
In my “if” condition, I want to return the above object but in my “else” condition, I want to return the same object but without the third property. 
c: 3
  Is there a way I can do that without repeating  or writing the object again in the else condition and excluding the third property (c:3)
Hope I made the question clear. The reason I am doing this is because my if condition is very big and I don't want to write it again in the else block since it will be repeating the entire if logic but with one less property. Please let me know If I was unable to explain my problem

Make the base object without c, then add the c property in the if:
const base = {
a: 1,
b: 2,
};
if (cond) {
return { ...base, c: 3 };
} else {
return base;
}
Another option, by using && to conditionally spread in the c property:
return {
a: 1,
b: 2,
...(cond && { c: 3 })
};

You can use delete operator also as an alternative.
const something = {
a: 1,
b: 2,
c: 3,
};
if (condition) {
return something;
} else {
delete something.c;
return something;
}

javascript - how to return Json conditionally [duplicate]

I would like to create an object with a member added conditionally.
The simple approach is:
var a = {};
if (someCondition)
a.b = 5;
Now, I would like to write a more idiomatic code. I am trying:
a = {
b: (someCondition? 5 : undefined)
};
But now, b is a member of a whose value is undefined. This is not the desired result.
Is there a handy solution?
Update
I seek for a solution that could handle the general case with several members.
a = {
b: (conditionB? 5 : undefined),
c: (conditionC? 5 : undefined),
d: (conditionD? 5 : undefined),
e: (conditionE? 5 : undefined),
f: (conditionF? 5 : undefined),
g: (conditionG? 5 : undefined),
};

I think #InspiredJW did it with ES5, and as #trincot pointed out, using es6 is a better approach. But we can add a bit more sugar, by using the spread operator, and logical AND short circuit evaluation:
const a = {
...(someCondition && {b: 5})
}

const obj = {
...(condition) && {someprop: propvalue},
...otherprops
}
Live Demo:
const obj = {
...(true) && {someprop: 42},
...(false) && {nonprop: "foo"},
...({}) && {tricky: "hello"},
}
console.log(obj);

I suggest the following:
const a = {
...(someCondition? {b: 5}: {})
}

In pure Javascript, I cannot think of anything more idiomatic than your first code snippet.
If, however, using the jQuery library is not out of the question, then $.extend() should meet your requirements because, as the documentation says:
Undefined properties are not copied.
Therefore, you can write:
var a = $.extend({}, {
b: conditionB ? 5 : undefined,
c: conditionC ? 5 : undefined,
// and so on...
});
And obtain the results you expect (if conditionB is false, then b will not exist in a).

With EcmaScript2015 you can use Object.assign:
Object.assign(a, conditionB ? { b: 1 } : null,
conditionC ? { c: 2 } : null,
conditionD ? { d: 3 } : null);
var a, conditionB, conditionC, conditionD;
conditionC = true;
a = {};
Object.assign(a, conditionB ? { b: 1 } : null,
conditionC ? { c: 2 } : null,
conditionD ? { d: 3 } : null);
console.log(a);
Some remarks:
Object.assign modifies the first argument in-place, but it also returns the updated object: so you can use this method in a bigger expression that further manipulates the object.
Instead of null you could pass undefined or {}, with the same result. You could even provide 0 instead, because primitive values are wrapped, and Number has no own enumerable properties.
Even more concise
Taking the second point further, you could shorten it as follows (as #Jamie has pointed out), as falsy values have no own enumerable properties (false, 0, NaN, null, undefined, '', except document.all):
Object.assign(a, conditionB && { b: 1 },
conditionC && { c: 2 },
conditionD && { d: 3 });
var a, conditionB, conditionC, conditionD;
conditionC = "this is truthy";
conditionD = NaN; // falsy
a = {};
Object.assign(a, conditionB && { b: 1 },
conditionC && { c: 2 },
conditionD && { d: 3 });
console.log(a);

Conditionally Add a member to an Object
const trueCondition = true;
const falseCondition = false;
const obj = {
...(trueCondition && { student: 10 }),
...(falseCondition && { teacher: 2 }),
};
// { student: 10 }

Perfomance test
Classic approach
const a = {};
if (someCondition)
a.b = 5;
VS
spread operator approach
const a2 = {
...(someCondition && {b: 5})
}
Results:
The classic approach is much faster, so take in consideration that the syntax sugaring is slower.
testClassicConditionFulfilled(); // ~ 234.9ms
testClassicConditionNotFulfilled(); // ~493.1ms
testSpreadOperatorConditionFulfilled(); // ~2649.4ms
testSpreadOperatorConditionNotFulfilled(); // ~2278.0ms
function testSpreadOperatorConditionFulfilled() {
const value = 5;
console.time('testSpreadOperatorConditionFulfilled');
for (let i = 0; i < 200000000; i++) {
let a = {
...(value && {b: value})
};
}
console.timeEnd('testSpreadOperatorConditionFulfilled');
}
function testSpreadOperatorConditionNotFulfilled() {
const value = undefined;
console.time('testSpreadOperatorConditionNotFulfilled');
for (let i = 0; i < 200000000; i++) {
let a = {
...(value && {b: value})
};
}
console.timeEnd('testSpreadOperatorConditionNotFulfilled');
}
function testClassicConditionFulfilled() {
const value = 5;
console.time('testClassicConditionFulfilled');
for (let i = 0; i < 200000000; i++) {
let a = {};
if (value)
a.b = value;
}
console.timeEnd('testClassicConditionFulfilled');
}
function testClassicConditionNotFulfilled() {
const value = undefined;
console.time('testClassicConditionNotFulfilled');
for (let i = 0; i < 200000000; i++) {
let a = {};
if (value)
a.b = value;
}
console.timeEnd('testClassicConditionNotFulfilled');
}
testClassicConditionFulfilled(); // ~ 234.9ms
testClassicConditionNotFulfilled(); // ~493.1ms
testSpreadOperatorConditionFulfilled(); // ~2649.4ms
testSpreadOperatorConditionNotFulfilled(); // ~2278.0ms

more simplified,
const a = {
...(condition && {b: 1}) // if condition is true 'b' will be added.
}

What about using Enhanced Object Properties and only set the property if it is truthy, e.g.:
[isConditionTrue() && 'propertyName']: 'propertyValue'
So if the condition is not met it doesn't create the preferred property and thus you can discard it.
See: http://es6-features.org/#ComputedPropertyNames
UPDATE:
It is even better to follow the approach of Axel Rauschmayer in his blog article about conditionally adding entries inside object literals and arrays (http://2ality.com/2017/04/conditional-literal-entries.html):
const arr = [
...(isConditionTrue() ? [{
key: 'value'
}] : [])
];
const obj = {
...(isConditionTrue() ? {key: 'value'} : {})
};
Quite helped me a lot.

SIMPLE ES6 SOLUTION
Single condition with (&)
const didIPassExam = true
const study = {
monday : 'writing',
tuesday : 'reading',
/* check conditionally and if true, then add wednesday to study */
...(didIPassExam && {wednesday : 'sleep happily'})
}
console.log(study)
Dual condition with (? :)
const score = 110
//const score = 10
const storage = {
a:10,
b:20,
...(score > 100 ? {c: 30} : {d:40})
}
console.log(storage)
Explanation
Let's say you have storage object like this
const storage = {
a : 10,
b : 20,
}
and you would like to add a prop to this conditionally based on score
const score = 90
You would now like to add prop c:30 to storage if score is greater than 100.
If score is less than 100, then you want to add d:40 to storage. You can do like this
const score = 110
const storage = {
a:10,
b:20,
...(score > 100 ? {c: 30} : {d:40})
}
The above code gives storage as
{
a: 10,
b: 20,
c: 30
}
If score = 90
then you get storage as
{
a: 10,
b: 20,
d: 40
}
Codepen example

This is probably the shortest solution with ES6
console.log({
...true && {foo: 'bar'}
})
// Output: {foo:'bar'}
console.log({
...false && {foo: 'bar'}
})
// Output: {}

I made a small benchmark with one other option. I like to remove "dead weight" from some objects. Usually falsy values.
Here are the benny results:
clean
const clean = o => {
for (const prop in o) if (!o) delete o[prop];
}
clean({ value });
spread
let a = {
...(value && {b: value})
};
if
let a = {};
if (value) {
a.b = value;
}
results
clean : 84 918 483 ops/s, ±1.16% | 51.58% slower
spread : 20 188 291 ops/s, ±0.92% | slowest, 88.49% slower
if : 175 368 197 ops/s, ±0.50% | fastest

I would do this
var a = someCondition ? { b: 5 } : {};

If the goal is to have the object appear self-contained and be within one set of braces, you could try this:
var a = new function () {
if (conditionB)
this.b = 5;
if (conditionC)
this.c = 5;
if (conditionD)
this.d = 5;
};

You can add all your undefined values with no condition and then use JSON.stringify to remove them all :
const person = {
name: undefined,
age: 22,
height: null
}
const cleaned = JSON.parse(JSON.stringify(person));
// Contents of cleaned:
// cleaned = {
// age: 22,
// height: null
// }

This has long been answered, but looking at other ideas I came up with some interesting derivative:
Assign undefined values to the same property and delete it afterwards
Create your object using an anonymous constructor and always assign undefined members to the same dummy member which you remove at the very end. This will give you a single line (not too complex I hope) per member + 1 additional line at the end.
var a = new function() {
this.AlwaysPresent = 1;
this[conditionA ? "a" : "undef"] = valueA;
this[conditionB ? "b" : "undef"] = valueB;
this[conditionC ? "c" : "undef"] = valueC;
this[conditionD ? "d" : "undef"] = valueD;
...
delete this.undef;
};

If you wish to do this server side (without jquery), you can use lodash 4.3.0:
a = _.pickBy({ b: (someCondition? 5 : undefined) }, _.negate(_.isUndefined));
And this works using lodash 3.10.1
a = _.pick({ b: (someCondition? 5 : undefined) }, _.negate(_.isUndefined));

Below code snippet should work.
const a = {}
const conditionB = true;
const conditionC = true;
const conditionD = true;
const conditionE = true;
const b = {
...(conditionB && { b : 5}),
...(conditionC && { c : 5}),
...(conditionD && { d : 5}),
...(conditionE && { e : 5}),
};
console.log(b);

var a = {
...(condition ? {b: 1} : '') // if condition is true 'b' will be added.
}
I hope this is the much efficient way to add an entry based on the condition.
For more info on how to conditionally add entries inside an object literals.

Using lodash library, you can use _.omitBy
var a = _.omitBy({
b: conditionB ? 4 : undefined,
c: conditionC ? 5 : undefined,
}, _.IsUndefined)
This results handy when you have requests that are optional
var a = _.omitBy({
b: req.body.optionalA, //if undefined, will be removed
c: req.body.optionalB,
}, _.IsUndefined)

This is the most succinct solution I can come up with:
var a = {};
conditionB && a.b = 5;
conditionC && a.c = 5;
conditionD && a.d = 5;
// ...

i prefere, using code this it, you can run this code
const three = {
three: 3
}
// you can active this code, if you use object `three is null`
//const three = {}
const number = {
one: 1,
two: 2,
...(!!three && three),
four: 4
}
console.log(number);

const isAdult = true;
const obj = {
...(isAdult ? { age: 18 }: { age: 17}),
};
//>> { student: 18 }

I think your first approach to adding members conditionally is perfectly fine. I don't really agree with not wanting to have a member b of a with a value of undefined. It's simple enough to add an undefined check with usage of a for loop with the in operator. But anyways, you could easily write a function to filter out undefined members.
var filterUndefined = function(obj) {
var ret = {};
for (var key in obj) {
var value = obj[key];
if (obj.hasOwnProperty(key) && value !== undefined) {
ret[key] = value;
}
}
return ret;
};
var a = filterUndefined({
b: (conditionB? 5 : undefined),
c: (conditionC? 5 : undefined),
d: (conditionD? 5 : undefined),
e: (conditionE? 5 : undefined),
f: (conditionF? 5 : undefined),
g: (conditionG? 5 : undefined),
});
You could also use the delete operator to edit the object in place.

I hope this helps to solve your problem
<body>
<h1>GeeksforGeeks</h1>
<p id="geeks"></p>
<!-- Script to check array include
object or not -->
<script>
var obj = {"geeks1":10, "geeks2":12}
var arr = ["geeks1", "geeks2", "geeks3", obj];
if(arr.filter(value=> value==obj).length > 0)
document.write("true");
else
document.write("false");
</script>
</body>

Using lodash library, you can use _.merge
var a = _.merge({}, {
b: conditionB ? 4 : undefined,
c: conditionC ? 5 : undefined,
})
If conditionB is false & conditionC is true, then a = { c: 5 }
If both conditionB & conditionC are true, then a = { b: 4, c: 5 }
If both conditionB & conditionC are false, then a = {}

Wrap into an object
Something like this is a bit cleaner
const obj = {
X: 'dataX',
Y: 'dataY',
//...
}
const list = {
A: true && 'dataA',
B: false && 'dataB',
C: 'A' != 'B' && 'dataC',
D: 2000 < 100 && 'dataD',
// E: conditionE && 'dataE',
// F: conditionF && 'dataF',
//...
}
Object.keys(list).map(prop => list[prop] ? obj[prop] = list[prop] : null)
Wrap into an array
Or if you want to use Jamie Hill's method and have a very long list of conditions then you must write ... syntax multiple times. To make it a bit cleaner, you can just wrap them into an array, then use reduce() to return them as a single object.
const obj = {
X: 'dataX',
Y: 'dataY',
//...
...[
true && { A: 'dataA'},
false && { B: 'dataB'},
'A' != 'B' && { C: 'dataC'},
2000 < 100 && { D: 'dataD'},
// conditionE && { E: 'dataE'},
// conditionF && { F: 'dataF'},
//...
].reduce(( v1, v2 ) => ({ ...v1, ...v2 }))
}
Or using map() function
const obj = {
X: 'dataX',
Y: 'dataY',
//...
}
const array = [
true && { A: 'dataA'},
false && { B: 'dataB'},
'A' != 'B' && { C: 'dataC'},
2000 < 100 && { D: 'dataD'},
// conditionE && { E: 'dataE'},
// conditionF && { F: 'dataF'},
//...
].map(val => Object.assign(obj, val))

Define a var by let and just assign new property
let msg = {
to: "hito#email.com",
from: "hifrom#email.com",
subject: "Contact form",
};
if (file_uploaded_in_form) { // the condition goes here
msg.attachments = [ // here 'attachments' is the new property added to msg Javascript object
{
content: "attachment",
filename: "filename",
type: "mime_type",
disposition: "attachment",
},
];
}
Now the msg become
{
to: "hito#email.com",
from: "hifrom#email.com",
subject: "Contact form",
attachments: [
{
content: "attachment",
filename: "filename",
type: "mime_type",
disposition: "attachment",
},
]
}
In my opinion this is very simple and easy solution.

For the sake of completeness you can use Object.defineProperty() if you want to add additional descriptors. Note I purposely added enumerable: true otherwise the property wouldn't appear in the console.log(). The advantage with this approach is that you can also use Object.defineProperties() if you want to add multiple new properties (However, in this way every property will be dependent on the same condition...)
const select = document.getElementById("condition");
const output = document.getElementById("output");
let a = {};
let b = {};
select.onchange = (e) => {
const condition = e.target.value === "true";
condition
? Object.defineProperty(a, "b", {
value: 5,
enumerable: true,
})
: (a = {});
condition
? Object.defineProperties(b, {
c: {
value: 5,
enumerable: true,
},
d: {
value: 6,
enumerable: true,
},
e: {
value: 7,
enumerable: true,
},
})
: (b = {});
outputSingle.innerText = JSON.stringify(a);
outputMultiple.innerText = JSON.stringify(b);
};
Condition:
<select id="condition">
<option value="false">false</option>
<option value="true">true</option>
</select>
<br/>
<br/>
Single Property: <pre id="outputSingle">{}</pre><br/>
Multiple Properties: <pre id="outputMultiple">{}</pre>

If function parameter is empty is there a way to pass ...rest of values to that parameter?

If function parameter is empty is there a way to pass ...rest of the destructured values to that parameter with spread operator?
For an example:
const obj = {
/* param: {
a: 2,
b: 3
}, */
c: 1,
d: 3
}
const fun = ({ param = ...rest}) => {
console.log(param);
};
fun(obj);
In this case param is "undefined" and i would like to get the rest of the obj assign to the param {c:1, d:3}
In case when param is defined, I would like to have param data {a:2, b:3}

Use a ternary operator in the function parameter section to determine which properties to log:
const obj = {
/*param: {
a: 2,
b: 3
},*/
c: 1,
d: 3
}
const fun = (args = obj.param ? obj.param : obj) => {
console.log(args)
}
fun(obj)

Javascript: Modifying nested object in ES6 shorthand

Consider a function returns an nested object and I want to modify the property inside the nested object.
In the below example, I'm calling the function many times or I need to store it in a temporary variable. Is there a way to invoke only once inside the braces and spread/modify inside the same object many times.
const getObject = () => {
return {
a: {
b: {
c: 1,
d: 2,
}
},
e: 3
}
}
var modifiedD = {
...getObject(),
a: {
b: {
...getObject().a.b,
d: 4
}
}
}
console.log(modifiedD);

when declaring a key after ...getObject() it replace the whole value. It does not merge the inner object behind a.
So you could do it as you have done and call getObject() multiple time.
An other solution could be to handle it using a function of your own merging the objects, like :
function mergeObjects(obj1, obj2) {
// We are going to copy the value of each obj2 key into obj1
Object.keys(obj2).forEach((x) => {
// If we have an object, we go deeper
if (typeof obj2[x] === 'object') {
if (obj1[x] === void 0) {
obj1[x] = {};
}
mergeObjects(obj1[x], obj2[x]);
} else {
obj1[x] = obj2[x];
}
});
return obj1;
}
const getObject = () => {
return {
a: {
b: {
c: 1,
d: 2,
}
},
e: 3
}
}
const modifiedD = mergeObjects(getObject(), {
a: {
b: {
d: 4,
},
},
});
console.log(modifiedD);
WARNING, the function I have made mutate the object which may not be the best answer
Or call it only once and then set the keys one by one like :
const getObject = () => {
return {
a: {
b: {
c: 1,
d: 2,
}
},
e: 3
}
}
const modifiedD = getObject();
modifiedD.a.b.d = 4;
console.log(modifiedD);

Further to my previous answer, as Grégory NEUT pointed out you could have a lot larger complexity.
If so, you could simply create two objects and then merge them. I found a function code snippet to be able to do that using Object.assign
Example:
const getObject = () => {
return {
a: {
b: {
c: 1,
d: 2,
}
},
e: 3
}
}
var modifiedD = getObject();
var newD = {
a: {
b: {
d: 4
},
y: 1
},
z: 20
}
/** TAKEN FROM https://gist.github.com/ahtcx/0cd94e62691f539160b32ecda18af3d6 **/
// Merge a `source` object to a `target` recursively
const merge = (target, source) => {
// Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties
for (let key of Object.keys(source)) {
if (source[key] instanceof Object) Object.assign(source[key], merge(target[key], source[key]))
}
// Join `target` and modified `source`
Object.assign(target || {}, source)
return target
}
modifiedD = merge(modifiedD, newD);
console.log(modifiedD);

You can try the following:
getParentObj(path, obj) {
return path.split('.').reduce((o,i)=>o[i], obj);
}
const parent = getParentObj('a.b', getObject());
parent[d] = 24;

Referencing self from anonymous function

Not sure how to word this, I basically want to extend my class properties so that users can override them. However I'd prefer the anonymous function which extends the properties to just self-execute.
var extend = function(target, sources) {
if (!sources.length) return target;
const source = sources.shift();
if (isObject(target) && isObject(source)) {
for (const key in source) {
if (isObject(source[key])) {
if (!target[key]) Object.assign(target, { [key]: {} });
extend(target[key], source[key]); // <-- Line 9
} else {
Object.assign(target, { [key]: source[key] });
}
}
}
return extend(target, sources);
}.call(this, this, [ defaults, options ]);
This appears to work up until line 9 (see comment above in code). It can't seem to reference itself. However this seems to work fine if this is a named function rather than anonymous.
How can I get this to work?

Why you need it to be anonymous? Debugging gets worse. You can still use a function expression.
const myfunc = function nameFunctionExpression(i) {
if(i === 10) {
return i;
}
nameFunctionExpression(i + 1);
};
myfunc(0);
I am not sure about what you are trying to accomplish. Provide a way to override properties? Maybe post an usage example?
function extend(obj, rest) {
return Object.assign(obj, rest);
}
const obj = { a: 1, nested: { c: 3 } };
// { a: 2, nested: { c: 4 }, b: 3 }
console.log(extend(obj, { a: 2, b: 3, nested: { c: 4 } }));