Lecture 14 Functional JS

Javascript was a language that had…

…the functionality of Scheme

(This Lecture)

…the object orientation of Self

(This Lecture)

…and the syntax of Java

(First JS lecture)

Functions and arguments

Function Definition Syntax

Function Declaration


					function hypot (x, y) {
						return Math.sqrt(x ** 2 + y ** 2);
					}

Function Expression


					let hypot = function (x, y) {
						return Math.sqrt(x ** 2 + y ** 2);
					};

Arrow functions


				let hypot = (x, y) => Math.sqrt(x ** 2 + y ** 2);


				let hypot = (x, y) => {
					return Math.sqrt(x ** 2 + y ** 2);
				}

- [Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) are a more compact way to write functions, a lot can be omitted. - Even the parentheses around arguments are optional if you only have one argument. - Besides syntax, they do have some differences from other functions, which we will see later in this lecture.

Invocation is always the same


			hypot(3, 4); // 5

Invocation vs reference When is "Thank you 😊" logged?


			<button id=button>Click me</button>


			let handler = evt => console.log("Thank you 😊");
			button.addEventListener("click", handler());

When I click the button
Immediately
Both immediately and when I click the button
Never, there’s an error

Why does this happen? Because we invoked the function, so we actually assigned its return value (undefined) as the event listener. This is a very common mistake.

Missing arguments


			let hypot = (x, y) => Math.sqrt(x ** 2 + y ** 2);
			console.log(hypot(5)); // What does this log?

7.071067812
NaN
TypeError: Argument 'y' not provided in function 'hypot'

Variadic functions


				let sum = function (...numbers) {
					let total = 0;

					for (let n of numbers) {
						total += n;
					}

					return total;
				}


				let avg = function(...numbers) {
					return sum(...numbers) / numbers.length;
				}

