JavaScript Bootcamp: Learn the Basics of JavaScript Programming in 2 Weeks (2016)

Chapter 4. More Information About Functions in JavaScript

In the previous section, you’ve learned how to create and call function values. This chapter will help you understand this important topic further. According to expert programmers, functions serve as your main tools when using JavaScript. Functions are powerful tools that can help you design large programs, minimize redundancy, name subprograms, and secure isolation for each subprogram. That means you have to master functions if you want to be use JavaScript effectively. This chapter will help you to learn this scripting language in just two weeks.

Many people apply functions to define new vocabularies. That means you can use them to create words and assign meanings.

An average English speaker has about 20,000 words in his/her vocabulary. Well, programming languages usually don’t have that amount of built-in commands. That means the vocabulary in programming is more precise than those used in human languages. If you want to minimize redundancy, you have to add your own words into JavaScript and create your own vocabulary.

How to Define a Function

Defining a function is like defining an ordinary variable. The only difference is that the value you are assigning is a function. For instance, the code below defines a variable named“square.” This variable points to a function that generates the square of any assigned number.

When creating a function, you should start an expression with this keyword:“function.” Each function has two parts: (1) body and (2) parameter/s. The function’s body stores the JavaScript statements that you want to execute once the function is invoked (or called). Additionally, you should always enclose the body using curly braces (even if it contains a single statement).

A parameter, on the other hand, is a name listed in the function’s definition. Functions may have one or more parameters. Actually, you can even create a function without entering any parameter. To help you understand this concept, let’s create two functions: makeNoise and power.

As you can see, makeNoise doesn’t have any parameter. Meanwhile,“power” has two (i.e. base and exponent).

The Parameters and Scopes in JavaScript

A function’s parameters behave like ordinary variables, although they get their original value from the programmer, not from the function they are linked to.

Here is an important property of any function: all of the variables created in it (even the parameters) are local to it. That means, for instance, that“result” in the power statement will refresh itself each time the function is invoked. These separate repetitions don’t affect each other.

It is important to note that this“principle of locality” is applicable only for variables and parameters defined using“var.” Additionally, you should define the variables and parameters within the function’s body. A variable defined outside of a function is called global, since it can be seen and accessed throughout the JavaScript application. You may access global variables and parameters from within a function if they have no“local” counterparts.

The code below illustrates this concept. It declares and invokes two functions that give a value to“x.” The first function defines the variable as a local one. The second function, on the other hand, doesn’t. That means if you will reference x inside the function, you’ll point to the global x (shown at the first line of the example).

This functionality helps you in preventing unintended references or interactions between different functions. If JavaScript allows you to share all variables throughout the entire program, you’ll have to spend lots of time and effort in ensuring that names aren’t duplicated. Reusing variable names can give unexpected or undesirable effects on your codes. Thus, it can ruin the programs you are working on.

Since this language treats local variables as if they exist only inside their respective function, it can work on functions as distinct worlds. JavaScript won’t have to worry about the entire application whenever you work on a single function.

The Nested Scope

Aside from defining local and global variables, JavaScript uses other methods to distinguish different kinds of functions. For example, you may create functions within existing functions. This technique produces multiple levels of locality.

For instance, the function given below contains two functions:

Both functions (i.e. flat and mountain) can access the“result” variable because they are placed within the function that declares that variable. However, they can’t access each other’s variables. That means the program environment located outside the function cannot access the variables it contains.

Programmers who have used other languages might think that they can create new local environments by enclosing code blocks using curly braces. In JavaScript, however, only functions can generate new scopes.

Using Functions as Ordinary Values

Usually, function variables serve as names for a certain piece of a program. You cannot modify existing function variables: once you have defined them, they will stop you from performing any future modifications. This characteristic can cause confusions regarding names and the functions they refer to.

Obviously, a function and a variable are two different things. Function values can do what typical values can do– you may call and use them for complex expressions. You may change the location of a function value, assign it as an argument for a function, etc. In the same manner, variables that contain functions are still considered as regular variables. That means you can give them new values.

Declarations

JavaScript offers a quick and easy way to declare functions. You just have to start your statements using the keyword“function.” For instance:

The statement given above is known as a“declaration.” It defines a variable named square and gives it a certain function. This example is easy to understand. However, this method of defining functions has a subtlety:

The latest example works perfectly, even if the function is declared under the code it is assigned to. This code is valid because declarations ignore the top-to-bottom statement structure. You can actually move a declaration onto the top of its scope so that local codes can access it. This functionality can be useful since it allows you to arrange codes in a meaningful way, without having to define all of the affected functions.

The Optional Arguments

The JavaScript language accepts the code given below. You won’t encounter any problem while invoking it.

alert(“Hi”,“Good Morning”,“How are you?”);

Officially, the“alert” function accepts a single argument only. However, it won’t complain if you’ll invoke it using the sample code above. It will just accept the first argument (i.e.“Hi”) and ignore the rest.

This programming language is“open-minded” when it comes to the quantity of arguments you can assign to your functions. If you’ll assign too many arguments, it will accept the valid ones and ignore the others. If your arguments are not enough, however, JavaScript will complete your statement by assigning“undefined” to the appropriate parameters.