Javascript Objects
Let's assume that you are just inherited a hotel and you are in charge of running it. When you arrive at the hotel, the first thing you notice is that there is a whole load of bags that are in lobby and you got guests who are checking in and leaving their luggage. You want to hire a bell boy because there are too many guests as you can't handle.
When you hire a bell boy, You are going to ask name, age, work permit, lauguages. and put all of them in each variable.
var bellBoyName = "Timmy";
var bellBoyAge = 19;
var bellboyLanguages = ["French","English"];
var isBellboyHasWorkPermit = true;
If we were to instruct our bellboy to greet a guest then we could write our line of code like this.
alert("Hello, my name is " + bellBoyName);
If there are a bunch of guests and swamped with their baggages, now the bellboy can't manage them by himself so let's hire some more bellboys then we have to write all the variables again then it is going to take forever!
Maybe, This is better, It is usually called "table".
properties | bellBoy1 | bellBoy2 | bellBoy3 |
---|---|---|---|
name | Yimmy | Jimmy | Bitty |
age | 19 | 21 | 18 |
hasWorkPermit | true | true | false |
languages | ["French","English"] | ["German","English"] | ["English"] |
In Javascript, we can do same thing. and It is called "object".
var bellBoy1 = {
name : "Timmy",
age : 19,
hasWorkPermit : true,
languages : ["French","English"]
};
Constructor Function
We just want to create a function that has a name of bellBoy.
// Declare a Constructor Function
function BellBoy(name, age, hasWorkPermit, Languages){
this.name = name;
this.age = age;
this.hasWorkPermit = hasWorkPermit;
this.languages = languages;
}
// Create an object of bellBoy
var bellBoy1 = new BelllBoy("Timmy",19,true,["French","English"]);
Methods
If we wanted our object to also have an associated function then all we have to do is to provide the name of function as a new parameter.
// Create Method
var bellBoy1 = {
name : "Timmy",
age : 19,
hasWorkPermit : true,
languages : ["French","English"]
moveSuitcase : function(){
alert("May I take your suitcase?");
pickUpSuitcase();
move();
}
};
// Call method
bellBoy1.moveSuitcase();
Remember! When we are using the properties or calling a method, we are always using the dot notation.
Constructor Function Method
// Declare a Constructor Function
function BellBoy(name, age, hasWorkPermit, Languages){
this.name = name;
this.age = age;
this.hasWorkPermit = hasWorkPermit;
this.languages = languages;
this.moveSuitcase = function(){
alert("May I take your suitcase?");
pickUpSuitcase();
move();
}
}
// Create an object of bellBoy
var bellBoy1 = new BelllBoy("Timmy",19,true,["French","English"]);
// Call method
bellBoy1.moveSuitcase();
Callback Function
function respondToKey(event){
console.log("Key pressed!");
}
document.addEventListener("keypress",respondToKey);
It allows us to wait for something to finish happening. For example, waiting for click event and then call back function gets called back and executed.
Timeout Function
// This anaymous funtion in setTimeout happens after 3 seconds.
setTimeout(function(){alert("Hello!");},3000);