Attempting to grasp the concept of ternary condition logic in this specific scenario

Question

Attempting to grasp the concept of ternary condition logic in this specific scenario

Recently, I delved into a code kata involving an array of football scores such as:

["3:1", "2:2"]   (The total points here would be 4, 3 + 1)

After applying certain rules and summing up the points, I came across an interesting solution:

const points = g => g.reduce((a, [x, _, y]) => a + (x > y ? 3 : x == y), 0)

Just to clarify, the rules dictate that if the 1st value is greater than the 2nd, return 3 points, if they are equal, return 1 point, otherwise return 0. This mimics a traditional football match scoring system.

I'm curious about how the "x == y" part functions in this scenario. According to the rule, if "x == y", a single point should be returned. Can someone simplify this with an example?

Also, if someone could shed light on the "[x, _, y]" part, I would be grateful. I understand that it's supposed to represent the current item in the array, but since the current item is a string and not an array, I'm a bit confused about what's happening here.

javascript arrays ecmascript-6 reduce

Answer 1

Answer №1

The way JavaScript handles true and false values is crucial in understanding the outcome. You can test this in the console by entering the following:

let x = 1;
let y = 2;
2 + (x == y);

What will the result be in this case? Evaluating x == y gives us false, so the last line simplifies to:

2 + (false);

When resolving the addition, JavaScript turns false into a number, which in JavaScript equals 0. Therefore, the expression becomes:

2 + 0

Now, let's try another example:

let x = 1;
let y = 1;
2 + (x == y);

What outcome do we anticipate this time? With x == y evaluating to true, which is coerced to a 1, the calculation becomes:

2 + 1;

Answer 2

The way JavaScript handles true and false values is crucial in understanding the outcome. You can test this in the console by entering the following:

let x = 1;
let y = 2;
2 + (x == y);

What will the result be in this case? Evaluating x == y gives us false, so the last line simplifies to:

2 + (false);

When resolving the addition, JavaScript turns false into a number, which in JavaScript equals 0. Therefore, the expression becomes:

2 + 0

Now, let's try another example:

let x = 1;
let y = 1;
2 + (x == y);

What outcome do we anticipate this time? With x == y evaluating to true, which is coerced to a 1, the calculation becomes:

2 + 1;

Answer 3

Answer №2

Breaking down the string

x represents the first character, _ is a variable that is not used, and y stands for the third character;

const [x, _, y] = "7:2";

console.log(x);
console.log(_);
console.log(y);

Answer 4

Breaking down the string

x represents the first character, _ is a variable that is not used, and y stands for the third character;

const [x, _, y] = "7:2";

console.log(x);
console.log(_);
console.log(y);

Answer 5

Answer №3

One interesting quirk in JavaScript is how type coercion can lead to surprising results.

For example, true can be coerced into 1 when used in arithmetic operations like this:

console.log('hi' == 'hi');  // true
console.log(0 + (true));  // 1
console.log(0 + ('hi' == 'hi'));  // 1

Answer 6

One interesting quirk in JavaScript is how type coercion can lead to surprising results.

For example, true can be coerced into 1 when used in arithmetic operations like this:

console.log('hi' == 'hi');  // true
console.log(0 + (true));  // 1
console.log(0 + ('hi' == 'hi'));  // 1

Answer 7

Answer №4

Check out this node session for a lesson. It demonstrates modern JS string-to-array destructuring and some boolean behaviors.

micha@linux-micha: ~
$ node
> [...arr] = "hello";
'hello'
> [...arr]
[ 'h', 'e', 'l', 'l', 'o' ]
> [x, dummy, y] = "3:2"
'3:2'
> x
'3'
> y
'2'
> dummy
':'
> typeof (x == y)
'boolean'
> typeof true
'boolean'
> typeof false
'boolean'
> 1 + true
2
> 1 + false
1
>

From this node session, observe how "3:2" is deconstructed into an array, resulting in x=3, y=2. Therefore, x==y evaluates to true. Within the function, there is a + operation that converts the boolean true value (x==y) to a numeric 1. This leads to a final output of 1.

Best regards, M.

Answer 8

Check out this node session for a lesson. It demonstrates modern JS string-to-array destructuring and some boolean behaviors.

micha@linux-micha: ~
$ node
> [...arr] = "hello";
'hello'
> [...arr]
[ 'h', 'e', 'l', 'l', 'o' ]
> [x, dummy, y] = "3:2"
'3:2'
> x
'3'
> y
'2'
> dummy
':'
> typeof (x == y)
'boolean'
> typeof true
'boolean'
> typeof false
'boolean'
> 1 + true
2
> 1 + false
1
>

From this node session, observe how "3:2" is deconstructed into an array, resulting in x=3, y=2. Therefore, x==y evaluates to true. Within the function, there is a + operation that converts the boolean true value (x==y) to a numeric 1. This leads to a final output of 1.

Best regards, M.

Answer 9

Answer №5

Strings can be treated like arrays with indexes, allowing access to specific characters:

Therefore, it is possible to destructure strings.

console.log("3:1"[0]);
console.log("3:1"[1]);
console.log("3:1"[2]);

.as-console-wrapper { max-height: 100% !important; top: 0; }

In this example, the first, second, and third indexes are being accessed [x, _, y]

let [x, _, y] = "3:1";
console.log(x, _, y);

Coercion is demonstrated by a + (x == y), where true results in 1 and false results in 0.

console.log(1 + false);
console.log(1 + true);

Answer 10

Strings can be treated like arrays with indexes, allowing access to specific characters:

Therefore, it is possible to destructure strings.

console.log("3:1"[0]);
console.log("3:1"[1]);
console.log("3:1"[2]);

.as-console-wrapper { max-height: 100% !important; top: 0; }

In this example, the first, second, and third indexes are being accessed [x, _, y]

let [x, _, y] = "3:1";
console.log(x, _, y);

Coercion is demonstrated by a + (x == y), where true results in 1 and false results in 0.

console.log(1 + false);
console.log(1 + true);

Attempting to grasp the concept of ternary condition logic in this specific scenario

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

After receiving a data token from the server in one controller, how can I efficiently utilize that token in a different AngularJS controller?

Transforming jQuery code to pure vanilla Javascript

It appears that the JavaScript array is able to modify itself autonomously

Listen for changes in the clientWidth of an element in Vue 3

How to Stop Browser Tooltip from Displaying HTML Tags within "innerHtml" in Angular 6

Issue with OnChange event in HTML and Adding Content with Jquery

What could be causing my issue with the if-else condition not functioning properly?

Tips for mocking a particular http resource (URL) solely in Angular

Issue with dynamically adjusting flex box width using JavaScript

Looking for some help with tweaking this script - it's so close to working perfectly! The images are supposed to show up while

The statement ""x=x || 4" will result in a `ReferenceError: x is not defined` because the

When JSON contains slashes, JSON.parse will trigger an error

Showcasing pictures with a prominent large image accompanied by two smaller ones on the right side

Exploring the process of incorporating a JavaScript library into an Angular project

What is the best way to retrieve the chosen option when clicking or changing using jQuery?

I'm encountering an issue where the data in my personalDeatail model's add value is not updating automatically. Can someone please help me

Is it possible to update my services list based on which checkboxes I choose to uncheck at the top?

How to use jQuery to iterate over changing elements and retrieve their data values

I am struggling to showcase the values of character names stored within an array

Dealing with non-string values (such as Date, Double, Boolean) when creating JSON through iterative mapping with Map and Object Array in Scala