DEV Community

front_end_shifu_2022
front_end_shifu_2022

Posted on

Function expressions

Function expressions3

syntax:
let sayHi = function() {
alert( "Hello" );
};

look above, the function is created and assigned to the variable clearly , like any other value. No matter how the function is defined, its just a value stored in the variable sayHi.
The meaning of these code samples is the same: "create a function and put it into the variable sayHi".

We can copy a function to another variable:

function name() { // (1) create
alert( "liliang" );
}
let myName = name; // (2) copy
myName(); // liliang // (3) run the copy (it works)!
name(); // liliang // this still works

Why is there a semicolon at the end of function expression?
A function expression is not a codeblock but its an assignment.The semicolon ; is recommended at the end of it, no matter what the value is.
So the semicolon here is not related to the Function Expression itself, it just terminates the statement.

Callback functions
The function should ask the question and, depending on the user’s answer, call yes() or no():
function ask(question, yes, no) {
if (confirm(question)) yes()
else no();
}
function showOk() {
alert( "You agreed." );
}
function showCancel() {
alert( "You canceled the execution." );
}
// usage: functions showOk, showCancel are passed as arguments to ask
ask("Do you agree?", showOk, showCancel);

The arguments showOk and showCancel of ask are called callback functions or just callbacks.

We can use Function Expressions to write the same function much shorter:

function ask(question, yes, no) {
if (confirm(question)) yes()
else no();
}
ask(
"Do you agree?",
function() { alert("You agreed."); },
function() { alert("You canceled the execution."); }
);

Here, functions are declared inside the ask(...) call. They are without name, so its called anonymous. functions like this are not accessible outside of ask (because they are not assigned to variables), but that’s just what we want here.

Function Expression vs Function Declaration

Function Declaration: a function, declared as a separate statement, in the main code flow.

// Function Declaration
function sum(x, y) {
return x + y;
}
A Function Declaration can be called earlier than it is defined

Function Expression: a function, created inside an expression or inside another syntax construct. Here, the function is created at the right side of the “assignment expression” =:

// Function Expression
let sum = function(x, y) {
return x + y;
};
A Function Expression is created when the execution reaches it and is usable only from that moment.

When to choose Function Declaration versus Function Expression?
As a rule of thumb, when we need to declare a function, the first to consider is Function Declaration syntax. It gives more freedom in how to organize our code, because we can call such functions before they are declared.

That’s also better for readability, as it’s easier to look up function f(…) {…} in the code than let f = function(…) {…};. Function Declarations are more “eye-catching”.

…But if a Function Declaration does not suit us for some reason, or we need a conditional declaration , then Function Expression should be used.

Top comments (0)