2a:null 2b:["$","title",null,{"children":"JavaScript Scope | Steve Oney | Observable"}] 30:T461,md`## Scope Scope is a feature in JavaScript language that defines the visibility of variables. In JavaScript, objects and functions are also variables. JavaScript has function scope where each function creates a new scope. Variables defined inside a function are not visible from outside the function. Why is scope important? Scope provides some level of security to your code. One common principle of computer security is that users should only have access to the stuff they need at a time. Scope also solves the naming problem when you have variables with the same name but in different scopes. There are two types of scope in JavaScript, local scope and global scope. ### Reference - [Understanding Scope in JavaScript](https://scotch.io/tutorials/understanding-scope-in-javascript#toc-what-is-scope-) - [JavaScript Scope](https://www.w3schools.com/js/js_scope.asp) - [MDN: Scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope) - [Everything you wanted to know about JavaScript scope](https://medium.com/javascript-in-plain-english/everything-you-wanted-to-know-about-javascript-scope-e991a8288bc) `31:T540,md`#### A quick aside: differences among \`let\`, \`const\`, and \`var\`### The keywords \`let\` and \`const\` are introduced in ES6 for variable declaration, while \`var\` is used for variable declaration before ES6. Briefly speaking, \`var\` variables can be re-declared and updated within the same scope. \`\`\`\`javascript var greeter = "say Hi"; var greeter = "say Hello instead"; greeter = "say Hi again"; \`\`\`\` \`let\` can be updated but not re-declared. \`\`\`\`javascript let greeting = "say Hi"; greeting = "say Hello instead"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared \`\`\`\` \`const\` cannot be updated or re-declared. \`\`\`\`javascript const greeting = "say Hi"; greeting = "say Hello instead";// error: Assignment to constant variable. const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared. \`\`\`\` In addition, \`const\` and \`let\` declarations are block scoped, which means that they can only be accessed within the block they were declared. Reference: - [Var, Let, and Const – What's the Differences](https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/) - [What's the Difference Between var, let and const in JavaScript?](https://alligator.io/js/var-let-const/) `32:T86d,md`### Explicit Function Binding: \`call\`, \`apply\`, and \`bind\` JavaScript has the \`call\`, \`apply\`, and \`bind\` keywords for manipulating scopes. - The method \`call\` invokes the function and allows you to pass in arguments one by one using commas. \`\`\`\`javascript let customer1 = { name: 'Leo', email: 'leo@gmail.com' }; let customer2 = { name: 'Nat', email: 'nat@hotmail.com' }; function greeting(text) { console.log(\`$\{text\} $\{this.name\}\`); } greeting.call(customer1, 'Hello'); // Hello Leo greeting.call(customer2, 'Hello'); // Hello Nat \`\`\`\` - The method \`apply\` invokes the function and allows you to pass in arguments as an array. \`\`\`\`javascript let customer1 = { name: 'Leo', email: 'leo@gmail.com' }; let customer2 = { name: 'Nat', email: 'nat@hotmail.com' }; function greeting(text, text2) { console.log(\`$\{text\} $\{this.name\}, $\{text2\}\`); } greeting.apply(customer1, ['Hello', 'How are you?']); // output Hello Leo, How are you? greeting.apply(customer2, ['Hello', 'How are you?']); // output Hello Nat How are you? \`\`\`\` - The method \`bind\` returns a new function, allowing you to pass in a this array and any number of arguments. \`\`\`\`javascript let customer1 = { name: 'Leo', email: 'leo@gmail.com' }; let customer2 = { name: 'Nat', email: 'nat@hotmail.com' }; function greeting(text) { console.log(\`$\{text\} $\{this.name\}\`); } let helloLeo = greeting.bind(customer1); let helloNat = greeting.bind(customer2); helloLeo('Hello'); // Hello Leo helloNat('Hello'); // Hello Nat \`\`\`\` #### Reference - [Javascript tips — Apply vs. Call vs. Bind](https://medium.com/@leonardobrunolima/javascript-tips-apply-vs-call-vs-bind-d738a9e8b4e1) - [Function.prototype.apply()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) - [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call) - [Function.prototype.bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) `33:[] 2e:{"id":"262b6b67f9f0c70f","slug":"javascript-scoping","title":"JavaScript Scope","thumbnail":"653d55e717458f72d4d4add03ca4dd0c65770e7f0e95e56d56e368452892be05","access_level":"public","create_time":"$D2020-12-30T20:14:51.601Z","update_time":"$D2023-10-02T17:43:39.689Z","view_time":null,"first_public_time":"$D2020-12-30T20:14:52.612Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":42,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"JavaScript Scope","cells":[{"id":0,"value":"md`# JavaScript Scope\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"md`## Global Scope and \\`window\\`\n\nVariables declared outside a JavaScript function are in the global scope. They can be accessed from **all scripts** and functions.\n\nGlobal scope lives as long as the application lives.\n\nThe global scope also has a name: \\`window\\`. This means that we could refer to a global variable \\`x\\` as either \\`x\\` or \\`window.x\\`.\n\nA quick aside: Even if your application has multiple JavaScript files, you create one *big* global scope.\nThis is why some libraries put all their functionality under one variable name like \\`$\\` or \\`_\\`\n.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"md`### An Example of Local and Global Scope\n\\`\\`\\`javascript\n\n// Global Scope\nfunction foo1() {\n // Local Scope #1\n function foo2() {\n // Local Scope #2\n }\n}\n\n// Global Scope\nfunction foo3() {\n // Local Scope #3\n}\n// Global Scope\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"md`## Local Scope\n\nVariables declared within a specific part function are in the local scope.\n\nThere are two kinds of local scope: function scope and block scope.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"md`### Function Scope\n\nWhen you declare a variable in a function, you can access this variable only within the function.\nWith that said, different functions can have local variables with the same name but are not related to each other.\nLocal scope are created when a function starts, and deleted when the function is completed.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"md`#### Exercise`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"md`\n\n1. What would the following code return?\n\\`\\`\\`javascript\nfunction foo() {\n let x = \"declared inside function\"; \n console.log(\"Inside function\");\n console.log(x);\n}\nconsole.log(x);\n\\`\\`\\`\n\n2. What would the following code return?\n\\`\\`\\`javascript\nlet x = \"declared outside function\";\nfoo();\nfunction foo() {\n console.log(\"Inside function\");\n console.log(x);\n}\nconsole.log(\"Outside function\");\nconsole.log(x);\n\\`\\`\\`\n\n3. What would the following code return?\n\\`\\`\\`\\`javascript\nfunction foo() {\n　　x = \"SI 579\";\n}\nfoo();\nconsole.log(x)\n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"md`### Block Scope\n\nBlock scope is tricky. There are two cases we need to consider.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"md`The \\`let\\` and \\`const\\` keywords support the declaration of local scope inside block statements.\nFor example,\n\n\\`\\`\\`\\`javascript\nif (true) {\n // this 'if' conditional block doesn't create a scope\n\n // name is in the global scope because of the 'var' keyword\n var name = 'Hammad';\n // likes is in the local scope because of the 'let' keyword\n let likes = 'Coding';\n // skills is in the local scope because of the 'const' keyword\n const skills = 'JavaScript';\n}\n\nconsole.log(name); // logs 'Hammad'\nconsole.log(likes); // Uncaught ReferenceError: likes is not defined\nconsole.log(skills); // Uncaught ReferenceError: skills is not defined\n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"md`\n**However, you should be careful with the \\`var\\` keyword.**\n\n\\`var\\` variables in a block statement (e.g., \\`if\\`, \\`switch\\`, \\`for\\`, \\`while\\`) do not create a new scope.\n\\`var\\` variables defined inside a block statement will remain in the existing scope.\n\nFor example, \\`x\\` in the following code snippet is in the local scope of function \\`foo\\`, while \\`y\\` is in the global scope.\n\n\\`\\`\\`javascript\n// Global Scope\nfunction foo() {\n // Local Scope #1\n if (true) {\n var x = \"remain in the local scope #1\" \n }\n console.log(x)\n}\n\nif (true) {\n var y = \"remain in the global scope\"\n}\nconsole.log(y)\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"md`## Lexical Scope\n\nWhen a function is defined in another function, the inner function has access to the outer function’s variables. This behavior is called lexical scoping. \n\n\\`\\`\\`\\`javascript\nconst course = \"SI 579\"\nfunction scope1() {\n // course is available here\n function scope2() {\n // course is available here too!\n function scope3() {\n // course is also available here!!\n }\n }\n}\n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"md`## Closures\n\nA closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).\n\nWhenever you create a function within another function, you have created a closure. \nThe inner function is the closure. \nThis closure is usually returned so you can use the outer function’s variables at a later time.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"md`\nLet's take a look at an example.\n\\`\\`\\`\\`javascript\nfunction foo1(name) {\n var subject = \"JavaScript\"\n function foo2() {\n console.log(name + \" loves \" + subject)\n }\n return foo2\n}\n\\`\\`\\`\\`\nNotice the difference below:\n\n\\`\\`\\`\\`javascript\nfoo1(\"Steve\"); // nothing happens as it returns a function\n\nvar foo = foo1(\"Steve\");\nfoo(); // this will call the closure and log \"Steve loves JavaScript\"\n\nfoo1(\"Steve\")(); // this will also call the closure and log \"Steve loves JavaScript\"\n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"md`\nRecall that local scope are created when a function starts, and deleted when the function is completed.\n\nWhen we finish executing \\`var foo = foo1(\"Steve\")\\`, neither the variable \\`subject\\` or \\`foo2\\` in the scope of \\`foo1\\` is deleted.\nIt is saved in the memory (the lexical environment) together with the function \\`foo2\\` (enclosed) as a **closure**.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"md`### Closure Scope Chain\nEvery closure has three scopes:\n - Local Scope (Own Scope)\n - Outer Functions' Scope\n - Global Scope\n\n\\`\\`\\`\\`javascript\nvar scope0 = \"global scope\"\nfunction foo1(name) {\n var scope1 = \"outer functions' scope\"\n function foo2() {\n var scope3 = \"local scope\"\n }\n return foo2\n}\n\\`\\`\\`\\`\n\nLet's look at a more complicated case. \nIn the example above, there's a series of nested functions, all of which have access to the outer functions' scope.\n\\`\\`\\`\\`javascript\nvar e = 10;\nfunction sum(a){\n return function(b){\n return function(c){\n // outer functions scope\n return function(d){\n // local scope\n return a + b + c + d + e;\n }\n }\n }\n}\n\nconsole.log(sum(1)(2)(3)(4)); // log 20\n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"md`#### Exercise: Bob's Confusion\nBob created three button elements representing different fruits on the webpage.\nHe wants the display the price tag as users click on each fruit item.\nHowever, something is wrong...\n\n**Hint:** Recall block scope...\n\n\\`\\`\\`\\`html\n\n\n\n

\n\\`\\`\\`\\`\n\n\\`\\`\\`\\`javascript\nfunction init() {\n var fruit = [\n {'id': 'apple', 'price': '6'},\n {'id': 'banana', 'price': '8'},\n {'id': 'pear', 'price': '10'}\n ];\n for (var i = 0; i < fruit.length; i++) {\n var item = fruit[i];\n document.getElementById(item.id).onclick = function() {\n \tdocument.getElementById('pricetag').innerText=\"It costs \" + item.price\n }\n }\n}\n\ninit();\n\n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"md`### Be careful with performance issues\nA quick aside: In practice, you should avoid unnecessarily using closures for performance considerations.\nIt will negatively affect the performance by slowing down the processing speed and causing memory issues.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"md`## \"this\" Keyword\n\nThe JavaScript \\`this\\` keyword refers to the object it belongs to.\n\n- In a method, \\`this\\` refers to the **owner object**.\n \\`\\`\\`\\`javascript\n var myObject = {};\n myObject.myMethod = function() {\n console.log(this); // this = Object { myObject }\n }\n \\`\\`\\`\\`\n\n- Alone, \\`this\\` refers to the **global object**.\n \\`\\`\\`\\`javascript\n console.log(this); // this = global, [object Window]\n \\`\\`\\`\\`\n\n- In a function, \\`this\\` refers to the **global object** (or **\\`undefined\\`** in strict mode).\n \\`\\`\\`\\`javascript\n function foo() {\n console.log(this); // this = global, [object Window]\n }\n \\`\\`\\`\\`\n\n- In an event, \\`this\\` refers to the **element** that received the event.\n \\`\\`\\`\\`javascript\n var nav = document.querySelector('nav');\n var toggleNav = function() {\n console.log(this); // this =

element\n };\n nav.addEventListener('click', toggleNav);\n \\`\\`\\`\\`\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"md`\nNow let's take a look at a tricky case.\n\n\\`\\`\\`\\`javascript\nvar nav = document.querySelector('nav');\nvar toggleNav = function() {\n console.log(this); // this =

element\n setTimeout(function() {\n console.log(this) // this = [object Window]\n }, 1000);\n};\nnav.addEventListener('click', toggleNav);\n\\`\\`\\`\\`\n\nWhat happened? We’ve created new scope which is not invoked from our event handler, so it defaults to the window Object as expected.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"md`\nIn practice, people will cache a reference to the \\`this\\` value.\n\nFor example,\n\\`\\`\\`\\`javascript\nvar nav = document.querySelector('nav');\nvar toggleNav = function() {\n console.log(this); // this =

element\n var that = this;\n setTimeout(function() {\n console.log(that) // that =

element\n }, 1000);\n};\nnav.addEventListener('click', toggleNav);\n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"md`## Scope in arrow functions vs. in \"standard\" functions\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"md`### Recap: Arrow Function\nArrow functions were introduced in ES6.\nArrow functions allow us to write shorter function syntax.\n\n#### Example Arrow Function for Single Argument\n\\`\\`\\`\\`javascript\n// Traditional Function\nfunction (a){\n return a + 100;\n}\n\n// Arrow Function\na => a + 100;\n\\`\\`\\`\\`\n\n#### Example Arrow Function for Multiple Arguments\n\\`\\`\\`\\`javascript\n// Traditional Function\nfunction (a, b){\n return a + b + 100;\n}\n\n// Arrow Function\n(a, b) => a + b + 100;\n\\`\\`\\`\\`\n\n#### Example Arrow Function for No Arguments\n\\`\\`\\`\\`javascript\n// Traditional Function\nlet a = 4;\nlet b = 2;\nfunction (){\n return a + b + 100;\n}\n\n// Arrow Function\nlet a = 4;\nlet b = 2;\n() => a + b + 100;\n\\`\\`\\`\\`\n\n#### Example Arrow Function for Named Functions\n\\`\\`\\`\\`javascript\n// Traditional Function\nfunction bob (a){\n return a + 100;\n}\n\n// Arrow Function\nlet bob = a => a + 100;\n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"md` ### Scope in Arrow functions\n[Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) do not have their own \\`this\\`.\nArrow functions establish \\`this\\` based on the scope the Arrow function is defined within.\nThe \\`call\\`, \\`apply\\` and \\`bind\\` methods are **NOT suitable** for Arrow functions.\n\n#### Example 1\n\\`\\`\\`\\`javascript\nvar obj = {\n i: 10,\n b: () => console.log(this.i, this),\n c: function() {\n console.log(this.i, this);\n }\n}\n\nobj.b(); // undefined, [object Window]\nobj.c(); // 10, Object {...}\n\\`\\`\\`\\`\n\n#### Example 2\n\\`\\`\\`\\`javascript\nvar nav = document.querySelector(\\'nav\\');\nvar toggleNav = function() {\n console.log(this); // this =