Javascript function not working outside if statement

Question

I have 3 functions to simplify question i wrote only code structure without entire code I'm checking if element is defined using if statement and if elemet exists then function three must be executed but code is not working.

function three must be defined only then if element exists but it seems i can't define function inside if statement

error: Uncaught (in promise) ReferenceError: three is not defined

Could you explain what is wrong and why i get undefined error?

const elem = document.querySelector('.elem');

async function one() {
  two();
}
one();

async function two() {
  if (elem) {
    three();
  }
}

if (elem) {
  async function three() {
    console.log('works');
  }
}

<div class="elem">Elem</div>

I do not get the same error? Please can you make sure the example is a minimal reproducible example? — evolutionxbox
– evolutionxbox, Commented Jul 14, 2021 at 9:32
Why is there an if around the function three? This does not really make sense. And be careful about the async context — Mario Murrent
– Mario Murrent, Commented Jul 14, 2021 at 9:34
calling a function on a condition makes sense but why the definition? — dee
– dee, Commented Jul 14, 2021 at 9:34
The three function only exits in the scope of the if statement, that's why you can't access it inside two. — Ikechukwu Eze
– Ikechukwu Eze, Commented Jul 14, 2021 at 9:35

Mario Murrent · Accepted Answer · 2021-07-14 09:38:27Z

1

As already mentioned in the comments, the function is defined in a block and thats why it is not working. You can use a proper IDE which highlights such issues.

Remove the if around the three() function:

See: https://jsfiddle.net/L3pz2mv4/

const elem = document.querySelector('.elem');

async function one() {
  two();
}
one();

async function two() {
  if (elem) {
    three();
  }
}

async function three() {
  console.log('works');
}

<div class="elem">
  test
</div>

edited Jul 14, 2021 at 9:38

answered Jul 14, 2021 at 9:35

Mario Murrent

7326 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ikhvjs Over a year ago

You can use Stackoverflow code snippet instead. meta.stackoverflow.com/a/356679/14032355

ikhvjs Over a year ago

No worries, just a reminder. It is not a big deal.

Gurami · Accepted Answer · 2021-07-14 10:30:19Z

0

Here is example how you can make it work using function expression

const elem = document.querySelector('.elem');

var three;

async function one() {
  two();
}
one();

async function two() {
  if (elem) {
    three();
  }
}

if (elem) {
  three = function() {
    console.log('works');
  }
}

now function three will work outside if statement

answered Jul 14, 2021 at 10:30

Gurami

821 silver badge8 bronze badges

Comments

Alex028502 · Accepted Answer · 2021-07-14 09:58:58Z

0

two changes:

call one() after three has been defined
declare three at the top level, and then redefine it in the condition so that it is accessible everywhere

const elem = true;
let three;

async function one() {
  two();
}


async function two() {
  if (elem) {
    three();
  }
}

if (elem) {
  three = async function() {
    console.log('works');
  }
}

one();

answered Jul 14, 2021 at 9:58

Alex028502

3,8543 gold badges30 silver badges59 bronze badges

Collectives™ on Stack Overflow

Javascript function not working outside if statement

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related