JavaScript Object Definition- In JavaScript, everything is basically an Objects.
All values except primitive values are objects.
Examples of primitive values are: strings(“XYZ”), numbers (1,2,3), true, false, null and undefined.
A JavaScript variable can contain only one value.
var redfruit = "Apple";
Objects are also variables, but an object can contains many values.
An object can be written as a name:value pair, separate by colon(:)
<!DOCTYPE html>
<html>
<body>
<p>Create an object</p>
<p id="text"></p>
<script>
var category= {
type:"Clothes",
cat:"Women cloths",
sub_cat:"Winter wear",
getCategoryName:function() {return this.cat;}
};
document.getElementById('text').innerHTML = category.getCategoryName();
</script>
</body>
</html>
Name value of an object is object properties.
In above object “category”, the name values i.e. type, cat and sub_cat are object properties.
Object Methods are an actions that can be perform by an Object. An object method is a property having a function definition.
In above example, category object getCategoryName is an object method.
In next chapters, you will learn more about object properties and object methods.
There are many ways to create a JavaScript Object.
This is a very simple way to create a JavaScript Object. Using this method you can define and create object in single statement.
<!DOCTYPE html>
<html>
<body>
<p>Create an object</p>
<p id="text"></p>
<script>
var category= {type:"Clothes", cat:"Women cloths", sub_cat:"Winter wear", getCategoryName:function() {return this.cat;}};
document.getElementById('text').innerHTML = "This category is for "+ category.sub_cat;
</script>
</body>
</html>
Space, tabs and new lines are not important. An object definition can be on multiple lines.
<!DOCTYPE html>
<html>
<body>
<p>Create an object</p>
<p id="text"></p>
<script>
var category= {
type:"Clothes",
cat:"Women cloths",
sub_cat:"Winter wear"
};
document.getElementById('text').innerHTML = "This category is for "+ category.sub_cat;
</script>
</body>
</html>
You can create a new object using a new keyword as shown in below example.
<!DOCTYPE html>
<html>
<body>
<p id="text"></p>
<script>
var category= new Object();
category.type = "Clothes";
category.cat:"Women cloths";
category.sub_cat:"Winter wear";
document.getElementById('text').innerHTML = "This category is for "+ category.sub_cat;
</script>
</body>
</html>
Both above examples do same things, hence it is good to use first notation.
There are few limitations with create an object using above methods. You can create only one object using it.
There is possibility two have more than one object with same type.
In the below code, Vehicle is object constructor. Once you have a object constructor, you can create a new object from it using new keyword same way as you have seen above.
<!DOCTYPE html>
<html>
<body>
<p id="text"></p>
<p id="text1"></p>
<script>
function Vehicle(make, model, mfgyear, color) {
this.make = make;
this.model = model;
this.mfg_year = mfgyear;
this.color = color;
}
var car = new Vehicle('Audi', 'A4', '2009', 'Red');
var van = new Vehicle('Toyota', 'Auris', '1997', 'White');
document.getElementById('text').innerHTML = "Car make & model : "+ car.make + ' ' + car.model;
document.getElementById('text1').innerHTML = "Van make & model : "+ van.make + ' ' + van.model;
</script>
</body>
</html>
this is an object which refers current object or own object.
So when this is used within function, this refers to current function .
When this is used within object, this refers to current object itself.
this is not a variable, so it is not possible to change its value or assign value.
There are many built-in JavaScript constructors.
<!DOCTYPE html>
<html>
<body>
<p id="text"></p>
<script>
var x1 = new Object();
var x2 = new String();
var x3 = new Number();
var x4 = new Boolean();
var x5 = new Array();
var x6 = new RegExp();
var x7 = new Function();
var x8 = new Date();
document.getElementById("text").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>" +
"x8: " + typeof x8 + "<br>";
</script>
</body>
</html>
Objects are addressed by reference , and not by value. If car is an object, below statement will not create a copy of person.
<!DOCTYPE html>
<html>
<body>
JavaScript objects addresses by reference. Changes to copy of an object applies to original object as well.
<p id="text"></p>
<script>
function Vehicle(make, model, mfgyear, color) {
this.make = make;
this.model = model;
this.mfg_year = mfgyear;
this.color = color;
}
var car = new Vehicle('Audi', 'A4', '2009', 'Red');
var newcar = car;
newcar.color = "White";
document.getElementById('text').innerHTML = "Car color is "+ car.color;
</script>
</body>
</html>