JavaScript Function: Introduction

My previous article covered 1 out of 2 important concepts in JavaScript: Object. In this article, I will cover Function.

Function, in any programming language including JavaScript, contains a set of statements (or contains code) that will be executed when the function is invoked.

In JavaScript, functions are first-class object; they can have properties (those key-value pairs) just like object as well. The thing that separates function with object is that function can be executed (as it contains code).

Here's the defining characteristics of function:

• has properties just like object
• executable
• has an internal property [[Call]]
• internal properties are not exposed to the public in any way
• Because of [[Call]] internal property, typeof operator knows this is a function

There are 2 forms of function in JavaScript: function declaration and function expression.

Function Declaration

function print_car(car){
  console.log("Car Make: " + car.make);
  console.log("Car Model: " + car.model);
}
var car = { make: "Honda", model: "Civic" };
print_car(car);

Rule for function declaration:

• function name (e.g.: print_car) is required
• function starts with { and ends with }
• semicolon to terminate the function declaration is not needed
• function parameter (e.g.: car) is optional

Function Expression

var display = function(car){
  console.log("Car Make: " + car.make);
  console.log("Car Model: " + car.model);
};

var car = { make: "Honda", model: "Civic" };
display(car);

Rule for function expression:

• function name is optional (although recommended)
• function starts with { and ends with }
• semicolon must exists after the closing curly braces (})
• function parameter (e.g.: car) is optional
• function is to be stored to a variable for referencing purpose

The above function (created using the function expression technique) is also known as anonymous function: you cannot refer to the function itself, you can only refer to the function via the variable that holds the function.

Notice that the function is stored in a variable. This is doable in JavaScript because a function is an object. Since we can store a reference to an object in a variable, we can do the same with function as well: storing a reference to a function in a variable.

Function Return Value

In JavaScript, function always have a return value. This could be confusing or even weird when compare to other programming languages like Java/C/C++/C#. The above examples returns undefined:

var returnValue = print_car({ make: "Honda", model: "Civic" });
console.log(returnValue); // this will print "undefined"

If the last statement of the function is a return keyword followed by a variable or literal value, then the function will return the value of the variable or the literal value itself.

function add(left, right){
  return left + right;
};
var result = add(1,2); // should return 3

Function as Object method
If a function is a property of an object, the function is now known as a method object.

var car = {
  make: "Honda",
  model: "Civic",
  display: function display(){
     // this refers to the current object: car
     console.log("Car Make: " + this.make);
     console.log("Car Model: " + this.model);
  };
};

car.display();