SHARE
Facebook X Pinterest WhatsApp

The JavaScript Diaries: Part 4

Written By
thumbnail
Lee Underwood
Lee Underwood
Feb 13, 2007

In this section of the JavaScript Diaries, we’ll look at JavaScript functions.
These help us to write more intricate programs, allowing us to accomplish more.

If you have any questions or suggestions, feel free to

Remember, we’re in this together. Also, be sure to visit the JavaScript forums. Looking over some of the posts and analyzing the different aspects of writing scripts helps to gain a better understanding, especially as you gain more knowledge of the language. Now, on to our next lesson …

JavaScript Functions

A function
is a set of statements used to perform a specific task. Whenever a function
is needed, it’s “called” from somewhere within the script or from within the
page itself. Functions organize scripts into different sections — you
can think of them as “subscripts” or “subroutines” — to be used within
the overall script. Just as a variable is a “data container,” a function is
a “code container.” It’s actually a “self-contained process.” When you create
a function, you are in fact, creating a new JavaScript command that can be called
from anywhere within the script.

Writing Functions

Like a variable, a function must be declared first in order to use it. This
is done by using the reserved word function, followed by the name
of the function and a pair of parentheses, for example function giveName().
(Do not end the line with a semi-colon.) This is then followed by a pair of
curly brackets ( “{ }” ) which contain the actual code that will
be executed when the function is called. (Do not put a semi-colon after the
closing curly bracket either; each line within the curly brackets will end with
a semi-colon.) The formatting of the curly brackets is really a matter of preference.
The two formats used most are shown below (we’ll be using the first one):

  function giveName() {
    code goes here;
    code goes here;
  }


  function giveName()
  {
    code goes here;
    code goes here;
  }

Naming Rules

Function names follow the same rules as variables:

  • Names can only begin with a letter or underscore ( “_” ) and cannot contain any spaces.
  • Names are case sensitive: newName, NewName, and NEWname are all different names to the JavaScript interpreter.
  • When a function is called, it must have the same case usage as the original declaration.
  • Reserved words cannot be used to name functions.

Calling a Function

Until it is “called,” a function merely stores code. To call a function, list
the function name followed by a pair of parentheses and a semi colon, such as
giveName();.

A function call can be placed anywhere on the Web page — in the <head>
section within the script or in the <body> section. It can also
be placed in an external file. If it is called within the <body>
tag, it must be enclosed within script tags just like a regular script; otherwise
the JavaScript interpreter will see it as regular text and not execute it. A
function can even be called from within another function, but the code must
first be loaded into memory in order for it to be used.

Calling a function from within the <head>:

<script type="text/javascript">
<!--
  function readyMessage()
  {
    alert("Are you ready for this?");
  }
  readyMessage();
//-->
</script>

Calling a function from within the <body>:

<script type="text/javascript">
<!--
  readyMessage();
//-->
</script>

It’s important to remember that no matter where the function itself is actually
located, it will not execute until it is called. The function must be loaded
into memory in order for it to be called so it must be located before the actual
calling statement, even if it is run from within the function itself. It’s like
a software program on your computer. You already have the code loaded on your
hard drive but in order for it to run it has to be “called,” otherwise it just
sits there and doesn’t do anything.

Recommended for you...

The Revolutionary ES6 Rest and Spread Operators
Rob Gravelle
Aug 23, 2022
Ahead of Time (AOT) Compilation in Angular
Tariq Siddiqui
Aug 16, 2022
Converting a JavaScript Object to a String
Rob Gravelle
Aug 14, 2022
Understanding Primitive Type Coercion in JavaScript
Rob Gravelle
Jul 28, 2022
HTML Goodies Logo

The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.

Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved

Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.