Scribd
Upload
146 views5 pages

JS-A.S.A201 (Scope, Hoisting and Closure)

This document outlines an assignment on advanced JavaScript concepts for front-end training. It includes 4 problems related to scope, hoisting, and closures. Developers are expected to understand how variable scope works, how hoisting impacts variable value at runtime, how to use closures to solve problems, and how to avoid issues with closures and loops. The problems cover topics like variable declaration order impacting value, closures accessing outer scope variables, and a common closure loop problem where loop variables are not bound properly.

Uploaded by

Nguyễn Công Tuấn Anh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
146 views5 pages

JS-A.S.A201 (Scope, Hoisting and Closure)

This document outlines an assignment on advanced JavaScript concepts for front-end training. It includes 4 problems related to scope, hoisting, and closures. Developers are expected to understand how variable scope works, how hoisting impacts variable value at runtime, how to use closures to solve problems, and how to avoid issues with closures and loops. The problems cover topics like variable declaration order impacting value, closures accessing outer scope variables, and a common closure loop problem where loop variables are not bound properly.

Uploaded by

Nguyễn Công Tuấn Anh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Front-end Advanced

T ra in in g As s ig n men t

Document Code 25e-BM/HR/HDCV/FSOFT

Version 1.1

Effective Date 7/1/2019

Hanoi, mm/yyyy
Training Assignments Front-end Advanced Issue/Revision: x/y

RECORD OF CHANGES

No Effective Date Change Description Reason Reviewer Approver

1 30/May/2019 Create a new assignment Create new DieuNT1 VinhNV

2 07/Jun/2019 Update Fsoft Template Update DieuNT1 VinhNV

25e-BM/HR/HDCV/FSOFT v1.1 Internal use 2/5


Training Assignments Front-end Advanced Issue/Revision: x/y

Contents
Unit 2-3: Scope, Hoisting and Closure ...............................................................................................................4
Objectives: ..................................................................................................................................................4
Problem 01 .................................................................................................................................................4
Problem 02 .................................................................................................................................................4
Problem 03 .................................................................................................................................................4
Problem 04 .................................................................................................................................................4

25e-BM/HR/HDCV/FSOFT v1.1 Internal use 3/5


Training Assignments Front-end Advanced Issue/Revision: x/y

CODE: JS-A.S.A201
TYPE: Medium
LOC: 300
DURATION: 120

Unit 2-3: Scope, Hoisting and Closure


Objectives:
 Understand Advanced JavaScript concepts such as: Scope, Closure, Hoisting
 Abble to regcognize variable's scope to determine it's value at runtime with ease (including nested
scope)
 Able to reason about value of variable in case of Hosting
 Able to recognize and use closure to to solve common problems
Problem 01
What’s the result of executing this code and why?
1. function test() {
2. console.log(a);
3. console.log(foo());
4.
5. var a = 1;
6. function foo() {
7. return 2;
8. }
9. }
10.
11. test();

Problem 02
What’s the result of executing this code and why?
1. function someFunction(number) {
2. function otherFunction(input) {
3. return a;
4. }
5.
6. a = 5;
7.
8. return otherFunction;
9. }
10.
11. var firstResult = someFunction(9);
12. var result = firstResult(2);

Problem 03
Evaluate the code below. What’s the result and why?
1. var a = 1;
2. function b() {
3. a = 10;
4. return;
5. function a() {}
6. }
7. b();
8. console.log(a);
Problem 04
Consider the following JavaScript code (saved in file main.js):

25e-BM/HR/HDCV/FSOFT v1.1 Internal use 4/5


Training Assignments Front-end Advanced Issue/Revision: x/y

1. var nodes = document.getElementsByTagName('button');


2. for (var i = 0; i < nodes.length; i++) {
3. nodes[i].addEventListener('click', function() {
4. console.log('You clicked element #' + i);
5. });
6. }

And the following HTML code:


1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
7. <title>Closure</title>
8. </head>
9. <body>
10. <button>Button 1</button>
11. <button>Button 2</button>
12. <button>Button 3</button>
13. <button>Button 4</button>
14. <script src="main.js"></script>
15. </body>
16. </html>

What will be printed on the console if a user clicks the first and the fourth button in the list? Why?
How to fix problem above?

25e-BM/HR/HDCV/FSOFT v1.1 Internal use 5/5

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy