Intro to Custom JavaScript Objects

EasyProgramming.net tutorial on custom javascript objects

by Nazmus Nasir

HTML

<!-- JavaScript Objects - Intro to Custom JavaScript objects #38 -->
<p>
Welcome to the 38th Easy JavaScript tutorial, part of <a href="http://www.easyprogramming.net">EasyProgramming.net</a>. Let's learn about creating custom JavaScript objects!
</p>
<p>
Objects follow the JSON format. They are encased in curly braces and can contain strings, numbers, boolean, arrays, other objects, null, and custom functions known as methods. The data within the object is separated by commas (like array items). 
</p>

<h2>
Syntax of an object:</h2>

<p>
<code><pre>
var person = {
        "id" : "1",
        "name" : "Nazmus",
        "title" : "Developer",
        "social" : {
            "website" : "EasyProgramming.net",
            "facebook" : "facebook.com/EasyProgrammingNet"
        }
        method1 = function(){
            //write what method1 does
        }
    };
  </pre>
</code>
</p>
<h2>
Reading Object Data
</h2>
<code>
  <pre>person.name</pre>
  <pre>person.social.website</pre>
  <pre>person['title']</pre>
</code>
<p>
<h2>
Let's practice:</h2>
<span id="output">___</span>
<br /><br />

JavaScript

var myPhone = {
		brand : 'Samsung',
    'model' : 'S7',
    'os' : 'Android',
    color : {
    		front : 'Black',
        'back' : 'White'
    },
    makeCall : function(){
    		//Code to dial number
        return "RING RING";
    }
}

console.log(myPhone.brand);
console.log(myPhone.color.front);
console.log(myPhone.makeCall());

myPhone.color.front = 'White';

console.log(myPhone.color.front);