Functions in JavaScript

00:00 In the previous lesson, I covered how JavaScript’s type system is different from Python’s. In this lesson, I’m going to talk about functions in JavaScript.

00:09 Just like in Python, functions are first-class objects in JavaScript. This means you can pass references to them and use them as arguments to other objects and functions. Unlike Python, JavaScript functions can also be anonymous.

00:24 This is a more powerful version of Python’s lambda. This feature is extremely common in the wild. A lot of what you need to do in the web requires asynchronous activity and callbacks upon completion. For example, if your web page makes a call in the background to get more data, you can’t block the browser waiting for a result. You give the calling mechanism a function that it should call when the result is obtained.

00:48 You could declare a function and pass in its name as the callback but the more common practice is to define an anonymous function right where the callback is expected.

00:57 Let me show you some examples of functions in JavaScript. The top area here shows a function that I’ve defined in a file called hello.js. This is a pretty simple function that takes a single argument. With the exception of some syntax differences, this is pretty close to Python. Instead of def you use function and instead of whitespace indentation you use curly brackets, but the idea is the same. In the lower area, I’m inside of a Node REPL session.

01:25 Node has some commands that you can use to interact with your REPL environment that aren’t part of JavaScript. If you’ve ever used an alternate Python REPL that has magic words, this is the same thing. All the Node commands start with a period (.).

01:39 I’m going to use .load to load in the hello.js file.

01:46 First off, note that I’ve run Node in the same directory as hello.js. This is so that I didn’t have to fully qualify the filename. When a file is loaded, the REPL shows the contents on the screen and if anything was run. In this case, it’s just the declaration of the function in the file. As the file itself doesn’t return anything, you also get the ubiquitous undefined as a report of the result of the .load.

02:14 Now that the function is in the REPL, I could run it.

02:20 No surprises here. Bob is greeted. The say_hello() function doesn’t return anything, so one more undefined for the road. JavaScript is less picky than Python about function arguments.

02:32 I can call this function with as many or as few arguments as I like.

02:38 Since I didn’t use any calling arguments, the name argument in the function is undefined. This is what got printed as part of the console.log() message.

02:48 Once more, JavaScript is automatically typecasting, changing the undefined primitive type into a string so that it can be printed out with the console.

02:58 JavaScript has several built-in functions. A commonly used one is setTimeout().

03:07 Let me just scroll that back. The setTimeout() function takes a callback and a time. When the time has expired, it calls the callback function—in this case, say_hello().

03:20 The time is expressed in milliseconds, so this is getting called back 3 seconds later. The setTimeout() method returns a Timeout object.

03:30 That’s all the stuff that you see on the screen after the call. I’m going to scroll back down now. Through the magic of video editing, let’s say now is when that 3 seconds has passed. And there you have it, the call to say_hello(), but delayed.

03:45 You can also pass additional arguments to setTimeout() that it will pass to the callback function. So if I wanted, I could have greeted Bob specifically in this case as well.

03:58 In the top area, I’ve replaced say_hello() with a new function called future_message(). This function uses setTimeout() inside of it on line 4. Notice here that instead of using a named callback, this time I’m using an anonymous function.

04:13 The syntax is similar to a named function, but without the name, and otherwise, is inline with the code. The anonymous function, in this case, does nothing but print a message.

04:24 The other thing to notice here is the variable scoping. JavaScript supports nested scoping when functions are inside of each other like this. This means that the anonymous function inside of setTimeout() has access to the message parameter in the parent function.

04:41 Now in the bottom area, let me load in this file.

04:46 Now I’m going to call future_message().

04:54 Through the magic of video editing, let’s say now is when that 3 seconds has passed. And 3 seconds later, you have a sudden mental image of Arnold. Anonymous functions are so common that JavaScript even has a shortcut for declaring them. This is called the arrow, or sometimes the thick arrow, operator (=>). In the top area, I’m going to replace later.js with arrow.js.

05:21 This time around, instead of using setTimeout(), I’m using setInterval(). It is similar to setTimeout(), but it keeps repeating until you clear it.

05:30 On line 5, the () => is a shortcut for creating an anonymous function. There are some subtle differences between the two types of declarations, but I’ll dig into those in a future lesson.

05:42 setInterval() returns a setInterval object that can be passed to clearInterval() to stop the repetition. The repeating_message() function calls setInterval() with an anonymous function.

05:54 setInterval() uses the anonymous function as a callback every 500 milliseconds and tracks whether it has been called more than 3 times.

06:03 Note that the count variable in the parent function is in scope of the anonymous function. After 4 instances, the inner anonymous function clears the interval on line 9, and then you’re done. Let’s see this in action. First, I’ll load the file,

06:22 and then run the function,

06:29 and there you go. All that you’re missing is some vikings.

06:34 From functions, I’m going to move to objects and classes. Next up, let’s get all object oriented.