Function in JavaScript

Home / Function in JavaScript

Function in JavaScript

December 9, 2015 | Article | 4 Comments

Every programming language (except Assembly) has function.

Function is a block of code (enclosed by curly-bracket) which can be executed when “someone” calls it.

Like a variable, function can be defined anywhere in the code.

There are several ways of defining function in JavaScript:

  • Function Declaration
  • Function Expression
  • Function as a result of new Function call

Function Declaration

Basically, a function has a name a function name followed by parenthesis and list of arguments inside. After that is a block of code enclosed by curly-bracket.

function function_name(list of argument) {
some code to be executed
}

The code inside the function will be executed when the function is called. It can be called directly when an event occurs (like when a user clicks a button), or by another function.

Arguments are optional. You can have 1 or more arguments supplied to function. Of course you can have function which don’t have any argument.

An example function:

function greet(name) {
    alert("Hello "+name);
}

Note that a keyword function in the beginning is a must.

To call a function, we can use following (call greet() function):

greet("Xathrya");

If you have function with argument, make sure when you call it you supply the correct argument.

Function declarations are parsed at pre-execution stage, when the browser prepares to execute the code. That’s why, both of these codes work:

//-- 1
function greet(name) {
  alert("Hello "+name)
}

greet("Xathrya")

//-- 2
greet("Xathrya")

function greet(name) {
  alert("Hello "+name)
}

And a function can be declared anywhere in the code, even in the scope of branching and repetition.

Function Expression

A function in JavaScript is a first-class value, just like a number or string. As we remember that JavaScript is loose in type system.

Anywhere where you could put a value, you can also put a function, declared “at place” with a function expression syntax: function(arguments) { ... }. No function name, as the function name will take the name of variable. Therefore we can have:

var f = function(name) {
     alert("Hello "+name);
}

And we can invoke it as

f("Xathrya");

The point is, a function is construct as an expression like constructing any other variable.

Local Variable

A function may have variables, defined by var. In term of scope, they are local variables. We call local because they are only visible inside the function.

function sum(a, b) {
    var sum = a + b;

    return sum;
}

Returning a Value

Like the name, a function should return a value (even though not a must). To return a value, we can use `return` keyword.

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

var result = sum(2,5);
alert(result);

If a function does not return anything, it’s result is considered to be a special value, undefined.

Function is a Value

In JavaScript, a function is a regular value.

Just like any value, a function can be assigned, passed as a parameter for another function and so on. It doesn’t matter how it was defined.

function greet(name) {
    alert("Hello "+name);
}

var hello = greet; // assign a function to another variable

hello("dude");     // call the function

The function is assigned by reference. That is, a function is kept somewhere in memory and greet is a reference (or you could say pointer) to it. When we assign it to hi, both variables start to reference the same function.

A function can be used as an argument for another function. In extreme, we can declare a function which act as argument. Here what we talk about:

function runWithOne(f) {  // runs given function with argument 1
    f(1)
}

runWithOne(
    function(a){ alert(a) }
)

Logically, a function is an action. So, passing a function around is transferring an action which can be initiated from another part of the program. This feature is widely used in JavaScript.

In the example above, we create a function without a name, and don’t assign it to any variable. Such functions are called anonymous functions.

Running at Place

It is possible to create and run a function created with Function Expression at once.

(function() {
    var a, b;    // local variables

    // ...       // and the code

})()

Please note the usage of parenthesis and curly-bracket, it matters.

Running in place is mostly used when we want to do the job involving local variables. We don’t want our local variables to become global, so wrap the code into a function.

After the execution, the global namespace is still clean. That’s a good practice.

In the above code, we wrap the function so that interpreter consider it as a part of statement. Hence, the Function Expression. If a unction is obviously an expression, then there’s no need in wrapping it, for instance:

var result = function(a,b) { return a+b }(2,2);
alert(result) // 4

We see that the function is created and called instantly. That’s just like var result = sum(2,2), where sum is replaced by a function expression.

Named Function Expression

A function expression may have a name. The syntax is called named function expression (or NFE).

var f = function greet(name) {
    alert("Hello "+name)
}

As we said, a function is a value. Therefore we can invoke the function name (in this case greet).

NFEs exist to allow recursive calls from anonymous functions.

Function Naming

There is popular convention to name a function. A function is an action, so it’s name should be a verb, like get, read, calculateSum, etc.

Short function names can be allowed if:

  • A function is temporary and used only in nearest code. Same logic as with variables.
  • A function is used everywhere in the code. So from the one hand, there is no danger to forget what it does, and from the other hand, you have less writing.The real-world examples are ‘$’, ‘$$’, ‘$A’, ‘$F’ etc. JavaScript libraries use these names to make frequent calls shorter.

In other cases, the name of a function should be a verb or multiple words starting with a verb.

,

About Author

about author

xathrya

A man who is obsessed to low level technology.

4 Comments
  1. Understanding Node Event Loop - Xathrya.ID

    […] is not the case when we execute the code. Remember that Node is using event loop. When we declare anonymous function that print out “World!”, this function is not executed yet. The function is passed in […]

  2. NodeJS Timers - Xathrya.ID

    […] a function to be called when the timeout expires. As in any place in JavaScript, we can pass in an inline function, the name of a function or a variable which value is a […]

  3. NodeJS Low Level File System Operation - Xathrya.ID

    […] we declare a function stored on a variable named “startAppender”. This function starts the appender state (position and file […]

  4. NodeJS Event Emitter - Xathrya.ID

    […] can either pass in an anonymous function (as we are doing here), or a function name for a function available on the current scope, or even a […]

Leave a Reply

Your email address will not be published. Required fields are marked *

Social media & sharing icons powered by UltimatelySocial