How to Write an Inline If Statement in JavaScript

How to write an inline IF statement in JavaScript?

You don't necessarily need jQuery. JavaScript alone will do this.

var a = 2;
var b = 3;    
var c = ((a < b) ? 'minor' : 'major');

The c variable will be minor if the value is true, and major if the value is false.

---

This is known as a Conditional (ternary) Operator.

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator

Javascript inline if statement

The fact that blocks (and other statements) return values isn't accessible to your code. Consoles can see the result, and it exists at a language specification level, but not in your code.

Your options are the conditional operator¹ (which is quite readable when you're used to it, but you've said you're looking for alternatives to it) or the if/else assigning to a in both parts:

let a;
if (3 === 4) {
    a = 5;
} else {
    a = 6;
}

Or you could use an inline function (IIFE):

let a = (() => { if (3 === 4} return 5 else return 6; })();

There is also a proposal being floated for "do expressions", which would look like this:

// Currently a proposal, not implemented in engines yet
let a = do { if (3 === 4) 5; else 6; };

That proposal is at Stage 1 of the process, so it may or may not progress, and if it progresses it could change markedly before doing so.

---

¹ Although you see "the ternary operator" a lot, the proper name is the conditional operator. It is a ternary operator (an operator accepting three operands), and currently JavaScript's only ternary operator, but that could change someday. :-)

Inline if else?

The equivalent JS code would be:

   if (instruction == "JOINT") { 
        parent = joint_stack[-1];
    } else {
        parent = null;
    }

or more idiomatically:

    parent = instruction == "JOINT" ? joint_stack[-1] : null;

This ternary expression in Python:

joint_stack[-1] if instruction == "JOINT" else None

is the same as the JS ternary expression:

instruction == "JOINT" ? joint_stack[-1] : null

Javascript one line If...else...else if statement

Sure, you can do nested ternary operators but they are hard to read.

var variable = (condition) ? (true block) : ((condition2) ? (true block2) : (else block2))

Writing if else condition function in inline code doesn't return any value

To be honest, I don't know react, but i tried to find a possible solution anyway. I can't give you many explanations (I know it's not very professional, but I spent some time on it and I answer anyway).

This is a working example

class Test extends React.Component {
  render() {
    return <h1>Hello World! { 
        function(){ 
          if(1==1) {
            return 2021;
          } else {
            return 2022;
          }
        }() 
      } </h1>;
  }
}

ReactDOM.render(<Test />, document.getElementById('test'));

JavaScript Syntax: Inline Ifs in String Assignment Statements

It is of course to do with precedence.

var url = "beginning-" + (someCondition)?('middle'):('other_middle') + "-end";

is interpreted as:

var url = ("beginning-" + (someCondition)) ? ('middle') : (('other_middle') + "-end";)

Inline if statement and return

Don't declare a variable for the result, just return the value. Example:

function myFunction(letr) {
  if (letr === " ") return " ";
  if (letr === "x") return "X";
  if (letr === "y") return "Y";
  return "neither";
}

You can also use the conditional operator:

function myFunction(letr) {
  return letr === " " ? " " :
    letr === "x" ? "X" :
    letr === "y" ? "Y" :
    "neither";
}

---

Related Topics