10-Hoisting-Jeremy Glover

[Jeremy-Glover]

JavaScript Hoisting Worksheet

Instructions

a. Review each code snippet below. b. Fill in what will be output to the console. c. Run the code to see if you were correct. d. Describe why the code behaved as it did. e. Re-write the code snippet to maintain the same output, but to avoid hoisting.

1

var myvar = 'my value';

(function() {
    console.log(myvar);
    var myvar = 'local value';
})();

output:

-'local value'

-Actually: Undefined why?

-Because the var myvar in the function was hoisted to the top of the function without the initialization 'local value' which led to it being undefined.

rewrite without hoisting

var myvar = 'my value';
(function() {
  var myvar;
  console.log(myvar);
  myvar = 'local value';
})();

2

var flag = true;

function test() {
    if(flag) {
        var flag = false;
        console.log('Switch flag from true to false');
    }
    else {
        flag = true;
        console.log('Switch flag from false to true');
    }
}
test();

output:

- Switch flag from false to true

-Actually: Switch flag from false to true why?

-The var flag in the function was hoisted without the initialization therefore it was true, which printed out Switch flag from false to true.

rewrite without hoisting

var flag = true;

function test() {
    if(flag = false) {
        console.log('Switch flag from true to false');
    }
    else {
        flag = true;
        console.log('Switch flag from false to true');
    }
}
test();

3

var message = 'Hello world';

function saySomething() {
    console.log(message);
    var message = 'Foo bar';
}
saySomething();

output:

- undefined

• Actually: undefined

why?

• The var message is hoisted in the function with out the initialization of 'Foo bar' so the console.log prints out undefined since the function uses the local var and not the global var defined outside the function

rewrite without hoisting

var message = 'Hello world';

function saySomething() {
    var message;
    console.log(message);
    message = 'Foo bar';
}
saySomething();

4

var message = 'Hello world';

function saySomething() {
    console.log(message);
    message = 'Foo bar';
}
saySomething();

output: 'Hello World' Actually: 'Hello World'

why? Because the global variable set above the function is run through console.log not the value declared in the function.

5

function test() {
    console.log(a);
    console.log(foo());

    var a = 1;
    function foo() {
        return 2;
    }
}

test();

output: undefined 2 Actually: undefined 2

why? Because the var a in the function is hoisted which returns an undefined value for the console.log and the second console.log runs the foo function which returns two, so when the function test is run it returns undefined and 2

rewrite without hoisting

function test() {
    var a;
    console.log(a);
    console.log(foo());

    function foo() {
        return 2;
    }
}

test();

5

(function() {
    console.log(bar);
    foo();

    function foo() {
        console.log('aloha');
    }

    var bar = 1;
    bar = 2;
})();

output: undefined 'aloha' Actually: undefined 'aloha'

why? The var bar declared at the bottom of the function is hoisted and the console.log prints out undefined. Then the function foo is run which returns 'aloha'

rewrite without hoisting

(function() {
    var bar;
    console.log(bar);
    foo();

    function foo() {
        console.log('aloha');
    }

    bar = 1;
    bar = 2;
})();

6

var run = false;

function fancy(arg1, arg2) {
    if(run) {
        console.log('I can run');
    }
    else {
        console.log('I can\'t run');
    }

    function run() {
        console.log('Will I run?');
    }
}
fancy();

output: Will I run? Actually:

why?

rewrite without hoisting

var run = false;

function fancy(arg1, arg2) {
    if(run) {
        console.log('I can run');
    }
    else {
        console.log('I can\'t run');
    }

    var run = function() {
        console.log('Will I run?');
    }
}
fancy();

output:

why?

rewrite without hoisting

[rtablada]

@Jeremy-Glover pretty good so far:

on 2 you have changed the output and functionality of the example. When rewriting without hoisting the only thing that should be moved is the variable declaration, you have made it so that the test function is using the global flag variable not one scoped into the function.

Watch out for things like this and you should be well on your way!