A callback is a function passed as an argument to a method call.
This might seem super weird right now but you'll get used to it. Callbacks are everywhere in javascript so it's the kind of thing that you just have to accept.
You've already been using callbacks in your array methods challenge yesterday.
const arr = [1,2,3,4]
arr.forEach((num) => {
console.log(num)
})Let's explain line by line what's happening here.
We define an array. On that array we can call the array method .forEach. The .forEach method takes a callback as an argument. The .forEach method is a method written for us by the people who implemented javascript. What's actually happening under the hood of .forEach would be some kind of while loop that keeps invoking the callback every time the next while loop passes through (until the end of the length of the array).
Think back to that lesson I gave you on yield in ruby. This is a very similar concept!
Again I'll reiterate that callbacks are every where in javascript. You can kind of ignore yield in ruby as it's not a requirement to solve most fundamental problems. This is not the case with callbacks; they're a requirement to solve fundamental javascript problems.
Here's an example of a callback in action.
const myFunc = (callbackFunc, num) => {
const exp = 2
return callbackFunc(exp, num)
}
const result = myFunc((exp, num) => {
return num ** exp
}, 5)
console.log(result)The first thing that runs in this example is the invoking of myFunc; the first argument is a function and the second argument is a number. So myFunc runs and we go into the function body. We set the variable exp to be equal to 2. We then return and invoke the callbackFunc with the arguments of the exp we defined previously and the num we passed as an argument previously (5). So we're now inside of the callback function; where we return the num (5) to the power of the exp (2). This equals 25 and we store this value in the variable result. We then console.log result.
The javascript methods setTimeout and setInterval are special methods that both take two arguments; the first being a callback function and the second being an amount of time (specified in milliseconds).
Let's start with setTimout; it's a method that waits for the amount of time you specify as the second argument before invoking the callback function.
An example:
// this method will wait 3 seconds before console logging hello
setTimeout(() => {
console.log('hello')
}, 3000)The method setInterval is similar in that it waits the specified amount of time before invoking but it also keeps invoking every interval (it never stops unless you tell it too).
// this method will wait 3 seconds before console logging hello, and will continue to console log hello every three seconds
setInterval(() => {
console.log('hello')
}, 3000)It's time we start talking about one of the biggest reasons people love (and hate) javascript. This is because of it's ability to interchangeable switch between being synchronous and asynchronous.
So, what is synchronous code?
Synchronous code is what we've done is ruby thus far. The code executes line by line in a very defined order. If it has to wait for a process to finish (say a massively long while loop) it will wait for this process to finish.
This is synchronous javascript code.
let num = 0
const arr = []
while (num < 100000000) {
arr.push(num)
num += 1
}
console.log(arr)Asynchronous code is where the code does not execute line by line. It executes what it can at that point in time independent of the line by line order.
Take this for example.
console.log('hello world')
setTimeout(() => {
console.log('hello')
}, 3000)
console.log('after the setTimeout)When you run this code see how the "after the setTimout" prints straight away even though it's after the setTimout in line by line order.
This is asynchronous javascript code.