Why doesn't an if/else statement work in Object.assign() and .map?

Question

I'm learning about javascript objects and trying to wrap my head around prototype.map. The goal is to create a new array filled with objects (using the below array filled with objects) without modifying the original objects. If the character's name is in the badGuys array then their status will be 'evil' otherwise their status will be 'good'.

These were the two solutions I came up with:

 const badGuys = ['Joker', 'Two Face', 'Riddler', 'Bane']; const characters = [ { name: 'Flash', status: null }, { name: 'Joker', status: null }, { name: 'Batman', status: null }, { name: 'Superman', status: null }, { name: 'Two Face', status: null }, { name: 'Bane', status: null }, { name: 'Riddler', status: null }, ]; //Works: const sortedCharacters = characters.map(function (character) { return Object.assign({}, character, { status: badGuys.includes(character.name) ? "evil" : "good" }); }); //Doesn't work: const sortedCharacters = characters.map(function (character) { return Object.assign({}, character, { status: if (badGuys.includes(character.name)) { "evil" } else { "good" } }); }); 

Using the ternary operator works but an if/else statement does not. Why?

Answer 1

The important difference between if-else and the ternary operator is that in Javascript the if-else statement is a statement and the ternary operator is an expression .

This means that the if-else construct does not have a value whereas the ternary does. This means that you cannot put the if-else statement in a position where a value is required.

Answer 2

This happens because it is not a valid syntax. The correct one is at the following snippet.

Why the ternary operator works?

Because the epxression before the ternary operator is evaluated and if it's true the value of status is evil. Otherwise is good.

status: badGuys.includes(character.name) ? "evil" : "good"

At the following snippet we have declared a function that returns that you want.

 const badGuys = ['Joker', 'Two Face', 'Riddler', 'Bane']; const characters = [ { name: 'Flash', status: null }, { name: 'Joker', status: null }, { name: 'Batman', status: null }, { name: 'Superman', status: null }, { name: 'Two Face', status: null }, { name: 'Bane', status: null }, { name: 'Riddler', status: null }, ]; const sortedCharacters = characters.map(function (character) { return Object.assign({}, character, { status: function(){ if (badGuys.includes(character.name)) { return "evil" } else { return "good" } } }); }); 

But this is a quite different thing. You are using a function in this case. I would really like to know why the normal if condition doesn't work as expected

As you can read from the Language documentation

An Object is logically a collection of properties. Each property is either a data property, or an accessor property:

• A data property associates a key value with an ECMAScript language value and a set of Boolean attributes.
• An accessor property associates a key value with one or two accessor functions, and a set of Boolean attributes. The accessor functions are used to store or retrieve an ECMAScript language value that is associated with the property.

A data property associates a key value with the attributes

• [[Value]]
• [[Writable]]
• [[Enumerable]]
• [[Configurable]]

What is the value ?

The value retrieved by a get access of the property.

Which is it's Domain?

Any ECMAScript language type

Which are the ECMAScript language types?

• Undefined Type
• Null Type
• Boolean Type
• String Type
• Symbol Type
• Number Type
• Object Type

That being said, an if/else statement cannot be stand as a value related to a key of an object.