Scope and Closures

Question 1

What is scope? Provide an example.

Answer 1

Нуждата от ясно дефинирани правила за това къде се запазват променливите и как се намират по-късно се нарича скоуп.

Scope: space or environment in which a certain variable is declared (variable environment in case of function). Scope defines the area, where functions, variables, and such are available.
ope.

function grandfather() {
 var name = 'Hammad';

// likes is not accessible here

 function parent() {
 // name is accessible here
 // likes is not accessible here

 function child() {
 // Innermost level of the scope chain
 // name is also accessible here

 var likes = 'Coding';
 }
 }
}
console.log(likes); // ReferenceError: likes is not defined

Question 2

What is Global scope?

Answer 2

Global scope

1. outside of any function or block
2. variables declared in global scope are accessible everywhere

const me = “My and miself”
const year = 2022

Question 3

What is Function scope?

Answer 3

Function scope

1. Variables are accessible only inside functions, not outside.
2. Also called local scope

function calcAge (birthYear ) {
 Const now = 2022;
 Const age = now- birthYear; return age;
 } 

Console.log(now) // Reference Error

Question 4

What is Block scope?

Answer 4

Block scope (ES6)

1. Variables are accessible only inside the block (block scoped). However, this applies only to let and const variables
2. Functions are also block-scoped, only in strict mode
3. We use block scope because we need to declare variables as close as possible (as local as possible) to where they will be used

Question 5

What is Scope chain?

Answer 5

Variable lookup in scope chain:

1. Every scope always has access to all the variables from all its outer scopes (parent’s scopes).
2. Variables are not copied from one scope to another. Instead, scopes simply look up in the scope chain until they find the variable that they need, and then they use it
3. A certain scope will never ever have access to variables of on inner scope
4. The way that we can access variables depends on where the scope is placed ( where it is written in the code)
5. Scope chain only works upwards not sideways

Question 6

What is lexical scope? What is lexing-time?

Answer 6

Lexical Scope means that in a nested group of functions, the inner functions have access to the variables and other resources of their parent scope even if the parent function has returned. Lexical scope is sometimes also referred to as Static Scope.

• Lexical scope това е мястото където нашата променлива е написана
• lexical scope is scope that is defined at lexing time

Question 7

What is the difference between const, let and var?

Answer 7

Demonstrate the difference between var and let

• Var is function scoped
• Let and const are block scoped

 if (true) {
 var a = 42;
 }
 console.log(a); // a = 42

if (true) {
 let b = 34;
}

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

const foo = () =\> {
 var c = 12;
};

console.log(c); // c= 12

const foo = () =\> {
 const c = 12;
};

console.log(c); // ReferenceError: c is not defined

Question 8

What is the difference between == and ===?

Answer 8

• The strict equality operator (===) checks whether its two operands are equal, returning a Boolean result. Unlike the equality operator, the strict equality operator always considers operands of different types to be different.
• The most notable difference between this operator and the equality (==) operator is that if the operands are of different types, the == operator attempts to convert them to the same type before comparing.

• If the operands are of different types, return false.
• If both operands are objects, return true only if they refer to the same object.
• If both operands are null or both operands are undefined, return true.
• If either operand is NaN, return false.
• Otherwise, compare the two operand’s values:
o Numbers must have the same numeric values. +0 and -0 are considered to be the same value.
o Strings must have the same characters in the same order.
o Booleans must be both true or both false.

Question 9

What is type coercion?

Answer 9

Type coercion is the automatic or implicit conversion of values from one data type to another (such as strings to numbers). Type conversion is similar to type coercion because they both convert values from one data type to another with one key difference — type coercion is implicit whereas type conversion can be either implicit or explicit.

Question 10

What is variable and function hoisting?

Answer 10

Hoisting is the process of collecting variables by the JavaScript compiler.

JS engine прочита, че имаме някаква променлива, преди тя да бъде декларирана и използвана, но само отчита този факт. Ако променливата е декларирана като let или const и ние се опитаме да я достъпим преди декларация– връща грешка, ако е var – undefined.

Var дава възможността стойността да бъде достъпена като undefined стойност.
Function declaration-а може да бъде изпълнен, защото е деклариран на едно място и директно се качва най-отгоре в нашия скоуп. Важно е да се знае, че се качват само техните декларации, а по-късно се достъпват и стойностите им или се извикват функциите.

