CSE 190M Extra Session #5 JavaScript scope and closures slides created by Marty Stepp

Slides:



Advertisements
Similar presentations
CPSC 388 – Compiler Design and Construction
Advertisements

Semantic Analysis and Symbol Tables
COP4020 Programming Languages Names, Scopes, and Bindings Prof. Xin Yuan.
Variables, Environments and Closures. Overview We will Touch on the notions of variable extent and scope Introduce the notions of lexical scope and.
Chapter 8 Scope, Lifetime and More on Functions. Definitions Scope –The region of program code where it is legal to reference (use) an identifier Three.
Recap 1.Programmer enters expression 2.ML checks if expression is “well-typed” Using a precise set of rules, ML tries to find a unique type for the expression.
Cs784(TK)1 Semantics of Procedures and Scopes. Kinds of Scope Static or Lexical scope –determined by structure of program –Scheme, C++, Java, and many.
Chapter 5 Basic Semantics
Lecture 3: Topics If-then-else Operator precedence While loops Static methods Recursion.
Lifetime “The lifetime of a variable is the time during which the variable is bound to a specific memory location.” [p. 219] “…the lifetime of a variable.
Names and Scopes CS 351. Program Binding We should be familiar with this notion. A variable is bound to a method or current block e.g in C++: namespace.
CS 106 Introduction to Computer Science I 02 / 12 / 2007 Instructor: Michael Eckmann.
Variables Six properties: Binding times of properties:
Overview scope - determines when an identifier can be referenced in a program storage class - determines the period of time during which that identifier.
Subroutines. aka: user-defined functions, methods, procdures, sub-procedures, etc etc etc We’ll just say Subroutines. –“Functions” generally means built-in.
Cs164 Prof. Bodik, Fall Symbol Tables and Static Checks Lecture 14.
Lecture From Chapter 6 & /8/10 1 Method of Classes.
CS 355 – PROGRAMMING LANGUAGES Dr. X. Copyright © 2012 Addison-Wesley. All rights reserved.1-2 Topics Scope Scope and Lifetime Referencing Environments.
Bindings and scope  Bindings and environments  Scope and block structure  Declarations Programming Languages 3 © 2012 David A Watt, University.
Names and Scope. Scope Suppose that a name is used many times for different entities in text of the program, or in the course of execution. When the name.
1 Names, Scopes and Bindings Aaron Bloomfield CS 415 Fall
Loops: Handling Infinite Processes CS 21a: Introduction to Computing I First Semester,
1 Scope Scope describes the region where an identifier is known, and semantic rules for this.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
CSE 341 Lecture 29 a JavaScript, the bad parts slides created by Marty Stepp see also: JavaScript: The Good Parts, by.
JavaScript Syntax, how to use it in a HTML document
Basic Java Syntax COMP 401, Spring 2014 Lecture 2 1/14/2014.
Julian on JavaScript: Functions Julian M Bucknall, CTO.
Variables, Environments and Closures. Overview Touch on the notions of variable extent and scope Introduce the notions of lexical scope and dynamic.
CSE (c) S. Tanimoto, 2002 AI Techniques 1 Where and When Do Symbols Refer to Values and Functions? Scope and Extent of Bindings Bindings Scope Extent.
CSE 341 Lecture 25 More about JavaScript functions slides created by Marty Stepp
Java Class Structure. Class Structure package declaration import statements class declaration class (static) variable declarations* instance variable.
24-Dec-15 Class Structure. 2 Classes A class describes a set of objects The objects are called instances of the class A class describes: Fields (instance.
Concepts of programming languages Chapter 5 Names, Bindings, and Scopes Lec. 12 Lecturer: Dr. Emad Nabil 1-1.
JavaScript scope and closures
The for loop.
1 Structure of Compilers Lexical Analyzer (scanner) Modified Source Program Parser Tokens Semantic Analysis Syntactic Structure Optimizer Code Generator.
Rich Internet Applications 2. Core JavaScript. The importance of JavaScript Many choices open to the developer for server-side Can choose server technology.
JavaScript for C# developers Dhananjay Microsoft MVP
Getting from Scripts to Applications Donald J. Sipe | Refresh Jacksonville | November 11 th 2008.
COP 2220 Computer Science I Topics –Breaking Problems Down –Functions –User-defined Functions –Calling Functions –Variable Scope Lecture 4.
CSE 501N Fall ’09 07: Iteration 17 September 2009 Nick Leidenfrost.
Advanced Programming in C
The Lifetime of a Variable
Some Eclipse shortcuts
CSE 341 Lecture 20 Mutation; memoization slides created by Marty Stepp
Names, Scopes, and Bindings: Scopes
Class Structure 16-Nov-18.
CSE 3302 Programming Languages
CSE 3302 Programming Languages
Scope, Visibility, and Lifetime
Class Structure 28-Nov-18.
Lecture 15 (Notes by P. N. Hilfinger and R. Bodik)
Class Structure 7-Dec-18.
Closure Closure binds a first-class function and a lexical environment together This is a complex topic, so we will build up our understanding of it we.
Scoping and Binding of Variables
Class Structure 2-Jan-19.
CSC 533: Programming Languages Spring 2015
Bindings, Scope, and Extent
Scope.
Class Structure 25-Feb-19.
CSE 341 Lecture 27 JavaScript scope and closures
Suggested self-checks:
CSE 3302 Programming Languages
CSE 341 Lecture 11 b closures; scoping rules
Lecture 6: Names (Revised based on the Tucker’s slides) 5/27/2019
CSC 533: Organization of Programming Languages Spring 2007
CSC 533: Programming Languages Spring 2019
Corresponds with Chapter 5
Building Java Programs
Presentation transcript:

CSE 190M Extra Session #5 JavaScript scope and closures slides created by Marty Stepp

2 Recall: Scope scope: The enclosing context where values and expressions are associated.  essentially, the visibility of various identifiers in a program lexical scope: Scopes are nested via language syntax; a name refers to the most local definition of that symbol.  most modern languages (Java, C, ML, Scheme, JavaScript) dynamic scope: A name always refers to the most recently executed definition of that symbol.  Perl, Bash shell, Common Lisp (optionally), APL, Snobol

3 Lexical scope in Java In Java, every block ( {} ) defines a scope. public class Scope { public static int x = 10; public static void main(String[] args) { System.out.println(x); if (x > 0) { int x = 20; System.out.println(x); } int x = 30; System.out.println(x); }

4 Lexical scope in JavaScript In Java, there are only two scopes:  global scope: global environment for functions, vars, etc.  function scope: every function gets its own inner scope var x = 10; // foo.js function main() { print(x); x = 20; if (x > 0) { var x = 30; print(x); } var x = 40; var f = function(x) { print(x); } f(50); }

5 Another scope example function f() { var a = 1, b = 20, c; print(a + " " + b + " " + c); // 1 20 undefined // declares g (but doesn't call immediately!) function g() { var b = 300, c = 4000; print(a + " " + b + " " + c); // a = a + b + c; print(a + " " + b + " " + c); // } print(a + " " + b + " " + c); // 1 20 undefined g(); print(a + " " + b + " " + c); // undefined }

6 Lack of block scope for (var i = 0; i < 10; i++) { print(i); } print(i); // 11 if (i > 5) { var j = 3; } print(j); any variable declared lives until the end of the function  lack of block scope in JS leads to errors for some coders  this is a "bad part" of JavaScript (D. Crockford)

7 The future: let statement var x = 5; // this code doesn't work today var y = 0; var z; let (x = x + 10, y = 12, z = 3) { print(x + " " + y + " " + z); // } print(x + " " + y + " " + z); // 5 0 undefined print(let (x = 2, y = 3) x + " " + y); // 2 3 print(x + " " + y); // 5 0 upcoming versions of JS will have block scope using let  (this code does not work yet!)

8 Implied globals name = value; function foo() { x = 4; print(x); } // oops, x is still alive now (global) if you assign a value to a variable without var, JS assumes you want a new global variable with that name  hard to distinguish  this is a "bad part" of JavaScript (D.Crockford)

9 The global object technically no JavaScript code is "static" in the Java sense  all code lives inside of some object  there is always a this reference that refers to that object all code is executed inside of a global object  in browsers, it is also called window ; in Rhino: global()  global variables/functions you declare become part of it –they use the global object as this when you call them "JavaScript's global object [...] is far and away the worst part of JavaScript's many bad parts." -- D. Crockford

10 Global object and this keyword function printMe() { print("I am " + this); } > var teacher = {...}; // from past lecture > teacher.print = printMe; > teacher.print(); I am Prof. Tyler Durden > print(); I am [object global]

11 Closures closure: A first-class function that binds to free variables that are defined in its execution environment. free variable: A variable referred to by a function that is not one of its parameters or local variables.  bound variable: A free variable that is given a fixed value when "closed over" by a function's environment. A closure occurs when a function is defined and it attaches itself to the free variables from the surrounding environment to "close" up those stray references.

12 Closures in JS var x = 1; function f() { var y = 2; return function() { var z = 3; print(x + y + z); }; y = 10; } var g = f(); g(); // is 14 a function closes over free variables as it is declared  grabs references to the names, not values (sees updates)

13 Module pattern (function(params) { statements; })(params); declares and immediately calls an anonymous function  used to create a new scope and closure around it  can help to avoid declaring global variables/functions  used by JavaScript libraries to keep global namespace clean

14 Module example // old: 3 globals// new: 0 globals! (function() { var count = 0; function incr(n) { count += n; count += n; } function reset() { count = 0; count = 0; } incr(4); incr(2); print(count); })(); declare-and-call protects your code and avoids globals  avoids common problem with namespace/name collisions

15 Common closure bug var funcs = []; for (var i = 0; i < 5; i++) { funcs[i] = function() { return i; }; } > funcs[0](); 5 > funcs[1](); 5 Closures that bind a loop variable often have this bug.  Why do all of the functions return 5?

16 Fixing the closure bug var funcs = []; for (var i = 0; i < 5; i++) { funcs[i] = (function(n) { return function() { return n; } })(i); } > funcs[0](); 1 > funcs[1](); 2

17 Objects with public data // BankAccount "invariant": balance >= 0 function BankAccount(name, balance) { this.name = name; this.balance = Math.max(0, balance); } BankAccount.prototype.withdraw = function(amt) { if (amt > 0 && amt <= this.balance) { this.balance -= amt; } }; clients can directly modify a BankAccount 's balance! var ba = new BankAccount("Fred", 50.00); ba.balance = -10; // ha ha

18 Objects with private data // BankAccount invariant: balance >= 0 var BankAccount = (function() { var name, balance; var ctor = function(nam, bal) { name = nam; balance = Math.max(0, bal); }; ctor.prototype.withdraw = function(amt) { if (amt > 0 && amt <= balance) { balance -= amt; } }; ctor.prototype.getName = function() {return name;} ctor.prototype.getBalance = function() {return balance;} return ctor; })();