Javascript object

Let's see Javascript Object. We'll see Javascript specific things and something is good to know. Learning test is written using Jasmine. Please refer Jasmine usage which I wrote before if you have interest it. 

1. Object and property
Javascript designed based on object which have simple form. The object is a collection of attributes. Those attribute have its own name and value. They are used to express many behavior and characteristics of object. Javascript variable can save not only value but also function itself, so that javascript can express behavior of object using method like ordinary object oriented language. The attribute can be expressed like below,  

objectName.propertyName

propertyName should be string or something can be converted to string.

	it("object and property", function() {
	var coffee = new Object();
	coffee.name = "Americano";
	coffee.price = 5000;
	coffee["from"] = "Brazil";
	coffee["taste"] = "Aromatic";
	coffee.toString = function() {
	var result = "";
	for (var prop in this) {
	if (coffee.hasOwnProperty(prop)) {
	result += prop + " : " + this[prop] + "\n";
	}
	}
	return result;
	}
	console.log(coffee.toString());
	expect(coffee.toString().search("name : Americano") != -1).toBe(true);
	expect(coffee.toString().search("price : 5000") != -1).toBe(true);
	expect(coffee.toString().search("from : Brazil") != -1).toBe(true);
	expect(coffee.toString().search("taste : Aromatic") != -1).toBe(true);
	expect(coffee.toString().search("toString : function") != -1).toBe(true);
	});

view raw js-learning-objprop.js hosted with ❤ by GitHub

2. Iterate attribute
You can iterates attributes of object using fon-in statement, Object.keys(o), Object.getOwnPropertyNames(o).

	it("enumerating properties in object", function() {
	var myObject = new Object();
	myObject.name = "thinkhard.j.park";
	myObject.age = "unknown";
	myObject.sex = "male";
	myObject.from = "dream factory";
	var propAray = Object.keys(myObject);
	expect(propAray[0]).toBe("name");
	expect(propAray[1]).toBe("age");
	expect(propAray[2]).toBe("sex");
	expect(propAray[3]).toBe("from");
	var propNameAray = Object.getOwnPropertyNames(myObject);
	expect(propNameAray[0]).toBe("name");
	expect(propNameAray[1]).toBe("age");
	expect(propNameAray[2]).toBe("sex");
	expect(propNameAray[3]).toBe("from");
	});

view raw js-learning-enumeratingprops.js hosted with ❤ by GitHub

3. Create object
You can create object using initializer, construct function  or Object.create.

	it("creating object using object initializer", function() {
	var myObject = {"name" : "what is your name?",
	"age" : "how old are you?",
	1 : "number is also possible since it can be converted to string"}
	expect(myObject.name).toBe("what is your name?");
	expect(myObject.age).toBe("how old are you?");
	expect(myObject[1]).toBe("number is also possible since it can be converted to string");
	expect(myObject["1"]).toBe("number is also possible since it can be converted to string");
	});
	it("creating object using a construct function", function() {
	function MyObject(name, age, sex) {
	this.name = name;
	this.age = age;
	this.sex = sex;
	}
	var myObject = new MyObject("thinkhard.j.park", "unknown", "male");
	expect(myObject.name).toBe("thinkhard.j.park");
	expect(myObject.age).toBe("unknown");
	expect(myObject.sex).toBe("male");
	var yourObject = new MyObject("whoareyou", "unknown", "female");
	yourObject.from = "earth";
	expect(yourObject.name).toBe("whoareyou");
	expect(yourObject.age).toBe("unknown");
	expect(yourObject.sex).toBe("female");
	expect(yourObject.from).toBe("earth");
	expect(myObject.from).toBe(undefined);
	})
	it("creating object using the Object.create", function() {
	var Male = {
	character : "always try to find female",
	status : "I'm still single.",
	printStatus : function() {
	return this.status;
	}
	}
	var male1 = Object.create(Male);
	expect(male1.printStatus()).toBe("I'm still single.");
	var male2 = Object.create(Male);
	male2.status = "I'm married";
	expect(male2.printStatus()).toBe("I'm married");
	})

view raw js-learning-createobject.js hosted with ❤ by GitHub

4. Prototype attributes
Every javascript object inherite "prototype" object. So, If you add attribute like [line 14], all instances of Male will have this attribute.

	it("prototype property", function() {
	function Male(character, status){
	this.character = character;
	this.status = status;
	}
	var male1 = new Male("hansome", "good");
	expect(male1.character).toBe("hansome");
	var male2 = new Male("ugly", "bad");
	expect(male2.character).toBe("ugly");
	Male.prototype.type = "human";
	expect(male1.type).toBe("human");
	expect(male2.type).toBe("human");
	})

view raw js-learning-prototypeprop.js hosted with ❤ by GitHub

5. Define getter, setter

	it("defining getter setter", function() {
	var myObject = {
	name : "thinkhard.j.park",
	get gn() {return this.name},
	set sn(n) {this.name = n}
	}
	expect(myObject.name).toBe("thinkhard.j.park");
	expect(myObject.gn).toBe("thinkhard.j.park");
	myObject.sn = "newname";
	expect(myObject.name).toBe("newname");
	});

view raw js-learning-gettersetter.js hosted with ❤ by GitHub

6. Delete attribute

	it("deleting property", function() {
	var myObject = {a:1, b:2};
	expect(myObject.b).toBe(2);
	delete myObject.b;
	expect(myObject.b).toBe(undefined);
	});

view raw js-learning-delprop.js hosted with ❤ by GitHub

7. Compare object

	it("comparing object", function() {
	var myObject1 = {name : "obj"};
	var myObject2 = {name : "obj"};
	expect(myObject1 == myObject2).toBe(false);
	var myObject3 = myObject1;
	expect(myObject1 == myObject3).toBe(true);
	});

view raw js-learning-compareprop.js hosted with ❤ by GitHub

8. Reference

- MDN - https://developer.mozilla.org/en/docs/Web/JavaScript

- Jasmine - http://jasmine.github.io/2.3/introduction.html