Adv Conc- var, scope, hoist, strict

Question 1

what does var do in the global context?

Answer 1

puts a property on the global object

Question 2

what does var do in a block?

Answer 2

puts a property on the global object

Question 3

what does var do in a function body?

Answer 3

create a local variable. var has function scope

Question 4

What does this do:

function foo() {
if (true) {
var a = 1;
let b = 2;
}

console.log(a);
console.log(b);
}

foo();

Answer 4

console.log(a); // 1
console.log(b); // ReferenceError: b is not defined

var creates a variable with function scope, while let creates a variable with block scope. Thus, a is available everywhere in the function, but b is only available in the block.

Question 5

function foo() {
if (false) {
var a = 1;
}

console.log(a);
}

foo();

Answer 5

console.log(a); // undefined

Even though the code on line 3 never runs, we still create a variable named a with function scope. Furthermore, since we’re not initializing a, it receives a default value of undefined instead of 1. Thus, line 6 displays undefined.

Question 6

What happens in the execution phase?
How does it treat function declarations?

Answer 6

The program runs code line-by-line.
Function declarations are sort of “skipped” or rather they’ve been moved to the creation phase

Question 7

What happens during the creation phase? (2 things)
What does it feel like to the developer?

Answer 7

Find all the variable, function, and class DECLARATIONS, function declarations bodies are found as well

It determines their scope

From the developer’s perspective, the code acts like the declarations were moved to the top of their respective scope. In particular, function-scoped declarations are moved to the function’s beginning, and block-scoped declarations are moved to the block’s start. We call this process hoisting.

Question 8

What’s different about var vs let/const in terms of hoisting?

Answer 8

JS assigns var variables an initial value of undefined

If you try to access the value assigned to a var variable before the original statement with the var declaration gets executed, JavaScript returns undefined.

console.log(bar); // undefined
var bar = 3;
console.log(bar); // 3

When let and const variables are hoisted, they are not given an initial value at all. Instead, they are left in an “unset” state; that is, they are “not defined.” (Don’t say “undefined,” though - that’s confusing since undefined is also a value.) Such unset variables are said to be in the Temporal Dead Zone, or the TDZ. Such variables remain in the TDZ until the initialization code runs during the execution phases.

Question 9

What’s the TDZ?

Answer 9

Temporal Dead When let and const variables are hoisted, they are not given an initial value at all. Instead, they are left in an “unset” state; that is, they are “not defined.” (Don’t say “undefined,” though - that’s confusing since undefined is also a value.) Such unset variables are said to be in the Temporal Dead Zone, or the TDZ. Such variables remain in the TDZ until the initialization code runs during the execution phases.

let, const, and class will put variables into TDZ

(var doesn’t seem to enter the tdz)

Question 10

How will these error messages differ
console.log(baz);

console.log(qux);
const qux = 42;

Answer 10

// ReferenceError: baz is not defined
// ReferenceError: Cannot access ‘qux’ before initialization

Question 11

What happens with this:
function foo() {
return bar();

function bar() {
return 42;
}
}

Answer 11

42

Question 12

What is this code equivalent to?

var bar = ‘hello’;
bar();

function bar() {
console.log(‘world’);
}

Answer 12

// raises “TypeError: bar is not a function”

function bar() {
console.log(‘world’);
}

bar = ‘hello’;
bar();

Question 13

What is this code equivalent to?

bar();
var bar = ‘hello’;

function bar() {
console.log(‘world’);
}

Answer 13

// logs “world”

function bar() {
console.log(‘world’);
}

bar();
bar = ‘hello’;

Question 14

What happens when a var variable and a function declaration have the same name? like:

var bar = 1;
bar();

function bar() {
console.log(2);
}

Answer 14

In that case, the function declaration gets hoisted to the top of the program and the variable declaration gets discarded. (Some people say that the function declaration gets hoisted above the variable declaration, but it’s more correct to say that the variable declaration gets discarded.)

Question 15

How to avoid the hoisting subtleties of var/let/const/functions/etc (4 things)

Answer 15

use let and const
put vars at the top
use let and const as close to first usage as possible
declare functions BEFORE calling them even though they’re hoisted

Question 16

What happens with this:
let foo = “hello”;

function foo() {
console.log(“hello”);
}

what line throws the error

Answer 16

The error occurs on line 3, not line 1.

Question 17

What happens with this:
what line throws he error

function foo() {
console.log(“hello”);
}

let foo = “hello”;

Answer 17

This time, the foo function is seen first during the creation phase, so the error doesn’t occur until JavaScript reaches line 5.

Question 18

Is hoisting an actual thing?

Answer 18

no but:
In the remainder of the curriculum, we will talk about hoisting as an actual process. You should consider that as a given in future assignments, quizzes, and assessments. If we ask you about hoisting, don’t try to argue that there is no such thing.

Keep in mind that we may ask you to explain how hoisting really works, so don’t neglect this section.

Question 19

What happens with this?

function boo() {
console.log(‘1’)
}
function boo() {
console.log(‘a’)
}

boo();

Answer 19

a

Question 20

the opposite of strict mode is…

Answer 20

sloppy mode

Question 21

Strict mode makes three significant changes to JavaScript semantics:

Answer 21

eliminates some silent errors that occur in sloppy mode by changing them to throw errors instead.

prevents some code that can inhibit JavaScript’s ability to optimize a program so that it runs faster.

prohibits using names and syntax that may conflict with future versions of JavaScript.

Question 22

The strict mode changes offer several benefits to JavaScript developers (4 things)

Answer 22

They prevent or mitigate bugs.

They help make debugging easier.

They help your code run faster.

They help you avoid conflicts with future changes to the language.

Question 23

enable strict mode

Answer 23

“use strict”;

Question 24

What is the “use strict” string an example of?

Answer 24

a pragma

Question 25

What’s a pragma?

Answer 25

a language construct that tells a compiler, interpreter, or other translator to process the code in a different way. Pragmas aren’t part of the language, and often use odd syntax like “use strict” does.

Question 26

Where is use strict enabled with this code:
function foo() {
‘use strict’;
}
foo();

Answer 26

Just that function body

Question 27

Where is use strict enabled with this code:

{
‘use strict’
a = 123;
}

b = 123;

Answer 27

nowhere
It only works at the top of the program or the top of a function

Question 28

Where is use strict enabled with this code:

function apple() {
b = 123;
‘use strict’
c = 321;
}

apple();

Answer 28

nowhere
It only works at the top of the program or the top of a function

Question 29

what happens?
function foo() {
bar = 3.1415;
}

foo();
console.log(bar);

Answer 29

3.1415

js implicitly sets variables declared without let or const as properties on the global object

Question 30

“use strict”;

function foo() {
bar = 3.1415;
}

foo();
console.log(bar);

Answer 30

// ReferenceError: bar is not defined

Question 31

Why is not allowing implicit variable creation good?

Answer 31

prevents accidentally reassigning variables with a mispelled name

Question 32

What happens with this code

let obj = {
a: 5,
go() {
this.a = 42;
},
};

let doIt = obj.go;
doIt();
console.log(obj.a);

vs this code

‘use strict’
let obj = {
a: 5,
go() {
this.a = 42;
},
};

let doIt = obj.go;
doIt();
console.log(obj.a);

Answer 32

first sets a property on global object

second throws an error trying to set a property on undefined

Question 33

console.log(1234567);
console.log(01234567);

Answer 33

// 1234567
// 342391 (the same as octal 0o1234567)

Question 34

‘use strict’
console.log(1234567);
console.log(01234567);

Answer 34

// 234567
// error

Question 35

“use strict”;

console.log(1234567);
console.log(0);
console.log(0.123);
console.log(-0.123);
console.log(01234567);
console.log(089);
console.log(01.23);
console.log(-01234567);
console.log(-089);
console.log(-01.23);

Answer 35

“use strict”;

console.log(1234567); // 1234567
console.log(0); // This is okay
console.log(0.123); // So is this
console.log(-0.123); // So is this
console.log(01234567); // SyntaxError: Octal literals are not allowed in strict mode.
console.log(089); // SyntaxError: Decimals with leading zeros are not allowed in strict mode.
console.log(01.23); // SyntaxError: missing ) after argument list
console.log(-01234567); // SyntaxError: Octal literals are not allowed in strict mode.
console.log(-089); // SyntaxError: Decimals with leading zeros are not allowed in strict mode.
console.log(-01.23); // SyntaxError: missing ) after argument list

Question 36

what are the main strict mode differences (3 things)

Answer 36

prevents initializing variable without let const or var

this is assigned to undefined in the global context

leading 0s not allowed (except before decimal)

Question 37

What are some other strict mode things (6 more things)

Answer 37

prevents declaring two function parameters with the same name.

prevents using some newer reserved keywords, such as let and static, as variable names.

prevents you from using the delete operator on a variable name.

forbids binding of eval and arguments in any way.

disables access to some properties of the arguments object in functions.

disables the with statement, a statement whose use is not recommended even in sloppy mode.

Question 38

when should you use and not use strict? (3 things)

Answer 38

any new code that you write

adding new functions to an old codebase

