JavaScript Fundamentals Part III Page 1 of 19

Functions

 Quite often we need to perform a similar action in many places of the script.

o For example, we need to show a nice-looking message when a visitor logs in, logs out and
maybe somewhere else.

 Functions are the main “building blocks” of the program. They allow the code to be called many
times without repetition.

o We’ve already seen examples of built-in functions, like alert(message), prompt(message,

default) and confirm(question). But we can create functions of our own as well.

Function Declaration

To create a function we can use a function declaration.

It looks like this:

function showMessage() {
alert( 'Hello everyone!' );
}

The function keyword goes first, then goes the name of the function, then a list of parameters
between the parentheses (empty in the example above) and finally the code of the function, also
named “the function body”, between curly braces.

Our new function can be called by its name: showMessage().

For instance:

function showMessage() {
alert( 'Hello everyone!' );
}

showMessage();
showMessage();

The call showMessage() executes the code of the function. Here we will see the message two times.

This example clearly demonstrates one of the main purposes of functions: to avoid code duplication.

Lesson 2  jyercia
JavaScript Fundamentals Part III Page 2 of 19

If we ever need to change the message or the way it is shown, it’s enough to modify the code in one
place: the function which outputs it.

Local variables

A variable declared inside a function is only visible inside that function.

For example:

