Code can be encapsulated into a function and then run from a different point. Let’s add another function and have one call the other:
1 2 3 4 5 6
sayHello runs, it makes an alert, but it gets the text for the alert from another function,
message does something new:
return. Return will send data back to the place the function was called. That means that the returned string gets plugged in to the
alert function. Pretty neat!
Now, it wouldn’t be fun if functions always did the same thing, so let’s add a parameter:
1 2 3 4 5 6
message function takes a parameter,
name. It can use the name when building its string. Where does it get the name? From the place it was called in
sayHello. When we call the function, we can put parameters inside the parenthesis.
We gave the functions above have names. Names are obviously helpful if we want to refer to a function later on. However, there are some cases where we just want to declare a function on the spot and we don’t need to give it name. These are called anonymous functions. We can store anonymous functions into variables or pass them in as arguments to other functions.
1 2 3
We’ll talk a more about anonymous functions a little later.
1 2 3 4 5 6 7 8 9
message function uses the value of the name variable to make the message. Then inside
sayHello we alert with the first name (Joe) then we change the name and alert again. This time, when
message checks the name, it’s been set to Bob.
switch. Let’s take a look at using an if/else with our code:
1 2 3 4 5 6 7 8 9 10 11
If you reload the page, it will say ‘hey buddy!’ because name is Joe. But try changing the name variable to something else and reloading the page.
Sometimes, you have to process a lot of items. For example, let’s say we needed to greet three people. First, let’s see how we can put those people into an
1 2 3
Arrays are lists of items. You can get to a value in an array by asking by
index, which is the position in the array. Indexes start at 0 and count up. So
However, if we wanted to write code that doesn’t need to know how many names are in the array, we would have to use a loop:
1 2 3 4
This is a
for loop. It will iterate through each index in the array and assign the index to the
i could be anything we want. We could have called it
position or something else, because it is a variable.
There is another kind of
for loop, and also a
while loop, as shown below:
1 2 3 4 5 6 7 8 9 10
The above syntax for a
while loops are usually used in scenarios where you want to perform the same action over and over until something in the system changes.
In modern browsers (Internet Explorer 9 and later as well as Firefox, Chrome, and Safari), we can iterate over the contents of an array. This is the preferred approach as long as you don’t need don’t need to support older browsers. (There even are shims to add this functionality to older browsers.)
1 2 3 4 5
forEach takes an anonymous function as an argument and applies it to each item in the array. In this case, we’re alerting each name in the array.
Experiment with your code for a bit.
- Try modifying the names array, or loop over different content in a different way.
- Try using more than one variable to combine them into a more complicated message based on conditionals.