JavaScript function declaration, function expression, Function constructor, Anonymous function

December 25, 2012

Function declaration –

function name([param[, param[, ... param]]]) {
   statements
}
example -
function sum(a, b)
{
    return a + b;
}

name – The function name

param – The name of the argument to be passed to the function. A function can have up to 255 arguments.

statements – The body of the function

Function expression and Anonymous function –

function [name]([param] [, param] [..., param]) {
   statements
}
example -
var sum = function(a, b) { return a + b; }

The name can be omitted in which case it becomes anonymous function.
Anonymous functions can help make code more concise when declaring a function that will only be used in one place.

Function constructor –

Function objects can be created with new operator

new Function (arg1, arg2, ... argN, functionBody)

example - 
var sum = new Function('a','b', 'return a + b;');

arg1, arg2, … argN – zero or more names to be used by the function as argument names

functionBody – A string containing JavaScript statements forming the function body.

References
https://developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope

http://helephant.com/2008/08/23/javascript-anonymous-functions/

http://stackoverflow.com/questions/1140089/how-does-an-anonymous-function-in-javascript-work

 

Advertisements

Javascript Object oriented programming

August 22, 2012
  • JavaScript is a prototype-based language which contains no class statement. Instead JavaScript uses functions as classes. Defining a class is as easy as defining a function.
  • An object constructor/object constructor function is a function that’s used to define a new object. In this function, we declare the initial properties/methods of the new object, and usually assign them a pre-defined value.
  • To create an instance of an object, we use the keyword “new”, followed by an object constructor. We can either use JavaScript’s built-in constructors to create a native object, or we can build our own constructors to create a user-defined object.
  • Every object method has a variable – this – which refers to the current instance of that object from which the method is called.

Example

     function Computer(name) {
          this.name=name;
          this.getName=function() {
             return this.name;
          }
     }

     var computer1 = new Computer("Desktop-1");
     alert(computer1.getName());//alerts Desktop-1
     var computer2 = new Computer("Desktop-2");
     alert(computer2.getName());//alerts Desktop-2

References

http://www.sitepoint.com/oriented-programming-1/

https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript


javascript void(0) for HTML link

May 27, 2012

To create a HTML link which does nothing when user clicks it,  use  like below


<A HREF="javascript:void(0)">Click here to do nothing</A>

When the user clicks the link, void(0) evaluates to undefined, which has no effect in JavaScript.

References –

https://developer.mozilla.org/en/JavaScript/Guide/Expressions_and_Operators#void

Here is a stackoverflow.com link, which answers why  void(0)  is better than using #  for this requirement

http://stackoverflow.com/questions/134845/href-for-javascript-links-or-javascriptvoid0


Referencing variables in setTimeout function – Javascript Closures

May 26, 2012

Requirement

– Reference For loop variable i  in setTimeout function

Wrong way

for(var i = 1 ; i <= 10; i++) {
console.log('i in for :: ' + i);
setTimeout(function() {
console.log(' i in timeout :: ' + i);
}, 2000);
}

Ouput

i in for :: 1
i in for :: 2
i in for :: 3
i in for :: 4
i in for :: 5
i in for :: 6
i in for :: 7
i in for :: 8
i in for :: 9
i in for :: 10
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11
i in timeout :: 11

Right way using Closures

for(var i = 1 ; i <= 10; i++) {
console.log('i in for :: ' + i);
setTimeout(function(j) {
return function() {
console.log(' j in timeout :: ' + j);
}
}(i), 2000);
}

Ouput

i in for :: 1
i in for :: 2
i in for :: 3
i in for :: 4
i in for :: 5
i in for :: 6
i in for :: 7
i in for :: 8
i in for :: 9
i in for :: 10
j in timeout :: 1
j in timeout :: 2
j in timeout :: 3
j in timeout :: 4
j in timeout :: 5
j in timeout :: 6
j in timeout :: 7
j in timeout :: 8
j in timeout :: 9
j in timeout :: 10

References  –
http://jibbering.com/faq/notes/closures/

https://developer.mozilla.org/en/JavaScript/Guide/Closures


javascript undefined, null, undefined property, 0, false, ”, ==, ===, typeof

March 22, 2012

== Equals

If the two operands are not of the same type, JavaScript converts the operands then applies strict comparison.

=== Strict equal

Returns true if the operands are strictly equal  with no type conversion.

typeof

The typeof operator returns a string indicating the type of the unevaluated operand.

typeof undefined === ‘undefined’

undefined

A variable that has not been assigned a value is of type undefined.

false

Examples of expressions that can be converted to false are those that evaluate to null, 0, the empty string (“”), or undefined.

null

null is an object. It’s type is null. Null and Undefined types are == (but not ===)

Undeclared variable

  1. /* var z*/
  2. z.x  // throws a ReferenceError

Check for undefined variable

  1. var x;
  2. if (x === undefined) {
  3.    // these statements execute
  4. }
  5. else {
  6.    // these statements do not execute
  7. }

check for undeclared variable

  1. // x has not been defined before
  2. if (typeof x === ‘undefined’) { // evaluates to true without errors
  3.    // these statements execute
  4. }
  5. if(x === undefined){ // throws a ReferenceError
  6. }

check for object property

  1. var myobj = {‘a’:’a’};
  2. myobj.hasOwnProperty(‘a’) // true
  3. var myobj2 = Object.create(myobj);
  4. myobj2.hasOwnProperty(‘a’) //false
  5. ‘a’ in myobj2 // true

check for null

  1. var c = null
  2. if (c === null) { // true
  3. }

References

http://saladwithsteve.com/2008/02/javascript-undefined-vs-null.html

http://constc.blogspot.com/2008/07/undeclared-undefined-null-in-javascript.html

http://www.mapbender.org/JavaScript_pitfalls:_null,_false,_undefined,_NaN

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/undefined

https://developer.mozilla.org/en/JavaScript/Reference/Operators/Comparison_Operators

https://developer.mozilla.org/en/JavaScript/Reference/Operators/typeof

http://www.nczonline.net/blog/2010/07/27/determining-if-an-object-property-exists/


XMLHTTP AJAX abort(), jQuery abort()

March 10, 2011

I was looking if there was a way to stop an already running AJAX request, like we can stop an http request using browser stop button. Yes there is a way to stop it using abort() method of the XMLHttpRequest object . More details about this here http://www.quirksmode.org/blog/archives/2005/09/xmlhttp_notes_a_1.html


Javascript javadoc – JSDoc

March 4, 2011

I was looking if there was any standards for writing Javascript API documentation and if there is a tool to parse and generate the document.

I found one which does this http://jsdoc.sourceforge.net/, seems like it solves the purpose I am looking for, have to try it out.