javascriptTutorials: Javascript-12-Datatype Object object

Object object

written with curly braces.

seperated by commas.

written as name:value pairs. Example of object with 4 properties:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue", fullName : function() {return this.firstName + " " + this.lastName;};

Access Object properties in code. Example:

objectName.propertyName

ie, person.firstName; (or) person["firstName"];

Access Object functional property in code. Example:

Refer Example(Object) below:

objectName.methodName()

ie, name = person.fullName ();

(or) name = person.fullName ;

Adding property to an object in code. Example:

objectName.newPropertyName ="newPropertyValue"

ie, person.city = "california";

Deleteing property from object in code. Example:

delete objectName.newPropertyName;

ie, delete person.city; (or) delete person["city"];

--------------------------------------------------

Example(Object)
<html>
<body>
<p><b>Object Function Call Demo</b></p>
-----------------------------------<br>
<b>ACCESS function with "()"</b>
<p id="demo1"></p>
-----------------------------------<br>
<b>ACCESS function without "()"</b>
<p id="demo2"></p>

<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};

document.getElementById("demo1").innerHTML = person.fullName();
document.getElementById("demo2").innerHTML = person.fullName;
</script>
</body>
</html>

O/P:

Object Function Call Demo
-----------------------------------
ACCESS function with "()"

John Doe
-----------------------------------
ACCESS function without "()"

function () { return this.firstName + " " + this.lastName; }

--------------------------------------------------

SORTING : sort() an object, USING compare function

sort() an Object array (wrt Integer properties)

var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}];

cars.sort(function(a, b){return a.year - b.year});

//sorting wrt year in ascending order.

sort() an Object array (wrt String properties)

cars.sort(function(a, b){
    var x = a.type.toLowerCase();
    var y = b.type.toLowerCase();
    if (x < y) {return -1;}
    if (x > y) {return 1;}
    return 0;
});//sorting wrt String properties in ascending order.

--------------------------------------------------

FREEZE: Object.freeze(object variable)

calling freeze on an object ignores all operations on the object, that r performed after the freeze call.

Example:

<script>
var variable1 = { fastFood: “spaghetti”, length: 10 };
Object.freeze(variable1); --(a)
variable1.price = 50;
delete variable1.length;
</script>

O/p : all operations after --(a) are ignored and Object variable1 remains unchanged.

--------------------------------------------------

JavaScript Objects are mutable:

If a new Object variable is created and initialized with an existing object,

it does not create a copy.

But only point to the same object.

Hence any changes made to any one of them, reflects in both object's operations. Here's an example to prove that:

Example :

<!DOCTYPE html>

<html>

<body>

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

var x = person; // here, object x is pointed to Object "person" instead of copy creation

x.age = 10; //Value of age property has been reassigned using "x", however, this also resets age for "person"

x.firstName="newName";

document.getElementById("demo").innerHTML =

person.firstName + " is " + person.age + " years old." + x.firstName;

</script>

</body>

</html>

O/P:

newName is 10 years old.newName

--------------------------------------------------

Creating a Prototype of an object: This just means to create a constructor for the Object that needs to be called.

Refer Example below:

<!DOCTYPE html>

<html>

<body>

function Person(first, last, age, eye) {

this.firstName = first;

this.lastName = last;

this.age = age;

this.eyeColor = eye;

}

var myFather = nnew Person("John", "Doe", 50, "blue");

var myMother = new Person("Sally", "Rally", 48, "green");

document.getElementById("demo").innerHTML =

"My father is " + myFather.age + ". My mother is " + myMother.age;

</script>

</body>

</html>

O/p:

My father is 50. My mother is 48
_________________________________________________

Adding Properties to a Prototype

2 ways to add a new property to a prototype, you must add it to the constructor function:

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    this.nationality = "English"
}

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};

However, you cannot add property to a Object Prototype like u do for an Object.

Person.nationality = "English";//Not allowed.

doing so and accessing the property through a variable object returns "undefined"

var myFather = new Person("John", "Doe", 50, "blue"); myFather.nationality; // returns "undefined"

javascriptTutorials

Thursday, December 22, 2016

Javascript-12-Datatype Object object

JavaScript Objects are mutable:

If a new Object variable is created and initialized with an existing object,

--------------------------------------------------

Creating a Prototype of an object: This just means to create a constructor for the Object that needs to be called.

--------------------------------------------------

No comments:

Post a Comment