Question

147

Add elements inside Array conditionally in JavaScript

rated 0 times [ 150] [ 3] / answers: 1 / hits: 19616 / 5 Years ago, tue, may 7, 2019, 12:00:00

When I try to merge two objects using the spread operator conditionally, it works when the condition is true or false:

let condition = false;

let obj1 = { key1: 'value1'}

let obj2 = {

  key2: 'value2',

  ...(condition && obj1),

};



// obj2 = {key2: 'value2'};

When I try to use the same logic with Arrays, it only works when the condition is true:

let condition = true;

let arr1 = ['value1'];

let arr2 = ['value2', ...(condition && arr1)];



// arr2 = ['value2', 'value1']

If the condition is false an error is thrown:

let condition = false;

let arr1 = ['value1'];

let arr2 = ['value2', ...(condition && arr1)];



// Error

Why is the behaviour different between Array and Object?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

keric

Add To Favorites

Follow

Total Points: 572

Total Questions: 93

Total Answers: 97

Location: Cyprus

Member since Mon, Oct 24, 2022

2 Years ago

keric questions

1 Event.target.dataset returning undefined javascript

Thu, Dec 2, 21, 00:00, 3 Years ago

1 How to make a horizontal line without using < hr> tag?

Mon, Jul 19, 21, 00:00, 3 Years ago

1 Input with type=number that allows only numbers to be typed

Thu, Jul 15, 21, 00:00, 3 Years ago

1 Does declaring a React.memo inside another functional component provide the memoization performance as it is intended?

Sat, Jan 30, 21, 00:00, 3 Years ago

1 ReactJS useEffect() is running every time on page load

Thu, Nov 5, 20, 00:00, 4 Years ago

View All

answered 5 Years ago cruzjenseny · Accepted Answer

When you spread into an array, you call the Symbol.iterator method on the object. && evaluates to the first falsey value (or the last truthy value, if all are truthy), so

let arr2 = ['value2', ...(condition && arr)];

results in

let arr2 = ['value2', ...(false)];

But false does not have a Symbol.iterator method.

You could use the conditional operator instead, and spread an empty array if the condition is false:

let condition = false;

let arr1 = ['value1'];

let arr2 = ['value2', ...(condition ? arr1 : [])];

console.log(arr2);

(This works because the empty array does have the Symbol.iterator method)

Object spread is completely different: it copies own enumerable properties from a provided object onto a new object. false does not have any own enumerable properties, so nothing gets copied.