Scribd Logo
Upload

Welcome to Scribd!

  • Front-end Advanced Training Scope, Hoisting and Closure

    Uploaded by

    Nguyễn Công Tuấn Anh
    108 views5 pages
    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.

    Original Description:

    Original Title

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

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    108 views5 pages

    Front-end Advanced Training Scope, Hoisting and Closure

    Uploaded by

    Nguyễn Công Tuấn Anh
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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