How to declare different functions in different conditions?

Question

Additionally, function declarations should never appear inside of block statements. For example, this code won’t behave as expected:

// Bad
if (condition) {
    function doSomething() {
    alert("Hi!");
  }
} else {
    function doSomething() {
    alert("Yo!");
  }
}

Exactly how this will work from browser to browser will vary. Most browsers automatically take the second declaration without evaluating condition; Firefox evaluates condition and uses the appropriate function declaration. This is a gray area in the ECMAScript specification and should thus be avoided. Function declarations should be used only outside of conditional statements. This pattern is explicitly forbidden in the Google JavaScript Style Guide.

I find these words in the book Maintainable JavaScript in page 42, it says that declaring function in 'if' statement is basicly not allowed. So what's the proper method to declare different functions in different conditions? This book didn't give a solution on this issue.

Answer 1

Function declarations and function variables are always moved (‘hoisted’) to the top of their JavaScript scope by the JavaScript interpreter.

Source: http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html

An if/else block doesn't create a new scope which means that approach won't work. There's plenty of ways to handle this case scenario, some of which are:

1 - Add the if (condition) internally to the function definition.

function doSomething(){
  var condition = .......
  if (condition) { ... }
  else { .... }
}

2 - Send a parameter to the function to know which implementation to use (in case finding out the value of the condition doesn't suit inside the function).

function doSomething(condition){
  if (condition) { ... }
  else { .... }
}

3 - Have two functions that do different things and call one or the other based on the condition.

if (condition) doSomething()
else doOtherThing()

Answer 2

Probably you want to design better your code, like accepting an argument in the function to switch among different cases or having total separate functions.

A workaround is declaring both functions before the the if block, and the assign the function you need to a constant and call that constant where you need it:

function doSomething1() {
  alert("Yo!");
}

function doSomething2() {
  alert("Hi!");
}

const doSomething;

if (condition) {
  doSomething = doSomething1
} else {
  doSomething = doSomething2
}

doSomething()

But again, that is not a good pattern, nor a well studied code

Answer 3

Your thinking about it incorrectly. Just declare your functions. Declaring the function is just creating it. If you use it or not is up to you. All it's saying is don't try to conditionally create functions. Use

if statements

To call or not call the functions. Don't use them to decide whether or not to

create the function

Answer 4

You could use a function expression and assign the needed function to a variable.

var doSomething = condition ?
        function () { alert("Hi!"); } :
        function () { alert("Yo!"); };