Javascript Series for Beginners - Objects

Introduction:

In this post we will talk about how to handle javascript objects.

On the bottom of this post you will find a jsbin that you can use to play with the code snippets below.
This post was inspired by this book: "Javascript: The good parts" by Douglas Crockford

How to create new objects:

	var flight = {
	airline: "Oceanic",
	number: 815,
	//you can have nested objects
	departure: {
	IATA: "SYD",
	time: "2004-09-22 14:55",
	city: "Sydney"
	},
	arrival: {
	IATA: "LAX",
	time: "2004-09-23 10:42",
	city: "Los Angeles"
	}
	};
	var name;
	console.log("Here are the properties of my brand new object:");
	for(name in flight){
	console.log(name);
	}

view raw creation_and_handling_of_objects.js hosted with ❤ by GitHub

	//------------------- How to retrieve object properties -----------------------------
	console.log(flight.airline); //"Oceanic"
	console.log(flight["airline"]); //"Oceanic"
	console.log(flight.departure.IATA); //"SYD"
	console.log(flight["departure"]["IATA"]); //"SYD"
	//------------------- How to provide default values ---------------------------------
	var status = flight.status || "unknown";
	//------------------ How to guard against "undefined" throwing TypeError ------------
	flight.equipment && flight.equipment.model
	//----------------- How to update an object -----------------------------------------
	flight.ariline = "Spirit Airlines";
	console.log(flight.airline);
	//if property does not exist, it will be added, this is called object augmentation
	flight.equipment = {
	model: 'Boeing 777'
	};
	flight.status = 'overdue';
	console.log("Here is my updated flight: " + flight);

view raw handling_properties.js hosted with ❤ by GitHub

How to use inheritance:

Prototype is the mechanism by which objects in javascript inherit properties from other objects.

The prototype link is only used in retrieval. If we look up a property that does not exist in the current object, the prototype link will be used to go up the chain looking if any of the parents has it.

Adding a new property to the parent object will cause to appear in the children but not the other way around.

Reflection and property deletion:

Deleting a property from the child does not impact the parent but it is true the other way around.
Also if you delete a property from the child and the parent has the same property, the parent's value will shine through.

	//Reflection
	//"typeof" does it for you
	console.log(typeof flight.number); // 'number'
	console.log(typeof flight.arrival); // 'object'
	console.log(typeof flight.manifest); // 'undefined'
	console.log(typeof flight.toString); // 'function'
	console.log(typeof flight.constructor); // 'function'
	/*
	If you would like to access an object property and want the value of the child not the parent's, you can use "hasOwnProperty"
	*/
	console.log(flight.hasOwnProperty('number')); // true
	console.log(flight.hasOwnProperty('constructor')); // false
	//How to delete an object property:
	delete flight.arrival
	console.log(flight);

view raw reflection_and_deletion.js hosted with ❤ by GitHub

Global scope problem:

One of the big downsides of javascript is that it throws all the objects in the global scope, one way to work around this, is to create a variable that will offer a new scope for your objects and prevent them from conflicting with objects from other applications and librairies.

	APP.flight = {
	airline: "Oceanic",
	number: 815,
	//you can have nested objects
	departure: {
	IATA: "SYD",
	time: "2004-09-22 14:55",
	city: "Sydney"
	},
	arrival: {
	IATA: "LAX",
	time: "2004-09-23 10:42",
	city: "Los Angeles"
	}
	};

view raw global_scope_issue.js hosted with ❤ by GitHub

Your Lab: 

Feel free to play with the code here.