Sunday, January 10, 2016

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();

No comments:

Post a Comment