JavaScript Secrets

Intro

Over the last few years, JavaScript has become an increasingly important Web Development language. Several Libraries and frameworks have been created by leveraging the functional nature of the language to simulate Object Oriented properties intrinsic to more robust languages like Java and C++. (For those who still think Java and JavaScript are similar here’s a great analogy: JavaScript is to Java like hamburger is to ham)

More about Functions

In order to be very good in JavaScript, it is very important to have a good grasp of Functions. Unlike most other languages JavaScript Functions are “first class objects”. This means that Functions can:

  • have methods and properties
  • be assigned to variables, array members or properties of other objects
  • be passed as arguments in other functions
  • be returned as values from other functions

Code samples of Functions

// assigning value to a function
var value1 = function() { return true};

//function as argument in a method call
document.addEventListener("click", function(){
    //do something cool here
    }, false);

// returning a function
function myFun () {
   var nbr = 0;
   return function (){
      var nbr2 = nbr + 2;
   };
}
  • Functions are first class objects they can be created vis literals, assigned to variables, passed as parameters, returned as function results, possess properties and methods
  • Passing a function as a parameter usually involves anonymous functions. Yes, functions can either have a declared name or no name at all
  • Each function invocation is assigned two implicit parameters: arguments and this. The arguments parameter is an “array like” collection of the function’s arguments, it is similar to an array since it has a length property and can be iterated with a for loop, however the data type is object not array.
  • Functions can be invoked via the apply() and call() methods, this allows us to change the context i.e value of this parameter
  • variables in a function are in scope from declaration point to end of the function (n.b declaring a variable with var makes it declared but not defined within that function before it’s defined, so it will be type undefined)
  • Inner named functions are in scope throughout the function enclosing them, even before being defined( this is called hoisting)
//function's name is myName
function myName (arg1, arg2){
// do something here
return value1

}
// function is anonymous has no name
function (arg1, arg2){
// do something here
return value2
}

<script>
	function assert (value, desc) {
		var li = document.createElement("li");
		li.className = value ? "pass" : "fail";
		li.appendChild(document.createTextNode(desc));
		document.getElementById("results").appendChild(li);
		}

		window.onload = function(){
			assert(true, "The test suite is running yay!");
			assert(false, "Fail");
		};
</script>
// css for the assert test function
<style>
	#results li.pass { color: green;}
	#results li.fail { color: red;}
</style>
// HTML for the assert test function
<body>
        <ul id="results"></ul>
</body>