Skip to main content

The Basics of Object-Oriented JavaScript

What is the difference between undefined value and null value?

undefined means a variable has been declared but has not yet been assigned a value. On the other hand, null is an assignment value. It can be assigned to a variable as a representation of no value.
Also, undefined and null are two distinct types: undefined is a type itself (undefined) while null is an object.
Unassigned variables are initialized by JavaScript with a default value of undefined. JavaScript never sets a value to null. That must be done programmatically.
 "undefined" is not a reserved word in JavaScript.
undeclared variables don't even exist
undefined variables exist, but don't have anything assigned to them
null variables exist and have null assigned to them
//eg:
undeclaredVariable = 1;  //undeclared, when a variable doesn't use var keyword
var x = {}; // empty object
var u; // declared, but undefined
var n = null; // declared, defined to be null
undeclaredVariable = 1;  //undeclared, when a variable doesn't use var keyword
var declaredVariable = 1;
//eg:
var variable;
if (typeof(variable) !== "undefined") {
  console.log('variable is not undefined');
} else {
  console.log('variable is undefined');

}

1.Create an Object function myObject(){ }; 2.Defining Methods and Properties Constructor version: function myObject(){ this.iAm = 'an object'; this.whatAmI = function(){ alert('I am ' + this.iAm); }; }; Literal version: var myObject = { iAm : 'an object', whatAmI : function(){ alert('I am ' + this.iAm); } } There is also a difference between the way these two types of object declarations are used. To use a literally notated object, you simply use it by referencing its variable name, so wherever it is required you call it by typing; myObject.whatAmI(); With constructor functions you need to instantiate (create a new instance of) the object first; you do this by typing; var myNewObject = new myObject(); myNewObject.whatAmI();

// Javascript code style guide 1.Variables, functions, properties methods: // Good var thisIsMyName; var anotherVariable; var aVeryLongVariableName; Methods: // Good function getName() { return myName; } // Bad: Easily confused with variable function theName() { return myName; } Constants: // Good eg: // Changing this value will be problem var MAX_COUNT = 10; var URL = "http://www.mydomain.net/"; if (count < MAX_COUNT) { doSomething(); } Global References: // Note: Specify about below declaration,where they are used var globalPreferedMode = false; var globalUserPreferenceArr = []; // Array used to compare with preference cols of trade grid while applying preferences 2. Single line comments: eg: // Good if (condition) { // if you made it here, then all security checks passed allowed(); } eg: // Good var result = something + somethingElse; // somethingElse will never be null Multiline comments: eg: // Good if (condition) { /* * if you made it here, * then all security checks passed */ allowed(); } eg: // Bad: Don't use multiline comments for trailing comments var result = something + somethingElse; /*somethingElse will never be null*/ 3. Constructors: // Good function Person(name) { this.name = name; } Person.prototype.sayName = function() { alert(this.name); }; var me = new Person("Raja"); 4. Literal Values: // Valid JavaScript var name = "Sencha says, \"Hi.\""; // Also valid JavaScript var name = 'Sencha says, "Hi"'; // Good var longString = "Here's the story, of a man " + "named Brady."; Numbers: // Integer var count = 10; // Decimal var price = 10.0; var price = 10.00; 5.using NULL? // Good var person = null; // Good function getPerson() { if (condition) { return new Person("Sencha"); } else { return null; } } // Good var person = getPerson(); if (person !== null) { doSomething(); } // Bad: Testing against uninitialized variable var person; if (person != null) { doSomething(); } // Bad: Testing to see whether an argument was passed function doSomething(arg1, arg2, arg3, arg4) { if (arg4 != null) { doSomethingElse(); } } 6. Using Undefined: // Bad var person; console.log(person === undefined); //true // foo is not declared var person; console.log(typeof person); //"undefined" console.log(typeof foo); //"undefined" // Good var person = null; console.log(person === null); //true 7. Object Literals: // Bad var book = new Object(); book.title = "Maintainable Sencha Code"; book.author = "Sencha EXTJS"; // Good var book = { title: "Maintainable Sencha Code", author: "Sencha" }; 8. Array Literals: // Bad var colors = new Array("red", "green", "blue"); var numbers = new Array(1, 2, 3, 4); // Good var colors = [ "red", "green", "blue" ]; var numbers = [ 1, 2, 3, 4 ]; 9.Line Length Line length is less frequently found in JavaScript style guidelines, but Crockford’s Code Conventions specifies a line length of 80 characters. I also prefer to keep line length at 80 characters. 10. Equality Equality in JavaScript is tricky due to type coercion. Use of === and !== is recommended by Crockford’s Code Conventions // Null and undefined console.log(null == undefined); // true console.log(null === undefined);// false // The number 5 and string 5 console.log(5 == "5"); // true console.log(5 === "5"); // false 11. Primitive Wrapper Types There are three primitive wrapper types: String, Boolean, and Number. Each of these types exists as a constructor in the global scope and each represents the object form of its respective primitive type. The main use of primitive wrapper types is to make primitive values act like objects, for instance: // Bad var name = new String("Raja"); var author = new Boolean(true); var count = new Number(10);

