Javascript - English

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.

Kaynak : https://www.homeandlearn.co.uk/javascript/javascript_functions2.html ‘sitesinden alıntı

Yorum Yap