10-Hoisting- Brian Stickney

[BrianStick]

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.

var myvar = 'my value';

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

output: undefined

why? 'undefined' was given because the 'var' - 'myvar' is not defined within the function. It is only 'defined' after calling the command, 'console.log'.

rewrite without hoisting

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

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');

why? I would think its ('Switch flag from false to true'); because the var is set to flag = true. In the if statement var flag=false;

rewrite without hoisting

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

}

var message = 'Hello world';

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

output: undefined

rewrite without hoisting

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

saySomething();

var message = 'Hello world';

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

output:undefined

why? Because when we call console.log, within the function the declaration, var message has not been defined.

-rewrite without hoisting?

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

saySomething();

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

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

test();

output: undefined 2

why? The variable 'a' has not been defined when the 'console.log' is called. the function foo returns the number 2.

rewrite without hoisting

-function test() { var a; console.log(a); console.log(foo()); a = 1; function foo() { return 2; } }

test()

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

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

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

output: undefined aloha

why? The variable 'bar' has not yet been defined. the function 'foo' calls for 'aloha'.

rewrite without hoisting

-(function() { var bar; var baz; console.log(bar);

foo();

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: 'I can run'

why? Because the if statement calls run as a variable before the function is defined.

rewrite without hoisting

-unction fancy(arg1, arg2) { var run; if(run) { console.log('I can run'); } else { console.log('I can\'t run'); } run = false; function run() { console.log('Will I run?'); } }

fancy();

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: 'I can run'

why? Because the if statement calls run as a variable before the function is defined.

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();