Hoisted
Var hoisted = ‘Telerik Academy’
Not hoisted

Question 11

What will be printed in the console?

console.log(addDecl(2, 3));

function addDecl(a, b) {
 return a + b;
}

Answer 11

Output: 5

This is because we are able to call function declaration before it was defined in the code.

Question 12

What is hoisted and what is not?

Answer 12

• Everything in JavaScript is hoisted (even let and const )
• let and const are in the temporal dead zone before declared, so they will throw an error if accessed before declared
• Let and const are accessible only after declaration.
• Var and function declarations function a() are accessible even before they are declared

Question 13

What will be printed in the console?

console.log(addExpr(2, 3));

var addExpr = function (a, b) {
 return a + b;
};

Answer 13

TypeError: addExpr is not a function

Because addExpr is declared as var it is hoisted, and its value is undefined.

So, we are trying to do this: undefined(2, 3).

Question 14

What will be printed in the console?

console.log(addArrow(2, 3));

const addArrow = (a, b) => a + b;

Answer 14

ReferenceError: Cannot access ‘addArrow’ before initialization

Question 15

What is a closure?

• Explain what is closure and how it’s connected to scopes.

Answer 15

Formal: A closure is the closed-over variable environment of the execution context in which a function was created, even after that execution context is gone.

Less formal: A closure gives function access to all the variables of its parent function, even after that parent function has returned. The function keeps a reference to its outer scope, which preserves the scope chain throughout time.

Less former: A closure makes sure that a function doesn’t lose connection to variables that existed at the function’s birthplace.

Less formal: A closure is like a backpack that a function carries around wherever it goes. This backpack has all the variables that were present in the environment where the function was created.

Question 16

What is Scoping?

Answer 16

Scoping: how our program’s variables are organized and accessed, “where do variables live?” or “where can we access a certain variable, and where not”.

Question 17

What will be printed in the console?

console.log(addExpr(2, 3));

const addExpr = function (a, b) {
 return a + b;
};

Answer 17

Cannot access ‘addExpr’ before initialization

Question 18

What will be printed in the console?

console.log(addArrow(2, 3));

var addArrow = (a, b) => a + b;

Answer 18

TypeError: addArrow is not a function

Because addArrow is declared as var it is hoisted, and its value is undefined.

So, we are trying to do this: undefined(2, 3).

Question 19

What will be printed on the console?

let d = 4;
function two() {
let d;
d = 5;

console.log(d);
}
two();
console.log(d);

Answer 19

5

4

Question 20

What will be printed on the console?

let a = 1;

function one() {
 a = 2;
 var a = 3;
 console.log(a);
}

one();
console.log(a);

Answer 20

3

1

Question 21

What will be printed on the console?

let f = 5;

 function three() {
 let f = g = 6;
 console.log(f);
 }

three();
console.log(g, f);

Question 22

Demonstrate how to provide access to a variable’s value outside the function it is defined in.

Question 23

In a given piece of code, determine if closure exists and identify it:

(function () {
 const header = document.querySelector('h1');
 header.style.color = 'red';

document.querySelector(‘body’).addEventListener(‘click’, function () {
header.style.color = ‘blue’;
});
})();

Answer 23

There is a closure over the IIFE function - the function in the event listener has access to the header variable even when IIFE is gone.

The header is in the backpack of the event listener function.

Question 24

Provide an example of closure:

Answer 24

const boardingPassengers = function (n, wait) {
const perGroup = n / 3;
setTimeout(function () {
console.log(We are now boarding all ${n} passengers.);
console.log(There are 3 groups, each with ${perGroup} passengers.);
}, wait * 1000);

console.log(Will start boarding in ${**wait**} seconds.);
};

const perGroup = 1000;
boardingPassengers(180, 3);

1. perGroup Is registered
2. setTimeout is registered
3. console.log(Will start boarding in ${wait} seconds.); is executed
4. after 3 seconds function is executed: function () {
   * console.log(We are now boarding all ${n} passengers.);*
   * console.log(There are 3 groups, each with ${perGroup} passengers.);*
   * },*
5. This function has access to the n, wait and perGroup from its parent boardingPassengers function
6. The closure has priority over the scopes that is why the function looks first in its closure for perGroup and not in the scope chain (in this case global scope)