Design Patterns In JavaScript - Creational, Part 1

mmmmm, The Design Patterns!

At this article we will talk about interesting topic, the design patterns and how to apply it using JavaScript.

So, What is the mean of design patterns?

In software development, a pattern (or design pattern) is a written document that describes a general solution to a design problem that recurs repeatedly in many projects.

Design patterns also provide us a common vocabulary to describe solutions. This can be significantly simpler than describing syntax and semantics when we're attempting to convey 

a way of structuring a solution in code form to others.

We Will Start With Creational Design Pattern In JavaScript,

Creational Design Patterns are focusing on how to create an object. Basically we can create an object by the following code and this way called Create Object Literal.

var obj = new Object();
var obj2 = {};

The Second Line is preferably because it less typing and less bits so will be transmit faster over the network. The Object will be more useful if we store data on it by using the properties. There are four ways to assign properties to an object.

     1. Use the dot syntax 

var obj = {};
obj.firstName = "Hamed";
obj.lastName = "Farag";

     2. We Can Use Square Brackets,

var obj = {};
obj["firstName"] = "Hamed";
obj["lastName"] = "Farag";

By using use square brackets, it give for us more flexibility,  for example we can use invalid keys or characters for JavaScript identifier.Also we can use space to create new property reserved keyword to create and assign property to an object.

var obj = {};
obj["first Name"] = "Hamed";
obj["last Name"] = "Farag";
obj["new"] = "new";
obj["true"] = "false";

but you typically don't to want do that, if you find yourself use a reserved keyword as a property name, you need to rethink what it is that you are actually doing.

    3. We Can Use Object.defineProperty Method, this introduce with ECMAScript 5 and it accept 3 arguments.
First argument is the object that we want to add to it a property, Second argument the name of property, last argument is a descriptor object for the property, it give a variety options for it (configurable, enumerable, value, writable, get and set).
For Example Value Option for set the value of this property.

var obj = {};
Object.defineProperty(obj,'firstName', {
   value : "Hamed"
});
Object.defineProperty(obj,'lastName', {
   value : "Farag"
});

     4. We Can use Object.defineProperties, define multiple properties on the object, take 2 arguments. First one the object we need to add properties to it. Second argument, is another object the contains multiple descriptor objects.

So, if you want to create properties with a lot of control like (configurable, enumerable, value, writable, get and set), we need to use Object.defineProperties and Object.defineProperty. but if you want to create properties in silent value so two first ways we can use.

var obj = {};
Object.defineProperties(obj, {
    "firstName" : {
        value : "Hamed"
    },
    "lastName" : {
        value : "Farag"
    }
});

We Also sometime need to create an object and contains its data at one step , so it make sense to do everything inside the object literal.

var person = {
   firstName : 'Hamed',
   lastName : 'Farag'
};

ECMAScript 5 introduce a new method called Create, This method for create new object with the specified prototype object and properties.

var obj = Object.create(Object.prototype); // it equal to = {};
var obj2 = Object.create(obj.prototype, {
   name : {
      value : "name"
   },
   sayHello : {
      value : function(){
         alert('Hello, ' + this.name);
      }
   }
});

Object.create method is build a prototype chain, what i mean is that we can apply inheritance using Object.create.