Intermediate Javascript Functions

 

You've seen how to set up functions and call them into action. But there's a lot more to functions than that. In this lesson, we'll take a look at function expressions.

Function expressions are useful when you don't need to call them again. You just need to use them once. The code for that function then gets discarded by the browser and you gain in terms of faster, more efficient code execution. Let's see how they work.

The functions you've learned about before are separate chunks of code like this:

function doSomething() {

alert("I did something");

}

You then call them into action like this:

doSomething();

But, with a function expression, you can put the whole thing after an equal sign. Like this:

var result = function() {

return "I did something";

}

alert( result() );

Notice that a function expression doesn't use a name. (It's often called an Anonymous function.) It's just the keyword 'function' followed by a pair of round brackets. Another thing to note is that the variable called result is now the function object. Which means that you need to call it into action with a pair of round brackets:

result()

You can pass arguments over to your function expressions:

let num1 =2;
let num2 = 4;

let result = function(num1, num2) {

return num1 + num2;

}

alert( result(num1, num2) );

Here, we're setting up two let values and calling then num1 and num2. The function expression uses these to add the two numbers together.

 

Arrow Functions in Javascript

There's a shorthand way to set up the function expressions above and that's using an arrow function. With an arrow function, you can miss out the word function altogether. They look like this:

let result = () => {

return "Hello";

}

alert( result() );

After the equal sign, we now have a pair of round brackets for any arguments we may want to pass over to the functions. After the round brackets, type another equal sign followed by the 'greater than' symbol (the right-pointy arrow). As usual, there's a pair of curly brackets for your code.

However, you don't actually need the curly brackets, or the return keyword, if your code is going all on one line:

let resultTwo = () => "Hello Two";

alert( resultTwo() );

 

Immediately Invoked Function Expression (IIFE)

Sometimes, you want a function that can call itself. In which case, Javascript provides something called an Immediately Invoked Function Expression. You might want one of these functions, for example, to run some code when your web page first loads. Most functions are global objects. But Immediately invoked functions are not. So using them can speed up your program.

The difficulty in using this type of function is trying to remember where all the round and curly brackets go. They look like this:

(function() {

alert("YOUR CODE");

})();

Essentially, there are two sets of round brackets, one set that surrounds the function and one set for the call. The pair of round brackets at the end are the ones that call the function. Notice that the function doesn't need a name (it can have one, though), just the word 'function'. The semicolon on the end is not strictly needed, but it's good practice to put one in.

You can pass values to your function, if you want. In which case, add them between the final pair of round brackets:

let message = "My Code";

(function() {

alert(message);

}) (message);

Here, a let variable call message has been set up. This message is then added between the final round brackets of the function.

If you want to make your code even more difficult to read, you can use the arrow symbols instead of the word function:

(() => {

alert("YOUR CODE");

})();

The above is not standard practice, however, as it's hard to decipher.

 

In the next lesson, we'll move on and explore Javascript Strings.

Back to the Home Page