- JS allows you to use any number of arguments when calling a function without erroring anyway - However, to capture a variable number of arguments as an array, you can use the [rest parameter syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) - Note that you can use the [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to "spread" an array's elements into positional arguments, e.g. to be used in calling another function - Note that the rest parameter syntax can be combined with regular paramters (as long as it comes after them). That is why it's called the "rest" parameter, because it captures the rest of the parameters.

Default values


			let hypot = (x, y = x) => Math.sqrt(x ** 2 + y ** 2);
			console.log(hypot(5)); // What does this log?

7.071067812
NaN
TypeError: Argument 'y' not provided in function 'hypot'

API Design Tip Avoid optional positional arguments


			let event = document.createEvent('KeyboardEvent');
			event.initKeyEvent("keypress", true, true, null, null,
			                   true, false, true, false, 9, 0);

API Design Tip Prefer dictionary arguments


			let event = new KeyboardEvent("keypress", {
				ctrlKey: true,
				shiftKey: true,
				keyCode: 9
			});

- Clear what each parameter is - No need to remember order - No need to provide superfluous parameters simply to be able to provide another parameter that comes later

First-class functions

Programming with Functions

Second-class functions

Functions are executable code
Programmers write them
Functions create and manipulate data
Arguments and return values are data
Functions can reduce repetitive code for managing data

First-class functions

Functions are data
Computer can manipulate them
Functions can create and manipulate functions
Arguments and return values can be functions
Functions can reduce repetitive code for invoking functions

A programming language is said to have first-class functions if it treats functions as [first-class citizens](https://en.wikipedia.org/wiki/First-class_citizen). This means it supports passing functions as arguments to other functions, returning them as the values from other functions, and assigning them to variables or storing them in data structures.

Functions can be function arguments


					<button id=button>Click me</button>


				button.addEventListener("click", function (event) {
					event.target.textContent = "Thank you 😊";
					});

- In JS functions are objects and can be passed around in arguments! - Note that this function has no name. Functions in JS can be anonymous, naming them is optional.

Functions can be variable values


				let hypot = (x, y) => Math.sqrt(x ** 2 + y ** 2);

One function, multiple references What happens?


			let f = x => x + 1;
			let g = f;
			f = 42;
			g(1);

42
2
TypeError: g is not a function

What happens here? 1. `f` is first a pointer to the value `x => x + 1`, a function 2. Now `g` also points to the same function 3. Now `f` points to the value `42` instead of the function it previously held. `g` has not changed. 4. `g` invokes the function `x => x + 1` and binds `x` to `1`, thus it returns `2`.

Functions can be object properties


			let greet = function() {
				console.log(`Hi, I’m ${this.name}`);
			};
			let instructors = [
				{name: "Lea", greet: greet},
				{name: "David", greet: greet}
			];

			for (let instructor of instructors) {
				instructor.greet();
			}

- When functions are properties of objects they are called *methods* - There is nothing special about these properties, they can be overwritten, reassigned, added to objects we don’t own etc. - When a function is called as a method, its special `this` parameter points to the object itself. This is called the *function context* and we will explore it in more detail soon. - Note that `console.log()` is a method of the `console` object.

Methods = Functions + Object properties

" Hello!   ".trim() // "Hello!"

Lets the object carry behavior as well as data
The calling object becomes an implicit parameter that we access via this

- A heuristic worth remembering about whether we need a method: if we don't actually need access to an object, then there's no point making the function a method.

Functions can even be function return values


				function interpolate(min, max) {
					return function (p) {
						return min + (max - min) * p;
					}
				}


				let range = interpolate(1, 10);
				console.log(range(.1), range(.5), range(.9));

Why first-class functions?

Callbacks: Code called by the browser (e.g. events)
Asynchronous execution: Code called later
Abstraction: Code that can parameterize other code

Higher Order Functions

Functions that:

Take functions as parameters, and/or
Return functions

Higher Order Functions Example: Currying


				function curry(f, ...fixedArgs) {
					return function(...args) {
						return f(...fixedArgs, ...args);
					}
				}

Or, more succinctly (but less clearly):


					let curry = (f, ...fixedArgs)
					          => (...args)
					          => f(...fixedArgs, ...args);


			function interpolate(min, max, p) {
				return min + (max - min) * p;
			}

			let range = curry(interpolate, 1, 10);
			console.log(range(.1), range(.5), range(.9));

Curry?

read about [Haskell Brooks Curry]()

Map, Reduce, Filter

Common patterns for transforming a collection of items en masse

map: transform items 👨 👨 👧 ➡ 👨🏼 👨🏼 👧🏼
filter: choose some of the items 👨 👨 👧 ➡ 👨 👧
reduce: combine items 👨 👨 👧 ➡ 👨‍👨‍👧

In JS these are all methods on any Array object. Each takes a callback: a function that will be applied to each item.

Map: Transform Each Item

Without map


					let numbers = [1, 2, 3, 4];
					let squares = [];

					for (let n of numbers) {
						squares.push(n ** 2);
					}

With map


					let numbers = [1, 2, 3, 4];
					let squares = numbers.map(n => n ** 2);

Map transforms an array using a transformation function and returns the result as a new array

Filter: Select some Items

Without filter


					let numbers = [1, 2, 3, 4, 5];
					let odd = [];

					for (let n of numbers) {
						if (n % 2) {
							odd.push(n);
						}
					}

With filter


					let numbers = [1, 2, 3, 4, 5];
					let odd = numbers.filter(n => n % 2);

Filter returns a new array with only the items for which the filtering function returned a truthy value

Reduce: Combine all items

Without reduce


					let numbers = [1, 2, 3, 4, 5];
					let sum = 0;

					for (let n of numbers) {
						sum += n;
					}

With reduce


					let numbers = [1, 2, 3, 4, 5];
					let sum = numbers.reduce(
						(acc, current) => acc + current,
						0 // initial value
					);

Reduce code arguably longer or more complicated, but still more informative

These can be chained

Sum the squares of odd numbers from 1 to 5


			let numbers = [1, 2, 3, 4, 5];
			let result = numbers
				.filter(n => n % 2)
				.map(n => n ** 2)
				.reduce((acc, cur) => acc + cur, 0);

Because each array method returns an array as well, we can continue calling array methods on the result. This pattern is called *chaining*, and is very popular in the JS world. Do note the performance implications: this loops 3 times, whereas a carefully crafted loop-based piece of code would only need to loop once. However, both of these are O(N).

Software Engineering

Map, Filter, Reduce are functions that specify what you want to do without/instead of specifying how
Makes the developers intention clear which can make it easier for other developers to use/change the code
Allows system to swap in different implementations for efficiency gains without any changes to the code
Example: MapReduce
- a system that implements these operators on large parallel clusters
- offering massive efficiency for programs written this way, without the developer needing to think about it
- Famous paper (14K citations) by Jeff Dean and Sanjay Ghemawat

Click on function names to read documentation

More iterative functions

sort
filter
map
reduce
find
Object.groupBy
flatMap
every
some
forEach
reduceRight
Map.groupBy

Closures

What does this print?

let i = 5;
function logI() {
	console.log(i);
}

logI();
i = 6;
logI();

The console logs 5, 5
The console logs 5, 6

What does this print?

function logI() {
	console.log(i);
}
let i = 5;

logI();
i = 6;
logI();

The console logs 5, 5
The console logs 5, 6
Uncaught ReferenceError: i is not defined

What does this print?

let i = 5;
function logI() {
	console.log(i);
}

logI();
{
	let i = 6;
	logI();
}

The console logs 5, 5
The console logs 5, 6

Lexical Scope

Functions use lexical scope: they capture variables when the function is defined,
not when the function is executed.

This is implemented using closures.

Functions Evaluate to Closures

expression runtime value

number 5 5

object { prof: "David" } { prof: "David" }

function

() => x

Closure
Environment	`x` → `5`
Code	`() => x`

Closure Over a Mutable Binding

let i = 5;
function logI() {
	console.log(i);
}

logI(); // 5
i = 6;
logI(); // 6

Closure
Environment	`let i` → 56
Code	`function logI() { console.log(i); }`

Closure Keeps the Outer Variable

let i = 5;
function logI() {
	console.log(i);
}

logI(); // 5

{
	let i = 6;

	logI(); // 5
}

Closure
Environment	`let i` → `5`
Code	`function logI() { console.log(i); }`

Prefer `const`

With closures, let means the closed-over binding may change later.
Then to know what a function returns, you have to keep reading the surrounding code to see whether that binding mutates.
Prefer const unless you really need mutation.

What will happen when the button is clicked?


				<button id="button">Click me</button>


			let i;
			for (i = 1; i <= 3; i++) {
				button.addEventListener("click", evt => {
					console.log(i);
				});
			}

The console logs 1, 2, 3
The console logs 4, 4, 4

What will happen when the button is clicked?


				<button id="button">Click me</button>


			let i;
			for (i = 1; i <= 3; i++) {
				let j=i;											 
				button.addEventListener("click", evt => {
					console.log(j);
				});
			}

The console logs 1, 2, 3
The console logs 4, 4, 4

let variables are block scoped
in this case, to the block inside the for loop
each iteration gets a different variable

What will happen when the button is clicked?


				<button id="button">Click me</button>


			for (let i = 1; i <= 3; i++) {
				button.addEventListener("click", evt => {
					console.log(i);
				});
			}

The console logs 1, 2, 3
The console logs 4, 4, 4

let variables are block scoped
in this case, to the block inside the for loop
each iteration gets a different variable

What will happen when the button is clicked?


				<button id="button">Click me</button>


			for (var i = 1; i <= 3; i++) {
				button.addEventListener("click", evt => {
					console.log(i);
				});
			}

The console logs 1, 2, 3
The console logs 4, 4, 4

var variables are function scoped

Counter via Closure

function counter(start = 0) {
	let i = start;
	return () => ++i;
}

let a = counter();
console.log(a(), a()); // 1, 2

function counter(start = 0) {
	let i = start;
	return () => ++i;
}

let a = counter();
console.log(a(), a()); // 1, 2

Closure
Environment	`let i` → 012
Code	`() => ++i`

Sometimes a function you create at runtime has to remember something from its time of creation that will be gone by the time of execution
Javascript is lexically scoped
Code in a block has access to the local variables in that block
…and the block that contains it, and that one's container, etc.
Access persists even after execution leaves the block

What is happening here?

Invoking counter defines local variable i
The inner function has access to the i variable
…even when it’s called after counter returns

Classes

Often, need to create many objects of same type
All with same properties and methods
Different values for the properties
Classes simplify this (DRY)

Classes


				class Person {
					constructor (name, birthday) {
						this.name = name;
						this.born = new Date(birthday);
					}
					getAge () {
						const ms = 365 * 24 * 60 * 60 * 1000;
						return (new Date() - this.born) / ms;
					}
				}


				let david = new Person(
					"David Karger",
					"1967-05-01T01:00"
				);
				let lea = new Person(
					"Lea Verou",
					"1986-06-13T13:00"
				);
				console.log(lea.getAge(),
					david.getAge());

Define properties and methods in class declaration
Construct objects using new
All created objects inherit from class

Subclassing with Extends


				class PowerArray extends Array {
					constructor(...args) {
						super(...args);
					}

					isEmpty() {
						return this.length === 0;
					}
				}


				let arr = new PowerArray(1, 2, 5, 10, 50);
				console.log(arr.isEmpty()); // false


				let arr2 = PowerArray.from([1, 2, 3]);
				console.log(arr2.isEmpty()); // false

Often want to add properties and methods to an existing class
Create a new class that extends the old
Inherits superclass' methods and properties
Including constructor!
super is bound to the class you inherit from if you want to access its properties or methods.
Note that even static methods are inherited

Encapsulation: Private class features


				class Clicker {
				  #clicks = 0;

				  click () {
				    this.#clicks++
				  }
				  getClicks () {
				    return #clicks;
				  }
				}

Hash prefix specifies private properties
Must declare in advance in class definition
Cannot access outside the class—not even in subclass
Trying throws a TypeError (instead of returning undefined)
Can also define private methods, private static fields, etc.
Cannot make constructor private this way

Private properties and methods start with a pound sign (`#`). Unlike regular (public) properties that can be created at any time, private properties need to be declared in advance. JS only supports two types of property visibility: public and private. This means that subclasses cannot actually read private properties of their superclass.

Custom HTML Elements by extending HTMLElement


				<click-counter></click-counter>


				class ClickCounter extends HTMLElement {
					#clicks = 0;

					constructor() {
						super();
						this.#render();
						this.addEventListener('click', this.#clicked)
					}
					#render () {
						this.innerHTML = `Clicked ${this.#clicks}x`;
					}
					#clicked () {
						this.#clicks++;
						this.#render();
					}
				}

				customElements.define('click-counter', ClickCounter);

Here we have created a rudimentary custom element that shows how many times it has been clicked. We create custom elements by extending the `HTMLElement` class, and then calling `customElements.define()` to associate the class with a tag name. We have defined methods for updating the element's rendering and handling clicks, but these are private, so the actual API of the component to other developers appears like a regular HTML element.

Methods and `this`

JavaScript is very flexible

Based on the design of Self, this does not just work in classes.

We often create JavaScript objects directly, with no class definition at all.

Methods can be added directly to object literals


			let greet = function() {
				console.log(`Hi, I’m ${this.name}`);
			};
			let instructors = [
				{name: "Lea", greet: greet},
				{name: "David", greet: greet}
			];

			for (let instructor of instructors) {
				instructor.greet();
			}

We can add a function as a property, and that function can call this.

But where did `this` come from?


			let greet = function() {
				console.log(`Hi, I’m ${this.name}`);
			};
			let instructors = [
				{name: "Lea", greet: greet},
				{name: "David", greet: greet}
			];

			for (let instructor of instructors) {
				instructor.greet();
			}

This feels a bit strange: this was not declared anywhere. 🤔

JS implicitly passes `this` to functions when they are called


			let greet = function(this) {
				console.log(`Hi, I’m ${this.name}`);
			};
			let instructors = [
				{name: "Lea", greet: greet},
				{name: "David", greet: greet}
			];

			for (let instructor of instructors) {
				instructor.greet(instructor);
			}

The runtime implicitly gives every function a this variable and sets it from the context where the function is called, usually the object before the dot.

`this` is a special variable declared in every scope.

But what is its value?

Global context What is logged?


			<script type="module">
				console.log(this);
			</script>

undefined
Window
ReferenceError: this is not defined

In modules, `this` on the top level is defined, but set to `undefined`. If you forget `type="module"` on your `<script>` element, you will get different behavior, since the global object will then be the `window` object.

Top-level functions What is logged?


			<script type="module">
				let logContext = function() {
					console.log(this);
				}

				logContext();
			</script>

undefined
Window
ReferenceError: this is not defined

Nothing surprising here, the context of top level functions is the same as the top-level context.

The global object

Native global functions or variables are also properties of the globalThis object
In most in-browser contexts, globalThis === window


			<script type="module">
				console.log(globalThis); // Window
				console.log(globalThis.HTMLElement === HTMLElement); // true
				console.log(globalThis.globalThis); // Window
				console.log(this); // undefined
			</script>

Creating our own globals


			<script type="module">
				globalThis.logContext = function() {
					console.log(this);
				}
			</script>
			<script type="module">
				logContext(); // undefined
			</script>

Context is a dynamic binding


				<script type="module">
					globalThis.logContext = function() {
						console.log(this);
					}
				</script>
				<script type="module">
					logContext(); // undefined
					globalThis.logContext(); // Window
				</script>

We could call the same function on different objects, and get different values for `this`. Just like regular arguments get dynamic bindings!

Context in event listeners


				button.addEventListener("click", function(event) {
					console.log(this);
				});

An HTMLButtonElement
undefined
Window

`this` is bound to `event.currentTarget`

`this` and nested functions


				<button class="btn">Old</button>


				document.querySelector(".btn").addEventListener("click", function () {
					setTimeout(function () {
						this.textContent = "New";
					}, 100);
				});

The button text changes to "New" after 100ms
Nothing happens

The inner `function ()` gets its own `this`, so it no longer refers to the button. In a module this ends up as `undefined`, so the update does not happen.

Arrow functions aren't passed `this`


						let person = {
							name: "David",
							hello: () => console.log(this)
						};
						person.hello(); // undefined

Since `this` is basically just a special variable, resolving `this` in an arrow function works the same way as resolving any other variable: via ordinary lexical scoping rules.

Arrow functions capture the enclosing `this`


				<button class="btn">Old</button>


				document.querySelector(".btn").addEventListener("click", function () {
					setTimeout(() => {
						this.textContent = "New";
					}, 100);
				});

The button text changes to "New" after 100ms
Nothing happens

This works because the arrow function reuses the `this` from the enclosing event-listener function, where `this` is the button.

Passing `this` yourself

func.call(context, ...args)
func.apply(context, args)


					function logContext() {
						console.log(this);
					}

					logContext(); // logs undefined
					logContext.call(document); // logs document

> let fakeArray = {0: "a", 1: "b", length: 2}

> fakeArray.push("c")

Uncaught TypeError: fakeArray.push is not a function

> [].push

< ƒ push() { [native code] }

> [].push.call(fakeArray, "c")

< 3

> fakeArray

< {0: 'a', 1: 'b', 2: 'c', length: 3}

- Note that since functions are first-class objects, they can have methods too, just like every other object! - So why would we want to do that? Let's look at a more realistic example…

Binding `this` permanently: `func.bind(context, ...args)`

Returns a new function whose context is always bound to the first argument


				function logContext() {
					console.log(this);
				}
				let logContext2 = logContext.bind({foo: 1});

				logContext2(); // logs {foo: 1}
				logContext2.call(document); // logs {foo: 1}

> let $$ = document.querySelectorAll

> $$("div")

Uncaught TypeError: Illegal invocation

> $$ = document.querySelectorAll.bind(document)

> $$("div")

< NodeList(43) [div, div, div, …]

Why would you want to do that? When you want to pass a function around (e.g. use it as a listener, or as an argument to other functions) and you want to be sure its context will reliably be the one you expect or simply to be able to use it without `.call()` or `.apply()` and still have its context be useful, What type of function is `.bind()`?

`this` Takeaways

this is flexible, always declared, and resolved dynamically, but that flexibility can be a footgun
this works best in classes and simple objects
If you are confused about what this is bound to in some context, it may be best to remove it

Accessors

So far we’ve seen…

Properties which hold data
```
arr[0] = "hi";
```
Methods which execute code
```
arr.slice(0, 1)
```
What about things like arr.length?

JS and its various APIs have a number of things that look like properties, but actually execute code when they are read or set. We have also seen plenty of examples in the DOM, e.g. `element.textContent`, `element.innerHTML` etc.

Accessors:
Properties on the outside,
functions on the inside

Accessors in the DOM


				console.log(document.body.innerHTML);
				// 👆🏼 serializes <body>’s contents as an HTML string

				document.body.innerHTML = "<em>Hi</em>";
				// 👆🏼 parses the string provided
				//    and replaces <body>’s subtree with it

Defining getters


					let lea = {
						name: "Lea",
						birthday: new Date("1986-06-13T13:00"),
						get age () {
							const ms = 365 * 24 * 60 * 60 * 1000;
							return (new Date() - this.birthday) / ms;
						}
					}

					console.log(lea.age); // 39.82507970709665

What happens if we try to set a getter?


					let lea = {
						birthday: new Date("1986-06-13T13:00"),
						get age () {
							const ms = 365 * 24 * 60 * 60 * 1000;
							return (new Date() - this.birthday) / ms;
						}
					}
					lea.age = 30;
					console.log(lea.age);

39.82507970709665
30
TypeError: Cannot set property age of #<Object> which has only a getter

By default, accessors we define with this syntax

What do you expect the console to log?


					let lea = {
						birthday: new Date("1986-06-13T13:00"),
						get age () {
							const ms = 365 * 24 * 60 * 60 * 1000;
							return (new Date() - this.birthday) / ms;
						}
					}
					lea.birthday = new Date("1992-04-01T13:00");
					console.log(lea.age);

39.82507970709665
34.01948786888001

Defining setters


					let lea = {
						birthday: new Date("1986-06-13T13:00"),
						set age (a) {
							const ms = 365 * 24 * 60 * 60 * 1000;
							this.birthday = new Date((Date.now() - ms * a));
						},
					}
					lea.birthday = new Date("1990-04-01T13:00");
					lea.age = 3;
					console.log(lea.birthday); // ... 2023 ...

API Design Tip When to use accessors?

When a property would make sense, but computation is needed
When a property depends on another property (DRY)
When relative manipulation is commonly needed:
Compare obj.foo++; vs obj.setFoo(obj.getFoo() + 1);
Beware of perceived performance

Developers tend to think of things that look like properties as "free" when eyeballing the performance of their code, while they take functions into account as something that could be more intensive.

Modularity with Modules

Modularity

Why

Major idea from computer science
Break complicated system into many small components
Each gathers what is needed for a particular functionality
Minimize interaction between components
Lets you focus working memory on relevant component
Ignore details of rest of system — abstraction

How

Create contexts with distinct namespaces
Use same word/name in distinct contexts without confusion
Directories in filesystems
Scoped local variables
Objects
Now, modules

JS Modules

Blob of code (in one file) with its own namespace
Names defined there only visible there
export to allow visibility elsewhere
import to incorporate names from elsewhere

syntax

<script type="module">
export const obj = 'square';
export {obj, draw ...}
import { obj, draw} from './modules/square.js';
import { obj as square} from './modules/square.js';

effect

import file as module
make obj visible for import
export names defined elsewhere in file
bring these names into my namespace
import obj, but call it square in my namespace

Notes

Any name can be exported---from let, function, const
Renaming using as lets you avoid name conflicts between modules
Each module is only executed once, even if imported many times

Javascript was a language that had…

Function Definition Syntax

Function Declaration

Function Expression

Arrow functions

Invocation is always the same

Invocation vs reference When is "Thank you 😊" logged?

Missing arguments

Variadic functions

Default values

API Design Tip Avoid optional positional arguments

API Design Tip Prefer dictionary arguments

Programming with Functions

Second-class functions

First-class functions

Functions can be function arguments

Functions can be variable values

One function, multiple references What happens?

Functions can be object properties

Methods = Functions + Object properties

Functions can even be function return values

Why first-class functions?

Higher Order Functions

Higher Order Functions Example: Currying

Curry?

Map, Reduce, Filter

Map: Transform Each Item

Without map

With map

Filter: Select some Items

Without filter

With filter

Reduce: Combine all items

Without reduce

With reduce

These can be chained

Software Engineering

More iterative functions

What does this print?

What does this print?

What does this print?

Lexical Scope

Functions Evaluate to Closures

Closure Over a Mutable Binding

Closure Keeps the Outer Variable

Prefer const

What will happen when the button is clicked?

What will happen when the button is clicked?

What will happen when the button is clicked?

What will happen when the button is clicked?

Counter via Closure

Classes

Classes

Subclassing with Extends

Encapsulation: Private class features

Custom HTML Elements by extending HTMLElement

JavaScript is very flexible

Methods can be added directly to object literals

But where did this come from?

JS implicitly passes this to functions when they are called

this is a special variable declared in every scope.

Global context What is logged?

Top-level functions What is logged?

The global object

Creating our own globals

Context is a dynamic binding

Context in event listeners

this and nested functions

Arrow functions aren't passed this

Arrow functions capture the enclosing this

Passing this yourself

Binding this permanently: func.bind(context, ...args)

this Takeaways

So far we’ve seen…

Accessors: Properties on the outside, functions on the inside

Accessors in the DOM

Defining getters

What happens if we try to set a getter?

What do you expect the console to log?

Defining setters

Prefer `const`

But where did `this` come from?

JS implicitly passes `this` to functions when they are called

`this` is a special variable declared in every scope.

`this` and nested functions

Arrow functions aren't passed `this`

Arrow functions capture the enclosing `this`

Passing `this` yourself

Binding `this` permanently: `func.bind(context, ...args)`

`this` Takeaways

Accessors:
Properties on the outside,
functions on the inside