function showMessage() {
let message = "Hello, I'm JavaScript!"; // local variable

alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Error! The variable is local to the function

Outer variables

A function can access an outer variable as well, for example:

let userName = 'John';

function showMessage() {
let message = 'Hello, ' + userName;
alert(message);
}

showMessage(); // Hello, John

The function has full access to the outer variable. It can modify it as well.

For instance:

let userName = 'John';

function showMessage() {
userName = "Bob"; // (1) changed the outer variable

let message = 'Hello, ' + userName;

alert(message);
}

alert( userName ); // John before the function call

showMessage();
alert( userName ); // Bob, the value was modified by the function

The outer variable is only used if there’s no local one.

Lesson 2  jyercia
JavaScript Fundamentals Part III Page 3 of 19

If a same-named variable is declared inside the function then it shadows the outer one. For instance,
in the code below the function uses the local userName. The outer one is ignored:

let userName = 'John';

function showMessage() {
let userName = "Bob"; // declare a local variable
let message = 'Hello, ' + userName; // Bob
alert(message);
}

// the function will create and use its own userName

showMessage();

alert( userName ); // John, unchanged, the function did not access the outer variable

Global variables

Variables declared outside of any function, such as the outer userName in the code above, are called
global.

Global variables are visible from any function (unless shadowed by locals).

It’s a good practice to minimize the use of global variables. Modern code has few or no globals.
Most variables reside in their functions. Sometimes though, they can be useful to store project-level
data.

Parameters

We can pass arbitrary data to functions using parameters (also called function arguments) .

In the example below, the function has two parameters: from and text.

function showMessage(from, text) { // arguments: from, text

alert(from + ': ' + text);
}

showMessage('Ann', 'Hello!'); // Ann: Hello! (*)

showMessage('Ann', "What's up?"); // Ann: What's up? (**)

When the function is called in lines (*) and (**), the given values are copied to local variables from
and text. Then the function uses them.

Here’s one more example: we have a variable from and pass it to the function. Please note: the
function changes from, but the change is not seen outside, because a function always gets a copy of
the value:

function showMessage(from, text) {

from = '*' + from + '*'; // make "from" look nicer
Lesson 2  jyercia
JavaScript Fundamentals Part III Page 4 of 19

alert( from + ': ' + text );

}

let from = "Ann";

showMessage(from, "Hello"); // *Ann*: Hello

// the value of "from" is the same, the function modified a local copy
alert( from ); // Ann

Default values

If a parameter is not provided, then its value becomes undefined.

For instance, the aforementioned function showMessage(from, text) can be called with a single
argument:

showMessage("Ann");

That’s not an error. Such a call would output "Ann: undefined". There’s no text, so it’s assumed that
text === undefined.

If we want to use a “default” text in this case, then we can specify it after =:

function showMessage(from, text = "no text given") {

alert( from + ": " + text );
}

showMessage("Ann"); // Ann: no text given

Now if the text parameter is not passed, it will get the value "no text given"

Here "no text given" is a string, but it can be a more complex expression, which is only evaluated
and assigned if the parameter is missing. So, this is also possible:

function showMessage(from, text = anotherFunction()) {

// anotherFunction() only executed if no text given
// its result becomes the value of text
}

Evaluation of default parameters

In JavaScript, a default parameter is evaluated every time the function is called without the
respective parameter. In the example above, anotherFunction() is called every time showMessage() is
called without the text parameter. This is in contrast to some other languages like Python, where any
default parameters are evaluated only once during the initial interpretation.

Default parameters old-style

Old editions of JavaScript did not support default parameters. So there are alternative ways to
support them, that you can find mostly in the old scripts.

For instance, an explicit check for being undefined:

Lesson 2  jyercia
JavaScript Fundamentals Part III Page 5 of 19

function showMessage(from, text) {

if (text === undefined) {
text = 'no text given';
}

alert( from + ": " + text );

}

…Or the || operator:

function showMessage(from, text) {

// if text is falsy then text gets the "default" value
text = text || 'no text given';
...
}

Returning a value

A function can return a value back into the calling code as the result.

The simplest example would be a function that sums two values:

function sum(a, b) {
return a + b;
}

let result = sum(1, 2);

alert( result ); // 3

The directive return can be in any place of the function. When the execution reaches it, the function
stops, and the value is returned to the calling code (assigned to result above).

There may be many occurrences of return in a single function. For instance:

function checkAge(age) {
if (age > 18) {
return true;
} else {
return confirm('Do you have permission from your parents?');
}
}

let age = prompt('How old are you?', 18);

if ( checkAge(age) ) {
alert( 'Access granted' );
} else {
alert( 'Access denied' );
}

It is possible to use return without a value. That causes the function to exit immediately.

Lesson 2  jyercia
JavaScript Fundamentals Part III Page 6 of 19

For example:

function showMovie(age) {
if ( !checkAge(age) ) {
return;
}

alert( "Showing you the movie" ); // (*)

// ...
}

In the code above, if checkAge(age) returns false, then showMovie won’t proceed to the alert.

A function with an empty return or without it returns undefined

If a function does not return a value, it is the same as if it returns undefined:

function doNothing() { /* empty */ }

alert( doNothing() === undefined ); // true

An empty return is also the same as return undefined:
function doNothing() {
return;
}

alert( doNothing() === undefined ); // true

Never add a newline between return and the value

For a long expression in return, it might be tempting to put it on a separate line, like this:

return
(some + long + expression + or + whatever * f(a) + f(b))

That doesn’t work, because JavaScript assumes a semicolon after return. That’ll work the same as:

return;
(some + long + expression + or + whatever * f(a) + f(b))

So, it effectively becomes an empty return. We should put the value on the same line instead.

Naming a function

Functions are actions. So their name is usually a verb. It should be brief, as accurate as possible and
describe what the function does, so that someone reading the code gets an indication of what the
function does.

It is a widespread practice to start a function with a verbal prefix which vaguely describes the action.
There must be an agreement within the team on the meaning of the prefixes.

For instance, functions that start with "show" usually show something.
Lesson 2  jyercia
JavaScript Fundamentals Part III Page 7 of 19

Function starting with…

 "get…" – return a value,

 "calc…" – calculate something,
 "create…" – create something,
 "check…" – check something and return a boolean, etc.

Examples of such names:

showMessage(..) // shows a message

getAge(..) // returns the age (gets it somehow)
calcSum(..) // calculates a sum and returns the result
createForm(..) // creates a form (and usually returns it)
checkPermission(..) // checks a permission, returns true/false

With prefixes in place, a glance at a function name gives an understanding what kind of work it does
and what kind of value it returns.

One function – one action

A function should do exactly what is suggested by its name, no more.

Two independent actions usually deserve two functions, even if they are usually called together (in
that case we can make a 3rd function that calls those two).

A few examples of breaking this rule:

 getAge – would be bad if it shows an alert with the age (should only get).
 createForm – would be bad if it modifies the document, adding a form to it (should only
create it and return).
 checkPermission – would be bad if it displays the access granted/denied message (should
only perform the check and return the result).

These examples assume common meanings of prefixes. You and your team are free to agree on other
meanings, but usually they’re not much different. In any case, you should have a firm understanding
of what a prefix means, what a prefixed function can and cannot do. All same-prefixed functions
should obey the rules. And the team should share the knowledge.

Ultrashort function names

Functions that are used very often sometimes have ultrashort names.

For example, the jQuery framework defines a function with $. The Lodash library has its core
function named _.

These are exceptions. Generally functions names should be concise and descriptive.

Functions == Comments

Functions should be short and do exactly one thing. If that thing is big, maybe it’s worth it to split the
function into a few smaller functions. Sometimes following this rule may not be that easy, but it’s
definitely a good thing.
Lesson 2  jyercia
JavaScript Fundamentals Part III Page 8 of 19

A separate function is not only easier to test and debug – its very existence is a great comment!

For instance, compare the two functions showPrimes(n) below. Each one outputs prime numbers up
to n.

The first variant uses a label:

function showPrimes(n) {
nextPrime: for (let i = 2; i < n; i++) {

for (let j = 2; j < i; j++) {

if (i % j == 0) continue nextPrime;
}

alert( i ); // a prime
}
}

The second variant uses an additional function isPrime(n) to test for primality:

function showPrimes(n) {
for (let i = 2; i < n; i++) {
if (!isPrime(i)) continue;

alert(i); // a prime
}
}

function isPrime(n) {
for (let i = 2; i < n; i++) {
if ( n % i == 0) return false;
}
return true;
}

The second variant is easier to understand, isn’t it? Instead of the code piece we see a name of the
action (isPrime). Sometimes people refer to such code as self-describing.

So, functions can be created even if we don’t intend to reuse them. They structure the code and make
it readable.

Summary

A function declaration looks like this:

function name(parameters, delimited, by, comma) {

/* code */
}

 Values passed to a function as parameters are copied to its local variables.

 A function may access outer variables. But it works only from inside out. The code outside of
the function doesn’t see its local variables.
 A function can return a value. If it doesn’t, then its result is undefined.
Lesson 2  jyercia
JavaScript Fundamentals Part III Page 9 of 19

To make the code clean and easy to understand, it’s recommended to use mainly local variables and
parameters in the function, not outer variables.

It is always easier to understand a function which gets parameters, works with them and returns a
result than a function which gets no parameters, but modifies outer variables as a side-effect.

Function naming:

 A name should clearly describe what the function does. When we see a function call in the
code, a good name instantly gives us an understanding what it does and returns.
 A function is an action, so function names are usually verbal.
 There exist many well-known function prefixes like create…, show…, get…, check… and so
on. Use them to hint what a function does.

Functions are the main building blocks of scripts. Now we’ve covered the basics, so we actually can
start creating and using them. But that’s only the beginning of the path. We are going to return to
them many times, going more deeply into their advanced features.

Tasks
1. The following function returns true if the parameter age is greater than 18.

Otherwise it asks for a confirmation and returns its result:

function checkAge(age) {
if (age > 18) {
return true;
} else {
// ...
return confirm('Did parents allow you?');
}
}

Will the function work differently if else is removed?

function checkAge(age) {
if (age > 18) {
return true;
}
// ...
return confirm('Did parents allow you?');
}

Is there any difference in the behavior of these two variants?

2. The following function returns true if the parameter age is greater than 18.

Otherwise it asks for a confirmation and returns its result.

function checkAge(age) {
Lesson 2  jyercia
JavaScript Fundamentals Part III Page 10 of 19

if (age > 18) {

return true;
} else {
return confirm('Do you have your parents permission to access this page?');
}
}

Rewrite it, to perform the same, but without if, in a single line.

Make two variants of checkAge:

1. Using a question mark operator ?

2. Using OR ||

3. Write a function min(a,b) which returns the least of two numbers a and b.

For instance:

min(2, 5) == 2
min(3, -1) == -1
min(1, 1) == 1

4. Write a function pow(x,n) that returns x in power n. Or, in other words, multiplies x by itself n times
and returns the result.

pow(3, 2) = 3 * 3 = 9
pow(3, 3) = 3 * 3 * 3 = 27
pow(1, 100) = 1 * 1 * ...* 1 = 1

Create a web-page that prompts for x and n, and then shows the result of pow(x,n).

P.S. In this task the function should support only natural values of n: integers up from 1.

Function expressions and arrows

In JavaScript, a function is not a “magical language structure”, but a special kind of value.

The syntax that we used before is called a Function Declaration:

function sayHi() {
alert( "Hello" );
}

There is another syntax for creating a function that is called a Function Expression.

It looks like this:

let sayHi = function() {

alert( "Hello" );
};

Lesson 2  jyercia
JavaScript Fundamentals Part III Page 11 of 19

Here, the function is created and assigned to the variable explicitly, like any other value. No matter
how the function is defined, it’s 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 even print out that value using alert:

function sayHi() {
alert( "Hello" );
}
alert( sayHi ); // shows the function code

Please note that the last line does not run the function, because there are no parentheses after sayHi.
There are programming languages where any mention of a function name causes its execution, but
JavaScript is not like that.

In JavaScript, a function is a value, so we can deal with it as a value. The code above shows its string
representation, which is the source code.

It is a special value of course, in the sense that we can call it like sayHi().

But it’s still a value. So we can work with it like with other kinds of values.

We can copy a function to another variable:

function sayHi() { // (1) create

alert( "Hello" );
}
let func = sayHi; // (2) copy
func(); // Hello // (3) run the copy (it works)!
sayHi(); // Hello // this still works too (why wouldn't it)

Here’s what happens above in detail:

1. The Function Declaration (1) creates the function and puts it into the variable named sayHi.

2. Line (2) copies it into the variable func.

Please note again: there are no parentheses after sayHi. If there were, then func = sayHi()
would write the result of the call sayHi() into func, not the function sayHi itself.

3. Now the function can be called as both sayHi() and func().

Note that we could also have used a Function Expression to declare sayHi, in the first line:

let sayHi = function() { ... };

let func = sayHi;

// ...

Everything would work the same. Even more obvious what’s going on, right?

Why is there a semicolon at the end?

Lesson 2  jyercia
JavaScript Fundamentals Part III Page 12 of 19

You might wonder, why does Function Expression have a semicolon ; at the end, but Function
Declaration does not:

function sayHi() {
// ...
}

let sayHi = function() {

// ...
};

The answer is simple:

 There’s no need for ; at the end of code blocks and syntax structures that use them like if
{ ... }, for { }, function f { } etc.
 A Function Expression is used inside the statement: let sayHi = ...;, as a value. It’s not a code
block. The semicolon ; is recommended at the end of statements, no matter what is the value.
So the semicolon here is not related to the Function Expression itself in any way, it just
terminates the statement.

Callback functions

Let’s look at more examples of passing functions as values and using function expressions.

We’ll write a function ask(question, yes, no) with three parameters:

question
Text of the question
yes
Function to run if the answer is “Yes”
no
Function to run if the answer is “No”

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

Lesson 2  jyercia
JavaScript Fundamentals Part III Page 13 of 19

ask("Do you agree?", showOk, showCancel);

Before we explore how we can write it in a much shorter way, let’s note that in the browser (and on
the server-side in some cases) such functions are quite popular. The major difference between a real-
life implementation and the example above is that real-life functions use more complex ways to
interact with the user than a simple confirm. In the browser, such a function usually draws a nice-
looking question window. But that’s another story.

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

The idea is that we pass a function and expect it to be “called back” later if necessary. In our case,
showOk becomes the callback for the “yes” answer, and showCancel for the “no” answer.

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 right inside the ask(...) call. They have no name, and so are called
anonymous. Such functions are not accessible outside of ask (because they are not assigned to
variables), but that’s just what we want here.

Such code appears in our scripts very naturally, it’s in the spirit of JavaScript.

A function is a value representing an “action”

Regular values like strings or numbers represent the data.

A function can be perceived as an action.

We can pass it between variables and run when we want.

Function Expression vs Function Declaration

Let’s formulate the key differences between Function Declarations and Expressions.

First, the syntax: how to differentiate between them in the code.

 Function Declaration: a function, declared as a separate statement, in the main code flow.
 // Function Declaration
 function sum(a, b) {
 return a + b;
}

Lesson 2  jyercia
JavaScript Fundamentals Part III Page 14 of 19

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(a, b) {
return a + b;
};

The more subtle difference is when a function is created by the JavaScript engine.

A Function Expression is created when the execution reaches it and is usable from then on.

Once the execution flow passes to the right side of the assignment let sum = function… – here we go,
the function is created and can be used (assigned, called, etc. ) from now on.

Function Declarations are different.

A Function Declaration is usable in the whole script (or a code block, if it’s inside a block).

In other words, when JavaScript prepares to run the script or a code block, it first looks for Function
Declarations in it and creates the functions. We can think of it as an “initialization stage”.

And after all of the Function Declarations are processed, the execution goes on.

As a result, a function declared as a Function Declaration can be called earlier than it is defined.

For example, this works:

sayHi("John"); // Hello, John

function sayHi(name) {
alert( `Hello, ${name}` );
}

The Function Declaration sayHi is created when JavaScript is preparing to start the script and is
visible everywhere in it.

…If it was a Function Expression, then it wouldn’t work:

sayHi("John"); // error!

let sayHi = function(name) { // (*) no magic any more

alert( `Hello, ${name}` );
};

Function Expressions are created when the execution reaches them. That would happen only in the
line (*). Too late.

When a Function Declaration is made within a code block, it is visible everywhere inside that
block. But not outside of it.

Sometimes that’s handy to declare a local function only needed in that block alone. But that feature
may also cause problems.
Lesson 2  jyercia
JavaScript Fundamentals Part III Page 15 of 19

For instance, let’s imagine that we need to declare a function welcome() depending on the age
variable that we get during runtime. And then we plan to use it some time later.

The code below doesn’t work:

let age = prompt("What is your age?", 18);

// conditionally declare a function

if (age < 18) {

function welcome() {
alert("Hello!");
}

} else {

function welcome() {
alert("Greetings!");
}
}
// ...use it later
welcome(); // Error: welcome is not defined

That’s because a Function Declaration is only visible inside the code block in which it resides.

Here’s another example:

let age = 16; // take 16 as an example

if (age < 18) {
welcome(); // \ (runs)
// |
function welcome() { // |
alert("Hello!"); // | Function Declaration is available
} // | everywhere in the block where it's declared
// |
welcome(); // / (runs)
} else {
function welcome() { // for age = 16, this "welcome" is never created
alert("Greetings!");
}
}
// Here we're out of curly braces,
// so we can not see Function Declarations made inside of them.

welcome(); // Error: welcome is not defined

What can we do to make welcome visible outside of if?

The correct approach would be to use a Function Expression and assign welcome to the variable that
is declared outside of if and has the proper visibility.

Now it works as intended:

Lesson 2  jyercia
JavaScript Fundamentals Part III Page 16 of 19

let age = prompt("What is your age?", 18);

let welcome;

if (age < 18) {

welcome = function() {
alert("Hello!");
};

} else {

welcome = function() {
alert("Greetings!");
};
}

welcome(); // ok now

Or we could simplify it even further using a question mark operator ?:

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?

function() { alert("Hello!"); } :
function() { alert("Greetings!"); };

welcome(); // ok now

When should you 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, the one we used before. It gives more freedom in how to organize our code, because we can
call such functions before they are declared.

It’s also a little bit 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 (we’ve seen an example above),
then Function Expression should be used.

Arrow functions

There’s one more very simple and concise syntax for creating functions, that’s often better than
Function Expressions. It’s called “arrow functions”, because it looks like this:

let func = (arg1, arg2, ...argN) => expression

…This creates a function func that has arguments arg1..argN, evaluates the expression on the right
side with their use and returns its result.

In other words, it’s roughly the same as:

Lesson 2  jyercia
JavaScript Fundamentals Part III Page 17 of 19

let func = function(arg1, arg2, ...argN) {

return expression;
};

…But much more concise.

Let’s see an example:

let sum = (a, b) => a + b;

/* The arrow function is a shorter form of:

let sum = function(a, b) {

return a + b;
};
*/

alert( sum(1, 2) ); // 3

If we have only one argument, then parentheses can be omitted, making that even shorter:

// same as
// let double = function(n) { return n * 2 }
let double = n => n * 2;

alert( double(3) ); // 6

If there are no arguments, parentheses should be empty (but they should be present):

let sayHi = () => alert("Hello!");

sayHi();

Arrow functions can be used in the same way as Function Expressions.

For instance, here’s the rewritten example with welcome():

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?

() => alert('Hello') :
() => alert("Greetings!");

welcome(); // ok now

Arrow functions may appear unfamiliar and not very readable at first, but that quickly changes as the
eyes get used to the structure.

They are very convenient for simple one-line actions, when we’re just too lazy to write many words.

Multiline arrow functions

Lesson 2  jyercia
JavaScript Fundamentals Part III Page 18 of 19

The examples above took arguments from the left of => and evaluated the right-side expression with
them.

Sometimes we need something a little bit more complex, like multiple expressions or statements. It is
also possible, but we should enclose them in curly braces. Then use a normal return within them.

Like this:

let sum = (a, b) => { // the curly brace opens a multiline function
let result = a + b;
return result; // if we use curly braces, use return to get results
};

alert( sum(1, 2) ); // 3

Here we praised arrow functions for brevity. But that’s not all! Arrow functions have other
interesting features. For now, we can already use them for one-line actions and callbacks.

Summary

 Functions are values. They can be assigned, copied or declared in any place of the code.
 If the function is declared as a separate statement in the main code flow, that’s called a “Function
Declaration”.
 If the function is created as a part of an expression, it’s called a “Function Expression”.
 Function Declarations are processed before the code block is executed. They are visible everywhere
in the block.
 Function Expressions are created when the execution flow reaches them.

In most cases when we need to declare a function, a Function Declaration is preferable, because it is visible
prior to the declaration itself. That gives us more flexibility in code organization, and is usually more
readable.

So we should use a Function Expression only when a Function Declaration is not fit for the task. We’ve seen
a couple of examples of that in this chapter, and will see more in the future.

Arrow functions are handy for one-liners. They come in two flavors:

1. Without curly braces: (...args) => expression – the right side is an expression: the function evaluates
it and returns the result.
2. With curly braces: (...args) => { body } – brackets allow us to write multiple statements inside the
function, but we need an explicit return to return something.

Tasks
1. Replace Function Expressions with arrow functions in the code:

function ask(question, yes, no) {

if (confirm(question)) yes()
else no();
}

ask(
Lesson 2  jyercia
JavaScript Fundamentals Part III Page 19 of 19

"Do you agree?",

function() { alert("You agreed."); },
function() { alert("You canceled the execution."); }
);

Lesson 2  jyercia