10-Hoisting-Brandi Soucy

[pixiestix826]

---

REDO:

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(myvar);
    var myvar = 'local value';
})();

output:

-undefined

why?

-because the variable is outside the scope of the function.

rewrite without hoisting

var myvar = (function() { console.log(myvar);

})();

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: -guessed: Switch flag from false to true

-actual : Switch flag from false to true

why? -The variable flag is defined as true so it passes by the var flag = false to

-move on to the true statement.

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

var message = 'Hello world';

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

output: -guessed: Foo Bar

-actual: undefined

why?

-Because the variable has not been assigned.

rewrite without hoisting

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

var message = 'Hello world';

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

output: -guessed: Hello World

-actual: Hello World

why? -Because the local variable 'Foo bar' is not defined, but the global variable

-is defined and accessible to the function saySomething.

rewrite without hoisting var message = 'Hello world';

function saySomething() { console.log(message);

} saySomething();

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

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

test();

output: -guessed: a

• 2 -actual: undefined
• 2

why?

-variable a was not available to the function.

rewrite without hoisting

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

function foo() {
    return 2;
}

var a = 1; }

test();

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

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

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

output: -guessed: undefined

• undefined -actual: undefined
• aloha

  why? the variable bar was outside the scope of the function and aloha is a string being console.logged.

rewrite without hoisting -var bar = (function() { console.log(bar); foo();

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

baz = 2;

})();

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

• undefined -actual: I can run

  why? because run in the function is not set to true or false.

  rewrite without hoisting

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

var run = false ; } 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: -guessed: Will I run?

-actual: I can't run

why?

-var run = function() wasn't in the scope of function fancy(arg1, arg2)

rewrite without hoisting

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

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

} fancy();

---

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(myvar);
  var myvar = 'local value';
})();

guessed output: 'local value' actual output: undefined undefined

why? the function being called outside the function was empty. The code below console.logs local value and undefined.

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

rewrite without hoisting

The code below also console.logs local value and undefined, but the variable is declared outside of the function making the function an expression rather than a declaration; thereby, avoiding hoisting.

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

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: guess: Switch flag from false to true actual: Switch flag from false to true undefined

why? The variable is set outside the function making it accessible to the function.

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

Results: same output as above.

var message = 'Hello world';

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

output: guess: Foo bar Foo bar actual: undefined undefined

why? Because the function saySomething has not been defined.

rewrite without hoisting

var message = 'Hello world';

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

var message = 'Hello world';

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

output: guessed: Foo bar Foo bar

actual: Hello world undefined

why? message = 'Foo bar' was not defined as a var for message. my initial instict was to say Hello world, but I second guessed it.

rewrite without hoisting

var message = 'Hello world';

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

The code above gives the output Foo bar and undefined because we have redefined the local variable to say Foo bar.

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

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

test();

output: guessed: 1 2 actual: undefined 2 undefined

why? I have zero clues about why it did not return 1. my thoughts are that var a was initiated to be 1. That test(); would call the function and it would retrun both defined variables. I think because var a = 1 was defined before we declared the function foo() {}, it reads it as undefined.

rewrite without hoisting

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

  function foo() {
    return 2;
  }
}
test();

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

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

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

output: guessed: 2 undefined 'aloha' undefined actual: undefined aloha undefined

why? I am not certain why 2 was not defined...I am guessing that since they initiated beneath the function, the function does not acknowledge them.

rewrite without hoisting

var bar = 1;
bar = 2;

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

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

})();

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: guessed: undefined actual: I can run undefined

why? I did not think 'I can run' would console log since run was not set equal to true, but it did. I knew fancy would return undefined because the arguments were not set in the function nor called at the end.

rewrite without hoisting

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

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

[rtablada]

@pixiestix826 watch out, when working with the "rewrite without hoisting" section, there were a few times where you changed the results.

Also when working in the Chrome JS console, there will be more output than actually occurs based on the code. The undefined that is logged is output by the Developer Tools not the actual code, you can see this by the little grey diamond next to undefined:

[pixiestix826]

I tried to go back through and figure out how to get the same results and not hoist. I don't get it. I wanted to read through the hoisting doc linked on this assignment day, but the link was broken.

[pixiestix826]

@rtablada I've redone this worksheet. I still don't feel like I have a firm grasp on hoisting. I read the section on hoisting in the gitbook, and will continue to review it until I understand at a deeper level.