6.S082 Lecture 14 Programming with Functions

Javascript was a language that had…

…the functionality of Scheme

(This Lecture)

…the object orientation of Self

…and the syntax of Java

(Last lecture)

Events


						<button>Click me</button>


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

Events allow you to run code when something happens.
In JS, you attach event listeners with element.addEventListener, where element is a reference to your element in the DOM tree.
Its mandatory arguments are the name of the event as a string, and a function to be executed.
Yes, in JS functions are objects and can be passed around in arguments! 🤯
When the function is called, it will receive the Event Object as an argument, which contains information about what happened.
this in that function will refer to the element that you attached the event to.
You can find a list of available events on MDN

Functions as arguments?


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

Functions are objects too, and can be passed as arguments.
Naming them is optional. Functions with no name are anonymous functions

Programming with Functions

Novice

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

Deep

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
Many powerful applications

Applications

Callbacks
Information hiding
- Closures
- Modularity
Event handling
Asynchronous execution
Higher order functions

Function Definition Syntax

Function Declaration


						function increment (x) {
							return x+1;
						}

Function Expression


						let increment = function (x) {
							return x+1;
						};

Arrow Expression


						let increment = (x) =>  x+1;

Invocation


						increment(3); //returns 4

What happens?


					function increment(x) {
					    return x + 1;
					}
					increment = 7;
					console.log(increment(4));

Error: increment is a function
Error: increment is not a function
The console logs 5
The console logs 8

A function name is just a variable that holds a function

Functions and names

A function is defined by what it does
- “A rose by any other name...”
Its name is just a regular variable
- not intrinsic to function
- can store any function in any variable

Anonymous Functions

If you only plan to use a function in one place, you don't need to give it a name
Instead define anonymous functions with no name

and use them anywhere you'd use a function name


						(x => x + 1)(5);        // evaluates to 6


						(function (x,y) {
							let z=x+y;
							return z}) (5,4);   // evaluates to 9

Why would you do this? Functions are to avoid repeating code!
- callbacks
- closures

Callback Functions

Function declaration


					function handler(event) {
						event.target.textContent = "Thank you 😊";
					}

					button.addEventListener("click", handler);

addEventListener's second argument is a callback function

browser calls it when the event happens

Callback Functions

Function expressions


					let handler = function(event) {
						event.target.textContent = "Thank you 😊";
					}

					button.addEventListener("click", handler);

addEventListener's second argument is a callback function

browser calls it when the event happens

Callback Functions

Arrow functions


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

If you'll only be using the function here, no need to name it

When is "Thank you 😊" logged?


					<button>Click me</button>


					let handler = event => console.log("Thank you 😊");
					let button = document.querySelector("button");
					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.

Argument Lists


						function f(a,b,c);
						f(3);  // a <- 3, b <- undefined, c <- undefined

Useful; can place optional arguments at end


						function f(a);
						f(3,4,5);  // a <- 3; other args ignored

Methods

Method


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

A function bound to an object
Like any variable, any object property can hold a function
Lets the object carry behavior as well as data
Often want method to act on its own (calling) object
- special this keyword refers to that object

Example


					let person = {
						name: "David",
						hello: function () {
							console.log("Hi, I'm " + this.name);
						}
					};

					person.hello(); // Logs "Hi, I'm David"

this is bound to the object person

Note log is a method of the console object

What happens?


						let person = {
							name: "David",
							hello: function () {
								console.log("Hi, I'm " + this.name);
							}
						};


						person.hello = function() {
							console.log(this.name + " is away");
						};

						person.hello();

Error: cannot overwrite method hello()
console logs "Hi, I'm David"
console logs "David is away"

Methods are just regular properties of their object, bound to functions

Manipulate them like any other properties

What happens?


						function hello () {
							console.log("Hi, I'm " + this.name)
						}
						let david = { name: "David", hello: hello };
						let lea = { name: "Lea", hello: hello };

						david.hello();
						lea.hello();

Error: “this” is not defined
"Hi, I'm David" "Hi, I'm Lea"

this is bound when the object invokes the method

`this` is a special function parameter that is always present. It is (usually) bound to the calling object

The global object

Any global function or variable is a property of the window object
- This also means that window.window === window
Window is also the context of code run outside any function


					console.log(window.window.window.window); // logs Window
					console.log(this); // logs Window

Context in arrow functions


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

{name: "David", hello: f}
Window

Context in arrow functions


						let person = {
							name: "David",
							hello: function() {
								let ret = {logContext: () => console.log(this)};
									return ret.logContext();
								}
							};
						person.hello();

{logContext: f}
{name: "David", hello: f}
Window

Function statements and expressions get a dynamic binding of `this` to the calling context

Arrow functions don't have their own context, so they inherit the `this` of the lexical scope they're defined in

