Javascript Object

Javascript Object.js

//http://javascriptissexy.com/javascript-objects-in-detail/

//everything in javascript is objects.
//except number, strings & boolean
//objects are key/value pairs
//anything ends with () is a function
//in that way; new Object() is also a function
//and it has methods like create()
// and hasOwnProperty()

//simple example
var obj = {
    name: "Mah",
    printName: function() {
        console.log(this.name);
    }
};

//to add more methods or variables
obj.anotherMethod = function() {
    alert(this.name)
};

obj.anotherVariable = "Siri";

//ways of creating an Object

//way 1
//object literal
var mango = {}; //plain paranthesis

//way2
//object constructor
var mango = new Object();

//way3
var mango = Object.create(null);

//way4
//creating obj from another obj
var someOtherObject = {}; //empty or non empty
var mango = Object.create(someOtherObject);

//Access Properties on an Object

//way1
obj.name;
obj.printName();

//way2
//quotes are important

obj["name"];
obj["printName"]();

//########should learn more#########
//on hasownproperty

//iterate all the properties
for (item in obj) {
    //list all property name
    console.log(item);

    //list all values
    // not dotation doesnt work
    //as item is a refernce variable
    //we cannot use obj.item

    console.log(obj[item]);
}

//incase if you want to create 100 or more objects
//for example
//every fruit has a color, size, benefits
//if we start creating object, it will end up like

var mango = {
    color: "yellow",
    shape: {
        diameter: 10,
        height: 20,
        radius: function() {
            return this.diameter / 2
        }
    }
};

//example apple
var apple = {
    color: "red",
    shape: {
        diameter: 8,
        height: 22,
        radius: function() {
            return this.diameter / 2
        }
    }
}

//every object has three more invisible properties

//— Configurable Attribute: Specifies whether the property can be deleted or changed.

//— Enumerable(countable): Specifies whether the property can be returned in a for/in loop.
//incase a property of an object is set to enumerable:false
//it doesnt show up in the for...in loop or Object.keys() method
Object.keys(apple);
//prints: ["color", "shape"]
Object.keys(apple.shape);
//prints:["diameter", "height", "radius"]

//to hide any property or method from object while for..in
//simply

Object.defineProperty(apple, 'newProperty', {
    value: 'round',
    enumerable: false
});
Object.keys(apple);
//prints:["color", "shape"]
//it doesnt print the newly created property
//as it emumerable property is set to false

//Object.keys() vs for...in
//the difference being that a for-in loop enumerates properties in the prototype chain as well

//— Writable: Specifies whether the property can be changed.

//creating objects is tedious to do

//in order to generate objects dynamically, we have 
// constructor(just normal function) function like below
//everytime you call that fn, it creates an object for us.
//thus object creation becomes easy

//way1
//we call it constructor pattern
function Fruit(parameterColor, parameterDiameter, parameterHeight) {
    this.color = parameterColor;
    this.shape = {
        diameter: parameterDiameter,
        height: parameterHeight,
        radius: function() {
            return this.diameter / 2
        }
    };
}

//now we have defined the function
//let us create objects now

var mango = new Fruit("yellow", 10, 20);
var apple = new Fruit("red", 8, 22);


//way2
//we call it prototype pattern
// function Fruit(parameterColor, parameterDiameter, parameterHeight) {

// }
// Fruit.prototype.color = "red";
// Fruit.prototype.shape = {};
// Fruit.prototype.shape.diameter = 10;
// Fruit.prototype.shape.height = 20;
// Fruit.prototype.shape.radius = function() {
//     return this.diameter / 2
// }

// //##-------------------------------##

function Fruit() {

}
Fruit.prototype.color = "red";
Fruit.prototype.shape = {};
Fruit.prototype.shape.diameter = 10;
Fruit.prototype.shape.height = 20;
Fruit.prototype.shape.radius = function() {
    return this.diameter / 2
}

var mango = new Fruit();

//do not use "new" keyword
//############--------###########
function Fruit() { //a constructor function
    this.color = "red";
}
var newFruit = Object.create(Fruit);
//prints empty object
//because Fruit is a function and not a object
//object.create accepts only object as input

//now
Fruit.prototype.addColor = "red";
var newFruit = Object.create(Fruit.prototype);
//prints {addColor: "red"}
//typeof Fruit is "Function
//typeof Fruit.prototype is "Object"
//and that is the reason, the above example works



//Deleting properties of an object
var christmasList = {
    mike: "Book",
    jason: "sweater"
}
delete christmasList.mike; // deletes the mike property​

// you may delete the properties of an object, but not that object
delete christmasList; // does not work



// explanation more from mozilla
//Objects created with syntax constructs

var o = {
    a: 1
};

// The newly created object o has Object.prototype as its [[Prototype]]
// o has no own property named 'hasOwnProperty'
// hasOwnProperty is an own property of Object.prototype. 
// So o inherits hasOwnProperty from Object.prototype
// Object.prototype has null as its prototype.
// o ---> Object.prototype ---> null

var a = ["yo", "whadup", "?"];

// Arrays inherit from Array.prototype 
// (which has methods like indexOf, forEach, etc.)
// The prototype chain looks like:
// a ---> Array.prototype ---> Object.prototype ---> null

function f() {
    return 2;
}

// Functions inherit from Function.prototype 
// (which has methods like call, bind, etc.)
// f ---> Function.prototype ---> Object.prototype ---> null