Lecture06-Scope_Scope_Chain.pdf - Scope and Scope Chain •...

This preview shows 1 out of 10 pages.

Scope and Scope Chain In this lecture we will learn in depth about scopes in JavaScript and how scope chain is used to resolve the references. We will also learn new syntax added to ES6 that makes JavaScript more powerful. Science of consciousness: the nature of life is to grow.
Image of page 1

Subscribe to view the full document.

Scope and Scope Chain Scope: The enclosing context where values and expressions are associated. Functions in JS define a new scope When we ask for any variable, JS Engine will look for that variable in the current scope, if it doesn’t find it.. Then it will consult its outer lexical scope (where it’s lexically sitting) until we reach the global scope
Image of page 2
Simple Scope Example function a(){ console.log(x); // consult Global for x and print 20 from Global } function b(){ var x = 10 ; a(); // consult Global for a console.log(x); } var x = 20 ; b(); Global Env X = 20 b() Env X = 10 a() Env Reference To outer lexical environment Scope Chain
Image of page 3

Subscribe to view the full document.

Simple Scope Example function b(){ function a(){ console.log(x); } var x = 10 ; a(); console.log(x); } var x = 20 ; b(); // 10 Global Env X = 20 b() Env X = 10 a() Env Reference To outer lexical environment Scope Chain
Image of page 4
Simple Scope Example function b(){ function a(){ console.log(x); } a(); console.log(x); } var x = 20 ; b(); // 20 Global Env X = 20 b() Env a() Env Reference To outer lexical environment Reference To outer lexical environment Scope Chain It will travel all the scope chain to find x.
Image of page 5

Subscribe to view the full document.

Scope Example function f() { var a = 1 , b = 20 , c; console.log(a + " " + b + " " + c); // 1 20 undefined function g() { var b = 300 , c = 4000 ; console.log(a + " " + b + " " + c); // 1 300 4000 a = a + b + c; console.log(a + " " + b + " " + c); // 4301 300 4000 } console.log(a + " " + b + " " + c); // 1 20 undefined g(); console.log(a + " " + b + " " + c); // 4301 20 undefined } f();
Image of page 6
var x = 10 ; function main() { console.log( "x1 is " + x); x = 20 ; console.log( "x2 is " + x); if (x > 0 ) { x = 30 ; // x=30; console.log( "x3 is " + x); } console.log( "x4 is " + x); var x = 40 ; // x=40; var f = function (x) { console.log( "x5 is " + x); } f( 50 ); console.log( "x6 is " + x); } main(); console.log( "x7 is " + x); Scope Example
Image of page 7

Subscribe to view the full document.

var vs let (ES6) var scope is defined by the nearest function block let scope is defined by the nearest enclosing block Use let instead of var inside for loops to prevent leaking to the outer scope. let , unlike var , does not create a property on the global object. let , unlike var , does not hoist var x = 'global' ; let y = 'global' ; console . log ( this . x ); // "global" console . log ( this . y ); // undefined console . log ( window . y ); // undefined console . log ( y ); // "global" function a(){ for ( var x = 1 ; x < 10 ; x++){ console.log(x); } console.log(x); // 10 } function a(){ for ( let x = 1 ; x < 10 ; x++){ console.log(x); } // different x every loop console.log(x); // error }
Image of page 8
const (ES6) The const declaration scoped to block, cannot be updated, NOT immutable, objects cannot change its structure but we can change the values. To make an object immutable we call: Object.freeze(); const MY_NUM = 7 ; MY_NUM = 20 ; // this will fail console.log(MY_NUM); // will print 7 const MY_NUM = 20 ; // trying to redeclare a constant throws an error var MY_NUM = 20 ; // this will fail const FOO; // SyntaxError: missing = in const declaration const MY_OBJECT = { "key" : "value" }; // const also works on objects MY_OBJECT = { "OTHER_KEY" : "value" }; // this will fail // object attributes are not protected, so the following statement is executed without problems MY_OBJECT.key = "otherValue" ; // will work!
Image of page 9

Subscribe to view the full document.

Image of page 10
You've reached the end of this preview.
  • Fall '17
  • Levi
  • Closure, Global Env