Advanced JavaScript

Junghoo Cho

cho@cs.ucla.edu

Variable Scope (Global vs Local)

A variable declared outside of any block has global scope.
A variable declared with let inside a block is valid only within the block: block-scope local variable
A variable used without an explicit let declaration has global scope
- This is strongly discouraged

Scope Example

let a = "a"; // global vs local?
b = "b"; // global vs local?

function f()
{
    c = "c"; // global vs local?
    let d = "d"; // global vs local?
}

`let` vs `var`

let was introduced in ES6
Before let, var was used with the following difference
- var has function scope (as opposed to block scope)
- var is hoisted (vs no hoisting)
  - declaration is “moved” to the top of its scope
- read this article to learn more on hoisting
Use of let produces cleaner code. Use it!

`var` Example

var a = 10;  // global vs local?
function f() {
    b = 10;  // global vs local?
    console.log(b);
    var b;   
}
f();
console.log(b);

Function Object

In Javascript, functions are objects!
- Functions can be assigned to a variable
- Functions can be passed as a parameter
- Functions can have properties
But
- A function is an object type (according to the standard), but typeof returns function not object

Function Object Example

function square(x) { return x*x; };

function myfunc(x, func) {
    return func(x);
}

myfunc(10, square); 
myfunc(10, function (x) { return x * 2; }); // anonymous function

myfunc.a = 20;

Nested Function

Functions can be defined inside a function!

function outer_function() {
    console.log("a")
    function inner_function() {
        console.log(1); 
    }
    console.log("b");
    inner_function();
}
outer_function(); // what will be printed?

Variable Scope in Nested Function

Variables in a nested function follow lexical scope (not dynamic scope)

function f() {
    let a = 1; 
    let b = 2; 
    function g() {
        console.log(b);  // b = ?
        b = 3;
    }
    if (a > 0) {
        let b = 4;
        g();
        console.log(b); // b = ?
    }
    console.log(b);     // b = ?
}
f(); // what will be printed?

Nested Function and Closure (1)

Nested functions can be returned and be called later!

Example: What will happen?

function getFunc() {
    function printUCLA() { console.log("UCLA"); }
    return printUCLA;
}

let func = getFunc();
func();

Nested Function and Closure (2)

Closure: When a nested function references non-local variables and is returned, it is “bundled together” with the referenced variables

function getFunc() {
    let age = 10; 
    function printAge() { console.log(++age); }
    return printAge;
}

let func = getFunc();
func(); func(); // what will be printed?

printAge() does not have its own local variable, but the returned printAge carries the age variable from its surrounding context!

Nested Function and Closure (3)

Q: What will be printed?

function getFunc() {
    let age = 10; 
    function printAge() { console.log(++age); }
    return printAge;
}

let myFunc1 = getFunc();
myFunc1(); myFunc1();

let myFunc2 = getFunc();
myFunc2(); myFunc2();

Nested Function and Closure (4)

Closures can be used to simulate local variables and functions
- Avoids polluting global namespace
- Used extensively especially before ES6

Example

(function() {
    var count = 0;
    function helper() {
        console.log(`Help called ${++count} times!`);
    }
    helper();
    // ...
    helper();
})()  // create an anonymous function and call it immediately

The above code “simulates” block-local scope for count and helper()

Arrow Function (1)

In JavaScript, we often have to pass a function as a parameter

function ChangeColor(event) {
    document.body.style.color = "red";
}
document.body.addEventListener("click", ChangeColor);

Polluting namespace can be avoided using anonymous functions

document.body.addEventListener("click", function(event) {
    document.body.style.color = "red";
});

Arrow Function (2)

Arrow function makes this even more concise

document.body.addEventListener("click", (event) => {
    document.body.style.color = "red";
});

Arrow function expression
```
(param1, ...) => expression
(param1, ...) => { statements; }
```
- () => expression returns the value of expression
- () => { statements; } should return a value explicitly

Object-Oriented Programming (OOP)

Object = data + method
A “method” can be added to an object in JavaScript
- Example
```
let o = { x: 10 };
o.multiply = function (v) { this.x *= v; }

o.multiply(5);
console.log(o.x);
```
  - Inside an object’s method, this points to the object itself
Important: Arrow functions should not be used as an object method
- Arrow function is primarily to be passed as a parameter
- More on this later

Class in ECMAScript 2015

ES6 introduced cleaner syntax to define a class

Example

class Shape {
    constructor(color) {  // constructor() is class constructor
        this.color = color; 
    }
    info() { return "color: " + this.color; }
    whoami() { 
        console.log("I am a Shape with " + this.info());
    }
};

s = new Shape('blue');
s.whoami();

Class Inheritance

class Rectangle extends Shape {
    constructor(color, x, y) {
        super(color);  // super refers to the parent class
        this.x = x;
        this.y = y;
    }
    info() {
        return `${super.info()}, x: ${this.x}, y: ${this.y}`;
    }
};
let r = new Rectangle("red", 2, 3);
r.whoami();

Internally, class inheritance is implemented via prototype object
- To learn the detail, read MDN document on inheritance and prototype chain

Optional Chaining (ECMAScript 2020)

If a vaiable is undefined or null, we get an error

