JavaScript Object & Callback & setTimeout

JavaScript Object & Callback & setTimeout

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);

Did you find this article valuable?

Support Junho Dev Blog by becoming a sponsor. Any amount is appreciated!