Comments

Popular posts from this blog

ExtJS - Grid panel features

What can we do with ExtJS GridPanel? I have to develop a lot of applications in my web app and I see that grid component of ExtJS may fit in. However, I am not aware of what all things I can do with the - off the shelf available framework pieces - available plug-ins in the marketplace and - custom development through my own developers This is a typical question that we hear from the business users who wants to design an application by keeping the framework’s capability in perspective. In this article I have tried to put the list of stuff you can do with grid and hopefully that shall enable you to take advantage of the beauty of ExtJS. Pre-requisites This article assumes that you are familiar with basics of ExtJS What are the available options? In this section I will be taking you through some of the commonly seen usage of ExtJS grid panel. While covering all the capabilities of grid may not be possible, I am sure it will be helpful for the business users who want to

Ext4 Apply Store Filtering

In extjs4.1: There are many way for store filtering . Some of code i give here Filtering by single field: store . filter ( 'eyeColor' , 'Brown' );   Alternatively, if filters are configured with an  id , then existing filters store may be  replaced by new filters having the same  id . Filtering by single field: store . filter ( "email" , /\.com$/ );   Using multiple filters: store . filter ([ { property : "email" , value : /\.com$/ }, { filterFn : function ( item ) { return item . get ( "age" ) > 10 ; }} ]);   Using  Ext.util.Filter  instances instead of config objects (note that we need to specify the root config option in this case): store . filter ([ Ext . create ( ' Ext.util.Filter ' , {   property : "email" , value : /\.com$/ , root : 'data' }),   Ext . create ( ' Ext.util.Filter ' , {   filterFn : function ( item ) {   return item . get ( &

EXT JS 4: EMPTY VALUE IN A COMBOBOX

EXT JS 4: EMPTY VALUE IN A COMBOBOX Often, in an Ext JS combobox, it is difficult to go back to an empty value once you have selected an item, particularly if “forceSelection” is set to true.  Here is my roundup of alternative solutions found from around the web… 1. Override beforeBlur The solution from   http://www.sencha.com/forum/showthread.php?182119-How-To-Re-Empty-ComboBox-when-forceSelection-is-Set-To-TRUE  overrides beforeBlur on the combbox to clear out lastSelection.  Here is a copy of the override from the thread: 1 2 3 4 5 6 7 8 9 10 11 12 13 Ext.create( 'Ext.form.field.ComboBox' , {      ...      allowBlank: true ,      forceSelection: true ,      beforeBlur: function (){          var value = this .getRawValue();          if (value == '' ){              this .lastSelection = [];          }          this .doQueryTask.cancel();         this .assertValue();      } }); Or to apply the o