How can I have a function method in an if condition with JavaScript code?

Question

I want to give condition method in my JavaScript code. This code does not work in Internet Explorer 10 version. When I paste this code in JavaScript validator, this message is shown:

Function declarations should not be placed in blocks. Use a function expression or move the statement to the top of the outer function.

How can I have a function here?

            if(jQuery("header").attr("id") == "header-style-two")
        {
                    function sticky_relocate() {
                        var window_top = jQuery(window).scrollTop();
                        var div_top = jQuery('#sticky-anchor').offset().top;
                        if (window_top > div_top) {
                            jQuery('.mainmenu-area').removeClass('light-menu');
                            //This is for when div in top         
                        } else {
                            jQuery('.mainmenu-area').addClass('light-menu');
                            //This is for when div in not top
                        }
                    }

                    jQuery(function () {
                        jQuery(window).scroll(sticky_relocate);
                        sticky_relocate();
                    }); 
        }

http://stackoverflow.com/questions/10069204/function-declarations-inside-if-else-statements — Mahi, Dec 19 '16 at 07:13
Thanks @Mahi . This is very helpful for me . Thanks a lot :) — Mahmudul Hasan Sohag, Dec 19 '16 at 07:27

Alexander O'Mara · Accepted Answer · 2016-12-19T15:46:43.430

6

You can't have named function in an if block (it is not valid by the spec and hoisting would make it rather confusing anyway, but some JavaScript engines may try to compensate for bad code, which is why it may work in some browsers), but you can assign functions to variables in an if block.

Rather than:

function sticky_relocate() {

You can do this:

var sticky_relocate = function() {

So something like this will do the trick:

if(jQuery("header").attr("id") == "header-style-two")
{
    var sticky_relocate = function() {
        var window_top = jQuery(window).scrollTop();
        var div_top = jQuery('#sticky-anchor').offset().top;
        if (window_top > div_top) {
            jQuery('.mainmenu-area').removeClass('light-menu');
            //This is for when div in top         
        } else {
            jQuery('.mainmenu-area').addClass('light-menu');
            //This is for when div in not top
        }
    }

    jQuery(function () {
        jQuery(window).scroll(sticky_relocate);
        sticky_relocate();
    }); 
}

edited Dec 19 '16 at 15:46

answered Dec 19 '16 at 07:06

Alexander O'Mara

58,688
18
163
171

at first place, why someone need to put function in if block ? – A.T. Dec 19 '16 at 07:07
why we can't put named function – Mahi Dec 19 '16 at 07:08
@A.T. You might want to conditionally set a function to a variable, or avoid creating functions you never want to use. – Alexander O'Mara Dec 19 '16 at 07:09
Thanks a lot #Alexander . This code work and my problem was solved :) – Mahmudul Hasan Sohag Dec 19 '16 at 07:10
its worth mention in your answer that why we can't we have named function in an if block – Mahi Dec 19 '16 at 07:16

score 1 · Answer 2 · answered Dec 19 '16 at 07:10

JSHint is giving you a warning, which means, "we think this is not the best idea, but we'll allow you to do it."

You can change your code in a couple of ways.

Change the function declaration to a function expression:

if(jQuery("header").attr("id") == "header-style-two") {
  var sticky_relocate = function() {
    var window_top = jQuery(window).scrollTop();
    var div_top = jQuery('#sticky-anchor').offset().top;
    if (window_top > div_top) {
      jQuery('.mainmenu-area').removeClass('light-menu');
      //This is for when div in top         
    } else {
      jQuery('.mainmenu-area').addClass('light-menu');
      //This is for when div in not top
    }
  }
  jQuery(function () {
    jQuery(window).scroll(sticky_relocate);
    sticky_relocate();
  }); 
}

OR move the function definition out of the if block.

if(jQuery("header").attr("id") == "header-style-two") {
  jQuery(function () {
    jQuery(window).scroll(sticky_relocate);
    sticky_relocate();
  }); 
}

function sticky_relocate() {
  var window_top = jQuery(window).scrollTop();
  var div_top = jQuery('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    jQuery('.mainmenu-area').removeClass('light-menu');
    //This is for when div in top         
  } else {
    jQuery('.mainmenu-area').addClass('light-menu');
    //This is for when div in not top
  }
}

score 0 · Answer 3 · answered Dec 19 '16 at 07:12

You can't have function declaration under if condition. You can put it outside and call it based on the condition.

var isHeaderStyleTwo = (jQuery("header").attr("id") == "header-style-two");
function sticky_relocate() {
  var window_top = jQuery(window).scrollTop();
  var div_top = jQuery('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    jQuery('.mainmenu-area').removeClass('light-menu');
    //This is for when div in top         
  } else {
    jQuery('.mainmenu-area').addClass('light-menu');
    //This is for when div in not top
  }
}

jQuery(function () {
  if (isHeaderStyleTwo) {
      jQuery(window).scroll(sticky_relocate);
        sticky_relocate();
  }

How can I have a function method in an if condition with JavaScript code?

3 Answers3