Object Oriented Programming (OOP) in JavaScript
Object - a variable that has child variables and methods
Declaration of Empty object:
var person = { };
Declaration of object with child objects:
var person={
age: '46', //child variable
name: { //child object
first: 'Guy', //grand-child variable
last: 'Maimon'
},
address: 'Moscow';
greetingMsg: function() { //child function
console.log('My Name Is Guy!');
}
};
calling the object
console.log(person);
calling child object
person.age; //child
person.name.first; //grand-child
person.name; //child that has grand-childs
person.greetingmsg(); //child function
Another syntax of accessing a child object
person['age']; //child
person['name']['first']; //grand-child
person['name']; //child that has grand-childs
person['greetingMsg'](); //child function
the Syntaxes can be mixed and combined like:
person['name'].first;
person.name['first'];
Assignment of variable to child object
var ageProperty = 'age';
var nameProperty = 'name';
console.log(person[ageProperty]);
Can be manipulated in RunTime
var userInput = prompt("What data do you want to bring? ");
console.log(person[userInput]);
input of a name of a property of the object
age
will return the data in the property
46
Assignment of data to object properties
person.age = 17;
person.name.first = 'ofek';
This Object
a reference to the same object from within the object
var person2 = {
name: 'David' ,
greeting: function() {
console.log('Hi, My name is ' + this.name );
}
}
when calling
person2.greeting();
will return
Hi, My name is David
Sample of JS code
var person = {
age: '46',
name: {
first: 'Guy',
last: 'Maimon'
},
address: 'Moscow',
greetingMsg: function() {
console.log('My Name Is Guy!');
}
}; //returns......
console.log(person); //all the object
console.log('console.log(person.age); -> ' , person.age); // the age (child)
console.log('console.log(person.name.first) -> ' , person.name.first); // the first name (grandchild)
console.log('person.greetingMsg(); --->');
person.greetingMsg(); //calls the function
console.log('-------------------------------------------');
console.log('console.log(person[\'name\']); -> ', person['name']); //all the childs of name
console.log('console.log(person[\'name\'][\'first\']);' , person['name']['first']); //granschild
console.log('-------------------------------------------');
console.log('console.log(person[\'name\'].first); ->', person['name'].first); //grandchild, hybrid
console.log('console.log(person.name[\'last\']); ->', person.name['last']); //grandchild, hybrid
console.log('-------------------------------------------');
var ageProperty = 'age'; //assignement to variable
var nameProperty = 'name';
console.log('var ageProperty = \'age\';');
console.log('var nameProperty = \'name\';');
console.log('console.log(person[ageProperty]); -> ', person[ageProperty]); //call the variable through the object
console.log('--------------assignmemt-------------------');
console.log('age before change:' , person.age); //original age
console.log('-> person.age = 17 ->')
person.age = 17 //assignment of value
console.log('age after change:' , person.age); //new age value
console.log('-------------------------------------------');
console.log('first name before change:' , person.name.first); //original first name value
console.log('-> person.name.first = \'Ofek\' ->')
person.name.first= 'Ofek'; //assignment of value
console.log('first name after change1:' , person.name.first); //new first name value
console.log(person.name); //name with the new first name
console.log(person); //the object with changes
console.log('-> person.name.first = \'Gilad\' ->') //original first name value
person['name']['first'] = 'Gilad'; //assignment of value
console.log('first name after change2:' , person.name.first); //new first name
console.log(person.name); //name with the new first name
console.log('-> person.height = 180; ->');
person.height = 180; //new child + assignment
console.log(person); //the object with the new child object
console.log('-----------------This----------------------');
var person2 = { //new object
name: 'David' ,
greeting: function() {
console.log('Hi, My name is ' + this.name ); //using the this.name
}
}
person2.name = "Moshe" //assignment of new value
person2.greeting(); //calling the function to get new value
back to main page