Context in event listeners


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

An HTMLButtonElement
Window

Accessors

So far, we've seen:
- properties (which hold data)
- methods (which execute code)
Accessors are a hybrid:
- look like properties when used
- but execute methods behind the scenes
- enhance code clarity
The DOM utilizes accessors heavily.
- E.g. element.textContent

Getter for age


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

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

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.age = 30;
					console.log(lea.age);

33.824274192636985
30
Error: Cannot write getter 'age'

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("1990-04-01T13:00");
					console.log(lea.age);

33.824274192636985
30.021603749143836

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); // 2017

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

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


						class Person {
							constructor(name, birthday) {
								this.name = name;
								this.birthday=new Date(birthday);
							},
							get age() {
						    	...
							},
						}

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

Subclassing with Extends

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.

                    
						class PowerArray extends Array {
							isEmpty() {
								return this.length === 0;
							}
							length () {
								return super.length + 1;
							}
						}

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

Higher Order Functions

Take Functions as Arguments


					let compose = function(f,g,x) {
						return f(g(x));
					}
					let increment = (x) => x+1;
					compose(increment, increment, 3);


					let numbers = [4, 2, 5, 1, 3];
					numbers.sort((a, b) => a - b);

Return Functions as Values


					function deriv(f,eps) {
					return (x) => (f(x+eps)-f(x))/eps;
					}
					let f = deriv((x)=>x**3);


					function compose(f,g) {
					return (x) => f(g(x))
					}
					let f=compose(increment, increment);
					f(3);

Map, Reduce, Filter

Common patterns for iterating over a collection of items.

forEach: do something for each collection element
map: transform every collection element
filter: choose some of the collection elements
reduce: combine all the collection elements

In JS these are all methods on any Array object.

Each takes a callback: a function that will be applied to each item.

forEach: Do something with each Item

Without forEach


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

						for (let n of numbers) {
						console.log(n);
						}

With forEach


						let numbers = [1, 2, 3, 4];
						numbers.forEach(n => console.log(n))

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

Closures

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 do you expect the console to log?


						function makeCounter(init) {
							let count = init;

							return function(delta) {
								count = count + delta;
								return count;
							};
						}


						let myCounter = makeCounter(4);
						console.log(myCounter(1));
						console.log(myCounter(1));

4, 4
4, 5
5, 5
5, 6

Closure Example


					function makeCounter(init) {
						let count = init;

						return function(delta) {
							count = count + delta;
							return count;
						};
					}

					let myCounter = makeCounter(1);

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

What will happen when the button is clicked?


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


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

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

What will happen when the button is clicked?


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


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

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

What will happen when the button is clicked?


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


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

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

📝 Context Quiz! 📝

Code	`this` in `myFunc` is…
`foo.myFunc()`
`element.addEventListener("click", foo.myFunc)`
`setTimeout(foo.myFunc, 100)`
`foo.myFunc.call(bar)`
`let myFunc = foo.myFunc; myFunc();`
`let myFunc = foo.myFunc.bind(bar); myFunc();`
`element.addEventListener("click", foo.myFunc.bind(bar));`
`element.addEventListener("click", function() { foo.myFunc(); });`
`foo.myFunc.bind(bar).call(yolo)`

Javascript was a language that had…

Events

Functions as arguments?

Programming with Functions

Novice

Deep

Applications

Function Definition Syntax

Function Declaration

Function Expression

Arrow Expression

Invocation

What happens?

Functions and names

Anonymous Functions

When is "Thank you 😊" logged?

Argument Lists

Method

Example

What happens?

What happens?

this is a special function parameter that is always present. It is (usually) bound to the calling object

The global object

Context in arrow functions

Context in arrow functions

Function statements and expressions get a dynamic binding of this to the calling context

Arrow functions don't have their own context, so they inherit the this of the lexical scope they're defined in

Context in event listeners

Accessors

Getter for age

What do you expect the console to log?

What do you expect the console to log?

Setters

Classes

Classes

Subclassing with Extends

Higher Order Functions

Take Functions as Arguments

Return Functions as Values

Map, Reduce, Filter

forEach: Do something with each Item

Without forEach

With forEach

Map: Transform Each Item

Without map

With map

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

Filter: Select some Items

Without filter

With filter

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

Reduce: Combine all items

Without reduce

With reduce

Closures

What do you expect the console to log?

Closure Example

What will happen when the button is clicked?

What will happen when the button is clicked?

What will happen when the button is clicked?

📝 Context Quiz! 📝

`this` is a special function parameter that is always present. It is (usually) bound to the calling object

Function statements and expressions get a dynamic binding of `this` to the calling context

Arrow functions don't have their own context, so they inherit the `this` of the lexical scope they're defined in