💡 HOMEWORK for next time: https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript2/week3/homework.md

💪 Prep for next session: https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript3/week1/preparation.md

Recap from Week 2

• Events
  • What are events used for in the browser?
  • What can we do listening to the click event on an element in JS?
• Array methods
  • What are array methods used for?
  • What is the difference between map and forEach methods?
• Arrow functions
  • How are arrow functions different from “classic” functions?
• Preparation or homework questions? (10 minutes)
• In general: Ask questions! There are NO stupid questions.

What We Can Do with Functions (spoiler: a lot)

— Key concepts

• We can – give them a name

  • function myFunction () { … }

• We can – leave them anonymous

  • Anonymous functions are functions without any name associated with them
  • An anonymous function is not accessible after its initial creation. Thus we might want to store it as a variable

• We can – assign them to a variable

  • const myFunction = function () { … }
  • Makes it easy to pass the function around doSomethingWith(myFunction)
  • even if it’s an arrow function const myFunction = () => { … }, which would by default be anonymous

• Why do we have some many options? → Sometimes having more options is convenient

• Resources & exercises

Callbacks

— Key concepts

• Callback is just a function passed into another function as an argument

  • const handleTheClick = () => { … } can be used as ….addEventListener("click", handleTheClick)

• We don’t have to wait until we run further code

  • Instead, we delegate the execution of the code dependent on what we’re waiting for to the callback

• That’s sometimes called “Asynchronous JS”

  • Example: const processTheHugeFile = (aFile) => { … } … getTheHugeFile_TakesVeryLong(processTheHugeFile) ⇒ we don’t want to wait before showing the message showMessageToUser("getting the huge file now") … function getTheHugeFile_TakesVeryLong(callback) { … // Done callback(theFile) // this calls processTheHugeFile }

• The setTimeout function can call your callback after a specific amount of milliseconds

• Resources & exercises

Recap JS 2

— What you should take away

• Key takeaways:

  • DOM and DOM manipulation using JS:
    • Understand what DOM is
    • Add and get HTML elements using JS
    • Modify HTML elements using JS (style, add text, etc.)
  • Events and event listeners:
    • Assign events to HTML elements
  • Array manipulation:
    • Be able to use array methods such as map, forEach, filter, sort
  • Different ways to define functions in JS
  • Callbacks and Async JS

• Time to catch up on homework + questions

• Resources & exercises