let obj;
console.log(obj.name); // Error: obj is undefined!

Checking for the error is ugly

let obj;
console.log(obj ? obj.name : undefined);

Instead of throwing an error, optional chaining operator returns undefined:
```
let obj;
console.log(obj?.name);  // returns undefined
```

Keyword `this`

Unfortunately, the meaning of this is a source of great confusion and bug in JavaScript
Three bindings of this
1. In a function called via object/class method
  - this = called object/class
2. In a function called via event triggering
  - this = DOM element to which event handler was set
3. Everywhere else (in top-level block or in other function calls)
  - this = the global object

`this` in Event Handling Call

When called via event triggering, this binds to the DOM element where the handler is set

Example

<body id="body_id">
    ...
</body>
<script>
    document.body.addEventListener("click", function (event) {
        console.log(this.id); // what does this bind to?
    });
</script>

`this` in Other Places

If this is used in other than class method or event handler, this binds to the global object
Global object (globalThis in ES2020)
- In browser, window object
- In Node.js, global object
- Any variable assigned without declaration becomes a property of the global object

Arrow Function and `this` Binding

Arrow function (() => {}) does not provide its own this binding
- It retains the this binding of the enclosing lexical context

Example

<body id="body_id">
    ...
</body>
<script>
    document.body.addEventListener("click", (event) => {
        console.log(this.id); // what does this bind to?
    });
</script>

Tricky Example of `this`

x = 10;

function_printx = function() { console.log(this.x); };
arrow_printx = () => { console.log(this.x); };

o = { x: 20 };
o.printx_f = function_printx;
o.printx_a = arrow_printx;

// What will be printed?
console.log(this.x); 
function_printx();   
arrow_printx();      
o.printx_f();        
o.printx_a();

Notes on `this`

The binding of this changes dynamically depending on how a function is called
- This “dynamic scoping” makes this confusing and hard to understand, leading to many bugs
Use this only in object/class method
Never use arrow functions to define an object/class method

Array Manipulation

Mutator vs Accessor
- Mutator: modifies input array in-place
  - reverse, sort, push, pop, shift, unshift, splice
- Accessor: input array stays in tact
  - concat, slice, filter, map
  - A new output array is created and returned

Array Manipulation Example (1)

let a = [1, 2, 3, 4];
let b = a;
console.log(b);
a[1] = 5;
console.log(b);
a = [1, 2, 3];
console.log(b);

Array Manipulation Example (2)

let a = [1, 2, 3];
let b = a.reverse();       // reverse is a mutator
console.log(b);
a[1] = 6;
console.log(b);

a = [1, 2, 3];
b = a.concat([4, 5]);  // concat is an accessor
console.log(b);
a[1] = 6;
console.log(b);

Destructuring Assignment

let o = { userid: 10, password: "secret" };
const { userid, password, email = "default_email" } = o;
// userid = 10, password = "secret", email = "default_email"

let a = [1, 2, 3, 4];
let [a1, a2, ...rest] = a;
// a1 = 1, a2 = 2, rest = [3, 4]

ES Module

ECMAScript 2015 added support for modules
- Similar to Java “packages”
- One JavaScript file ↔ one module
- Everything in a module stays local unless declared export
- exported entities can be imported and used by other JavaScript code

(Multiple) Named Export

//------ lib.js ------
export function square(x) {
    return x * x;
}
export function dist(x, y) {
    return Math.sqrt(square(x) + square(y));
}

//------ main.js ------
import { square } from './lib.js';
square(11);  

//----- main2.js ------
import * as mylib from './lib.js';
mylib.dist(4, 3);

(Single) Default Export

//------ lib.js ------
export default function () { ... }

//------ main1.js ------
import myFunc from './lib.js';
myFunc();

Remark:
- No { } to import default export
- { } to import named export (even if we import just one)

References

Javascript: The Definitive Guide by David Flanagan
- Strongly recommended if you plan to code in JavaScript extensively
ECMAScript standard: ECMA 262 https://www.ecma-international.org/ecma-262/
- The ultimate reference on what is really correct
- But very boring to read and learn from
- Browser support is a few generations behind

Advanced JavaScript

Junghoo Cho

cho@cs.ucla.edu

Variable Scope (Global vs Local)

Scope Example

let vs var

var Example

Function Object

Function Object Example

Nested Function

Variable Scope in Nested Function

Nested Function and Closure (1)

Nested Function and Closure (2)

Nested Function and Closure (3)

Nested Function and Closure (4)

Arrow Function (1)

Arrow Function (2)

Object-Oriented Programming (OOP)

Class in ECMAScript 2015

Class Inheritance

Optional Chaining (ECMAScript 2020)

Keyword this

this in Event Handling Call

this in Other Places

Arrow Function and this Binding

Tricky Example of this

Notes on this

Array Manipulation

Array Manipulation Example (1)

Array Manipulation Example (2)

Destructuring Assignment

ES Module

(Multiple) Named Export

(Single) Default Export

References

`let` vs `var`

`var` Example

Keyword `this`

`this` in Event Handling Call

`this` in Other Places

Arrow Function and `this` Binding

Tricky Example of `this`

Notes on `this`