Why Callback Functions?

[MUSIC] 0:00 Hello and welcome to this course on callback functions in JavaScript. 0:04 My name is Andrew, a JavaScript developer life longer learner and 0:08 teacher here at Tree House. 0:11 Along your JavaScript journey, 0:13 you'll have probably come across some callbacks already. 0:15 Callback functions are a foundational concept in JavaScript. 0:19 In this course, you'll learn about callback functions and 0:22 you'll get to practice writing your own. 0:25 Callbacks are a challenging topic to understand and master. 0:28 Repetition, time, patience, and practice will get you there. 0:31 Check the teacher's notes for some successful learning strategies. 0:35 In this course, 0:39 we'll be building a couple of projects along the way all with callback functions. 0:40 The first project will be a simple surprise application. 0:45 After random interval of time a callback is triggered and 0:48 the surprise message will appear on the screen. 0:51 Then we'll make clock. 0:54 Thanks to a callback function, the display of the clock will update every second. 0:57 Finally, we'll use the Document Object Model and callbacks to alter the style 1:02 of an input and text area when a user interacts with the form. 1:07 If you're new to the Document Object Model, 1:12 or DOM, Be sure to take the prerequisites for this course. 1:14 Callbacks are just functions, but instead of being called by you explicitly, 1:19 they are called by the computer at a given time in the future. 1:23 Think of a fire alarm at a school or a workplace. 1:27 Pupils and staff are given instructions on what to do when the fire alarm goes off. 1:30 Mr. Pierce's class is designated to go out of the side entrance and 1:35 meet at the basketball hoop. 1:40 These instructions need to be followed, 1:42 no matter the cause of the fire alarm going off. 1:44 If the fire alarm is triggered by stuff in the school's office for 1:48 a drill, if someone uses the alarm pull station, or, if there's a real fire, 1:51 Mr. Pierce's class will follow the instructions previously given. 1:56 They'll exit the side entrance and meet at the basketball hoop. 2:00 It would be inefficient of me to tell the class the instructions whenever the alarm 2:05 sounds. 2:09 It's stopping me from doing anything. 2:10 It's better for me to tell them the plan before hand and 2:12 have the students and staff carry out this instructions when necessary. 2:16 No matter the method of activation, the fire alarm was triggered some 2:20 time in the future and the instructions were followed by the pupils and staff. 2:25 This is analogous to callbacks. 2:29 Just like a function, students and staff have a set of instructions to execute. 2:31 Instead of following the instructions when you tell them to 2:37 they follow the instructions when they were supposed to. 2:40 Remember, a function is a set of instructions that can be run 2:43 over and over again. 2:47 When you call or invoke a function you're asking for 2:48 those lines of code to be executed immediately. 2:51 This is also known as synchronist programming. 2:54 When you use the function as a callback, it gets executed or 2:58 invoked when it's supposed to in the future. 3:01 This is known as asynchronous programming. 3:05 Using asynchronous programming allows a computer to perform other tasks 3:08 while waiting for an event to occur. 3:12 Let's take a look at some scenarios where callbacks are used. 3:15 Call backs are used for one off and repeat timers. 3:19 For example, 3:22 in our clock application, we'll want the clock to update every second. 3:23 [SOUND]. 3:28 Call backs are used in user interaction. 3:29 When a user clicks a button, types into an input field, or 3:32 submits a form developers have an opportunity to have a callback triggered. 3:35 You should already be familiar with this. 3:40 If not, why not check out the prerequisites for this course. 3:43 Another place where you'll be waiting for 3:47 something to occur is loading data from a server. 3:49 AJAX is a popular technique used to load dynamic information into a web page 3:52 without reloading the page. 3:57 When you make a request to web server, the JSON data is returned into a callback. 3:59 I've linked to the treehouse content on AJAX in the teacher's notes. 4:05 Another example of using a callback in JavaScript is reading a file in Node.js. 4:09 When the file has been completely read the contents of 4:14 the file are passed into a callback. 4:17 This isn't a comprehensive list of all the callbacks 4:19 you'll come across when writing JavaScript programs. 4:22 In fact, call backs are so common, you'll be spotting them everywhere. 4:25 The prevalence of callback functions and asynchronous programming and 4:30 the speed they can bring means JavaScript is known for 4:34 its performance when building user interfaces and web applications. 4:37 Callbacks are everywhere in JavaScript, but what do they look like? 4:42