Not when adding non function blocks. This can mess up code that was created not using strict mode.

Question 39

Difference between Declared Scope vs. Visibility Scope vs. Lexical Scope

Answer 39

Declared scope concerns how a variable is declared: let, const, class, var, or function. The first three declare variables with block scope while the other two declare variables with function scope. Even if the variable is declared outside of a function or block, it has either block or function scope.

Visibility scope concerns where a variable is visible. This can be either global scope or local scope (inside a function or a block). We will sometimes also talk about local function scope and local block scope when discussing the local visibility scope. However, we will often omit the word “local”.

Lexical scope concerns how the structure of your code determines what variables are accessible or inaccessible at any point in the program. Lexical scope includes both inner scope and outer scope.

Question 40

What is declared scope?

Answer 40

Declared scope concerns with what keyword was used to declare it and how that effects the scope.

Specifically:
let, const, class, declare variables with block scope

var, or function declare variables with function scope.

Even if the variable is declared outside of a function or block, it has either block or function scope.

Question 41

Describe the following in terms of declared scope:

let foo1 = 1;
var bar1 = 2;

if (true) {
let foo2 = 3;
var bar2 = 4;
}

function xyzzy() {
let foo3 = 5;
var bar3 = 6;

if (true) {
let foo4 = 7;
var bar4 = 8;
}
}

Answer 41

let foo1 = 1; // declared scope is block scope
var bar1 = 2; // declared scope is function scope

if (true) {
let foo2 = 3; // declared scope is block scope
var bar2 = 4; // declared scope is function scope
}

function xyzzy() { // declared scope is function scope
let foo3 = 5; // declared scope is block scope
var bar3 = 6; // declared scope is function scope

if (true) {
let foo4 = 7; // declared scope is block scope
var bar4 = 8; // declared scope is function scope
}
}

Question 42

What is Visibility scope?

Answer 42

Visibility scope concerns where a variable is visible. This can be either global scope or local scope (inside a function or a block). We will sometimes also talk about local function scope and local block scope when discussing the local visibility scope. However, we will often omit the word “local”.

Question 43

Describe the following in terms of visibility scope:

let foo1 = 1;
var bar1 = 2;

if (true) {
let foo2 = 3;
var bar2 = 4;
}

function xyzzy() {
let foo3 = 5;
var bar3 = 6;

if (true) {
let foo4 = 7;
var bar4 = 8;
}
}

Answer 43

let foo1 = 1; // visibility scope is global
var bar1 = 2; // visibility scope is global

if (true) {
let foo2 = 3; // visibility scope is local (local block)
var bar2 = 4; // visibility scope is global
}

function xyzzy() { // visibility scope is global
let foo3 = 5; // visibility scope is local (local function)
var bar3 = 6; // visibility scope is local (local function)

if (true) {
let foo4 = 7; // visibility scope is local (local block)
var bar4 = 8; // visibility scope is local (local function)
}
}

Question 44

What is lexical scope?

Answer 44

Lexical scope concerns how the structure of your code determines what variables are accessible or inaccessible at any point in the program. Lexical scope includes both inner scope and outer scope.

Question 45

Describe the following in terms of lexical scope
let foo1 = 1;

if (true) {
let foo2 = 3;
}

function xyzzy() {
let foo3 = 5;

if (true) {
let foo4 = 7;
}
}

Answer 45

let foo1 = 1; // outer scope of xyzzy, outer scope of if block on line 3

if (true) {
let foo2 = 3; // inner scope of if block on line 3
}

function xyzzy() {
let foo3 = 5; // inner scope of xyzzy, outer scope of if block on line 10

if (true) {
let foo4 = 7; // inner scope of if block on line 10
}
}

Question 46

Describe the following in terms of lexical scope:
var bar1 = 1;

if (true) {
var bar2 = 3;
}

function xyzzy() {
var bar3 = 5;

if (true) {
var bar4 = 7;
}
}

Answer 46

var bar1 = 1; // outer scope of xyzzy, outer scope of if block on line 3

if (true) {
var bar2 = 3; // outer scope of xyzzy, outer scope of if block on line 3
}

function xyzzy() {
var bar3 = 5; // inner scope of xyzzy, outer scope of if block on line 10

if (true) {
var bar4 = 7; // inner scope of xyzzy, outer scope of if block on line 10
}
}

Question 47

When should you use each kind of scope to tralk about a variable?

Answer 47

Use declared scope when you’re talking about how an identifier is declared.

Use visibility scope when you’re talking about the visibility of a specific identifier.

Use lexical scope when you want to talk about whether something is “in scope” – that is, whether it is available for use.