Why are my functions executing in the wrong order?

Question

I want to know why my program outputs I4 output then I3 output？

var a = 4;
var i = 0;
var i3 = function() {
  console.log("I3 output")
  return i = i + 3
}
var i4 = function() {
  console.log("I4 output")
  return i = 4
}

(a > 3) && i3() || (a < 5) && i4();
console.log(i)

I want I3 output then I4 output. Why doesn't this work?

Answer 1

It's because you are missing a semicolon.

This :

var i4 = function() {
  console.log("I4 output")
  return i = 4
}

(a > 3)

is executed like this :

var i4 = function() {
  console.log("I4 output")
  return i = 4
}(a > 3) // <--- You are executing i4, passing it "a > 3" as argument

Sidenote : Javascript allows you to do this, leading to a bug; but Typescript complains. It says that you are calling a function with 1 argument, when it expects 0. Typescript really is some improvement over JS and taught me a lot about it.

If you add a semicolon, the function is defined, but not executed :

var a = 4;
var i = 0;
var i3 = function() {
  console.log("I3 output")
  return i = i + 3
};

var i4 = function() {
  console.log("I4 output")
  return i = 4
}; // <-- Add semicolon

(a > 3) && i3() || (a < 5) && i4();
console.log(i)

Answer 2

First I'd urge you start using semi-colons. ASI (Automatic Semi-colon Insertion) is an error correction process, and you'll find these kinds of errors creeping in if you don't.

Second, further to that, maybe consider function declarations rather than function expressions. Again, you're missing semi-colon at the end of i4 is the issue causing the problem which can be avoided with a declaration instead which don't need to terminate with them.

Third, if you're looking to call both functions you need to call them separately. If you use a logical OR the second expression won't be evaluated because the first will always evaluate as truthy.

var a = 4;
var i = 0;

function i3() {
  console.log('I3 output');
  return i = i + 3;
}

function i4() {
  console.log('I4 output');
  return i = 4;
}

(a > 3) && i3();
(a < 5) && i4();

console.log(i);