What the logic behind b1 ? b1 : b2 in my coding in if-conditions?

Question

1.Here is the assignment.

Declare a function or that works like ||, but without using the || operator.
/**

1. @param {any} ??? - the first operand
2. @param {any} ??? - the second operand
3. @returns {any} the same result as applying the || operator to the given operands, in order

2.Here is what tried(actually people gave me advice on return b1 ? b1 : b2.But i couldn't understand it ,and haven't found a proper explanation about it online.

function or(b1, b2) {
  if (b1 == false && b2 == false) return false;
  else return b1 ? b1 : b2;
}

3.Here are the coding tests, and the code above passed all of them. But would anyone tell me the logic of b1 ? b1 : b2. I am a beginner, please help me !

//TEST 1

actual = or("bananas", false);

expected = "bananas";

if (actual === expected) {
  console.log("Yay! Test PASSED.");
} else {
  console.error("Test FAILED. Keep trying!");
  console.log("    actual: ", actual);
  console.log("  expected: ", expected);
}

//TEST 2

actual = or("", "bananas");

expected = "bananas";

if (actual === expected) {
  console.log("Yay! Test PASSED.");
} else {
  console.error("Test FAILED. Keep trying!");
  console.log("    actual: ", actual);
  console.log("  expected: ", expected);
}

//TEST 3

actual = or(true, true);

expected = true;

if (actual === expected) {
  console.log("Yay! Test PASSED.");
} else {
  console.error("Test FAILED. Keep trying!");
  console.log("    actual: ", actual);
  console.log("  expected: ", expected);
}

//TEST 4

actual = or(true, false);

expected = true;

if (actual === expected) {
  console.log("Yay! Test PASSED.");
} else {
  console.error("Test FAILED. Keep trying!");
  console.log("    actual: ", actual);
  console.log("  expected: ", expected);
}

Answer 1

b1 ? b1 : b2

This means that if b1 is true/valid it will simply returns the result due to code of b1 otherwise it will simply return the result due to code of b2

Answer 2

b1 ? b1 : b2 is using a Ternary Operation

If you were to write it as a if-else statement it would look like

if (b1 === true) {
  return b1;
} else {
  return b2;
}

Answer 3

function or(b1, b2) {
  if (b1 == false && b2 == false) return false;
  else return b1 ? b1 : b2;
}

Multiple things are happing Headers. Here, You have a test function with falsy check. Falsy is validateNumber, it can be null, blank string or zero. The condition will always return false. If you really looking to test value with the type you should use === instead.

console.log(Boolean("")) //false
console.log(Boolean(null))//false

console.log(Boolean(0))//false

console.log(Boolean(" "))//true
console.log(Boolean("1"))//true

Answer 4

You can replace or function like this.

function or(b1, b2) {
  if (b1) return b1;
  if (b2) return b2;
  return false;
}

Answer 5

b1 ? b1: b2 is using Ternary Operation

In simple words it can be interpreted as

   condition ? (statement when condition is True) : (statement when condition is false)

Since it is using three operands , hence called Ternary(three) Operation.

So, b1 ? b1: b2 means if b1 is true, then return b1 else return b2.

You can also break it to if else statement like this:

if(b1 === true)
 return b1;
else 
 return b2;

Answer 6

Example to help you to understand the Conditional (ternary) operator in JavaScript, and so about b1 ? b1 : b2.

function whatUserTyped(str) {
    let b1 = str;
    let b2 = '-Nothing-';

    if (b1) {
        return b1;
    } else {
        return b2;
    }
}

function whatUserTypedButConditionalOperator(str) {
    let b1 = str;
    let b2 = '-Nothing-';

    let rst = b1 ? b1 : b2;

    return rst;
}

let str1 = 'hahaha'; //User typed 'hahaha' into a input[type=text] or textarea or whatever;
let str2 = ''; //Empty string value. User left the input or textarea empty.

console.log('You said ' + whatUserTyped(str1)); //'You said hahaha'
console.log('You said ' + whatUserTyped(str2)); //'You said -Nothing-'

console.log('You said ' + whatUserTypedButConditionalOperator(str1)); //'You said hahaha'
console.log('You said ' + whatUserTypedButConditionalOperator(str2)); //'You said -Nothing-'

The Conditional (ternary) operator is condition ? exprIfTrue : exprIfFalse. It's a form of syntactic sugar for if...else statement.

Well the b1 ? b1 : b2 is very tricky. Most of times if the b1 is falsy, it's not recommended to return another str/obj or whatever instantly.

Most time it is used like this: a ? b : c

function isBob(thatGuy) {
    let a;

    if (thatGuy === 'Bob') {
        a = true;
    } else {
        a = false;
    }

    b = 'That Guy is Bob';
    c = 'That Guy is not Bob';

    return (a ?  b : c);
}

console.log(isBob('Bob')); //That Guy is Bob
console.log(isBob('Jimmy')); //That Guy is not Bob

The a is considered as Boolean and most time a is Truthy, because in JavaScript, All values are truthy unless they are defined as falsy (i.e., except for false, 0, -0, 0n, "", null, undefined, and NaN), thus the tricky b1 ? b1 : b2 is not very suitable.

References:

• MDN - Conditional (ternary) operator
• MDN - Truthy
• MDN - Falsy