Ehsan Ghanbari

Experience, DotNet, Solutions

Object Literals and benefits in java scripts

JavaScript, by default does not come with built-in namespace or class but as it's extremely a flexible language you can create namespace in JavaScript by object literals. Based on wikipedia definition "literal is a notation for representing a fixed value in source code."  you can simply create Object literal by using: 

  1. A colon which separates the property name from value.
  2. A comma which separates each name and value pair from the next.

 

For example:

  1. var myInfo = {
  2.     Name: "Ehsan",
  3.     Age: 25,
  4.     Job: "Developer"
  5. };
  6.  

You can also define nested object literal like this:

var myInfo = {

  1. Info1:{
  2.     Name: "Ehsan",
  3.     Age: 25,
  4.     Job: "Developer" 
  5.     }, 
  6. Info2:{
  7.     Website:"ehsanghanbari.com",
  8.     Mail:"mails@ehsanghanbari.com"
  9.     }
  10. };

Object literals makes for good code organization, means of encapsulating data, enclosing it in a tidy package to minimize the use of global variables which can cause problems when combining code. Imagine if you wanted to write all of the code above in your functions, it would be something like stars war!

By using object literal there is no need to invoke constructors directly or maintain the correct order of arguments passed to functions and unobtrusive event handling.

Rather than static values, object literal could contain kinds of value, such as attribute, array or function:

  1. Var obj={
  2.         Title: "a good title",
  3.         Books: ["JavaScript", "Domain Driven Design"],
  4.         order:  function() {console.log("blah blah");
  5.            }
  6. }

 

In comparison to constructor, constructors need to be executed so it will be slower. But object literals need to be parsed (defined) in loading the script.

Note: When you define object as literal, you build the object by code; so  if you use this keyword it will no meaning because it's not exist yet.



Prototypes in JavaScript

JavaScript is a prototypical based language. In JavaScript objects are pairs of keys and values and these keys are Strings. Rather than keys and values, JavaScript objects have one another attribute called prototype which is a pointer to another objects . prototype property allows you to add properties and methods to an object.

 In regular form We can add a property to an object using Object.defineProperty like this:

  1. var obj = new Object.create(null);
  2. Object.defineProperties(obj, 'Name', { age: "24", propertyIsEnumerable: true });
  3.  

But in inheritance, JavaScript only has one construct: objects and each object has an internal link to another object called prototype. It is a prebuilt object that simplifies the process of adding custom properties and methods to all instances of an object. You can add a prototype to an existing function:

  1. function Person(name, family) {
  2.     this.name = name;
  3.     this.family = family;
  4. }
  5.  
  6. var obj = new Person("ehsan", "Ghanbari");
  7. obj.prototype.age = "23";

Functions can be used to create class-like functionality in JavaScript; and all functions have a prototype property. Prototype is actually an instance of an object and every function in JavaScript has one whether you use it or not(like constructor in C#). Here is an another example of using prototype:

  1. function Car(color,model) {
  2.     this.color = color;
  3.     this.model = model;
  4. }
  5. Car.prototype.manufacturer = 'hunda';
  6.  
  7. var santafe = new Car("white", "new");

 

Read more:

  1. http://yehudakatz.com/2011/08/12/understanding-prototypes-in-javascript/
  2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

 



JavaScript Variables

Variables store information so that it can be used later! Like many other programming languages, JavaScript has variables. JavaScript variables can hold a value of any data type. A variable's value can change during the script.

  1. Var name;
  2. Var age;
  3. Var x,y,z;

Note: If you try to assign a value to a non-existent variable, JavaScript will create the variable for you.

You can refer to a variable by name to see its value or to change its value. The value type of a variable can change during the execution of a program and JavaScript takes care of it automatically.

Note: JavaScript variable names are case sensitive. And it's better to start with a letter or underscore "_".

 

Variable Scope

Local Variables:

For example parameters of a function is always local to the same function:

  1.  function sample( name, family) {
  2.         name = "ehsan";
  3.         family = "ghanbari";
  4.     }
local variables are available only within the section of code in which they were defined

 

Global variable:

A global variable has global scope which means it is defined everywhere in your JavaScript code. Take a look at the this example:

  1. var culture = "something";                       
  2. function sample( ) {
  3.    base.culture = "base culture";                          
  4.    return null;
  5. }
  6.  
  7. function sample2() {
  8.    var localVar="this culture";                    
  9.    return null;
  10.  
  11. }

Definitely the variable in  sample is global (because of base) and the one in sample2 is local.

 

 

Read more:

  1. http://www.tutorialspoint.com/javascript/javascript_variables.htm
  2. http://webcheatsheet.com/javascript/variables.php



About Me

Ehsan Ghanbari

Hi! my name is Ehsan. I'm a developer, passionate technologist, and fan of clean code. I'm interested in enterprise and large-scale applications architecture and design patterns. I spend a lot of time on software architecture. Since 2008, I've been as a developer for different companies and organizations and I've been focusing on Microsoft ecosystem all the time. During the past years, Read More

Post Tags
Pending Blog Posts
using Elmah in asp.net MVC4
Using FluentSecurity in MVC
Strategic design
Factory Pattern
time out pattern in ajax
Redis as a cache server
How to use PagedList In asp.net MVC
Multiple submit buttons in asp.net MVC
Domain driven design VS model driven architecture
What's the DDD-lite?