Scribd
Upload
5 views18 pages

lecture09

This lecture covers anonymous functions, callbacks, and the 'this' keyword in JavaScript, emphasizing the use of arrow functions for more concise code. It also discusses debugging strategies, including checking if the JS file loaded, using console.log, reading error messages, and utilizing the JS debugger in Chrome Dev Tools. Key points include the differences in how 'this' is bound in regular functions versus arrow functions and the importance of using named functions for clarity in complex code.

Uploaded by

Furkan Tunç
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views18 pages

lecture09

This lecture covers anonymous functions, callbacks, and the 'this' keyword in JavaScript, emphasizing the use of arrow functions for more concise code. It also discusses debugging strategies, including checking if the JS file loaded, using console.log, reading error messages, and utilizing the JS debugger in Chrome Dev Tools. Key points include the differences in how 'this' is bound in regular functions versus arrow functions and the importance of using named functions for clarity in complex code.

Uploaded by

Furkan Tunç
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

Anonymous Functions, this,

and Debugging

Lecture 9
Today’s Agenda

● Anonymous functions, callbacks, and this


● Debugging JS
Anonymous Functions, Callbacks, and
this
Arrow Functions: More Concise Anonymous
Functions
/* named function with one parameter that logs to the console. */
function sayHello(name) {
console.log("Hello " + name);
}

let sayHello = function(name) {


console.log("Hello " + name);
}

let sayHello = (name) => {


console.log("Hello " + name);
}

/* Equivalent function with no parens because there is only 1 parameter */


let sayHello = name => { console.log("Hello " + name); }

let sayHello = () => { console.log("Hello!"); };

An overview of when these are particularly useful in today’s reading. We’ll start to see more in JS
but you are not required to use them.
The Keyword this

All JavaScript code actually runs inside of "an object" that we can access with the keyword this
By default, code runs in the global window object (so this === window)
Event handlers attached in an event listener are bound to the element
Inside the handler, that element becomes this

function init() {
// this === window
id("btn1").addEventListener("click", namedFunction);

id("btn2").addEventListener("click", function() {
console.log("this === " + this); // this === #btn2
});
}

function namedFunction() {
console.log("this === " + this); // this === #btn1
}
Example
Anonymous Button: https://replit.com/@semihyumusak/AnonymousButton-21sp
Arrow Functions: More Concise Anonymous
Functions
function addSkittle() { ● Both 1. and 2. work equivalently -
// ... added to existing addSkittle code
2. uses an anonymous function!
// 1. with defined eatSkittle() function
skittle.addEventListener("dblclick", eatSkittle); ● Do not overuse these! Breaking
down our code into named
// same as 2., with anonymous function functions can be useful to reduce
skittle.addEventListener("dblclick", function() { redundancy and keep code
this.parentNode.removeChild(this);
});
understandable.
} ● If you have more than 3 lines of
code, it often should be a named
// Removes a skittle from the Jar when dblclicked function.
function eatSkittle() {
this.parentNode.removeChild(this); // or this.remove();
}
More JavaScript: What happens to this?

let defaultReply = "Hello World";


button.addEventListener("click", function() {
draftReply(defaultReply);
});

vs.

let defaultReply = "Hello World";


button.addEventListener("click", () => {
draftReply(defaultReply);
});

function draftReply(startingText) {
this.parentNode.appendNode( /*....*/ );
// ...
}
Parameter passing to Event Handlers
let defaultReply = "Hello World";
button.addEventListener("click", function() {
draftReply(defaultReply);
});

How else could we do this?

let defaultReply = "Hello World";


button.addEventListener("click", () => {
draftReply(defaultReply);
});
A Caveat: Arrow Functions do Not Bind this

We've seen how "this" refers to the bound element in an event handler. However, arrow
functions do not bind "this" the same way.

skittle.addEventListener("dblclick", function() {
// All good! this === div.skittle that was clicked
this.parentNode.removeChild(this);
id("result").textContent = ":O You ate a skittle...";
});

skittle.addEventListener("dblclick", () => {
// error! this === window
this.parentNode.removeChild(this);
id("result").textContent = ":O You ate a skittle...";
});
Comparing this with different callback functions

function init() {
id("btn1").addEventListener("click", namedFunction);

id("btn2").addEventListener("click", function() {
console.log("this === " + this); // this === #btn2
});

id("btn3").addEventListener("click", () => {
console.log("this === " + this); // this === window
});
}

function namedFunction() {
console.log("this === " + this); // this === #btn1
}
Debugging JS
Strategies
● Check if your JS file loaded
● console.log
● Read the error messages in the console
● Use the JS debugger in Chrome Dev Tools
Did Your JS File Load
● Example
● Use the "Network" tab in Chrome Dev Tools
● Did you spell your JS filename correctly?
● Are you listening for the "load" event
console.log Everything
After adding an event listener

myBtn.addEventListener("click", launchRocket);

function launchRocket() {
console.log('Launching!!!');
}

After accessing an element

let myBtn = qs('button');


console.log(myBtn);

After a complex calculation

const COLORS = ['red', 'blue', 'green'];


let randIndex = Math.floor(Math.random() * COLORS.length);
console.log(randIndex);
Read the Messages in the Console
Errors in your code are printed to the Chrome Dev Tools console

● Error message
● File the error originated from
● Line number

The console error messages even link you to the line in your code where the error
occurred!
Use the JS Debugger
Under the "Sources" tab in Chrome Dev Tools

● Set breakpoints to pause execution of your code at a desired point


● View variable values at that point
● Step in and out of functions
● ...and much, much more

Example
Skittles (Time Permitting)
More progress on Skittles

You might also like