Objects and Object Creation

[Imhotep]

I found this very interesting and helps to understand the Java Script engine and how it works when creating objects and functions because functions are objects in Java Script and Objects are name/value pairs that can be created on the fly. Lets take a few examples of how Objects are created in Java Script and how to create new Object within objects based on primary approach and then shorthand. Lets Go!

// How to create objects in Java script.  This first example is a primary method of creating an object which is a name /value pair//
//Take a section of script and copy and paste into your browser console or cut and past into your editor and then run to see how this works//
    
    var person = new Object();

    //After creating an object you can then define name/value pairs to the object.  An example of this is using "firstname" and "lastname" and defining those objects,  Here we use the brackets//
    
person["firstname"] = "Imhotep";
person["lastname"]= "Amen Ra El";
  console.log(person.firstname,person.lastname);

VM86762:10 Imhotep Amen Ra El
undefined

/

/Now after printing my name in the console I don't know why it is printing undefined.  Can someone answer that?//

//Well Lets go to the new step in creating an object and name/value pairs//

// Shorthard for this is the Object literal and it has the same meaning as var person = new Object(); //
    
    var person = {};   //This set a new object simply by using the squirrely brackets//
    console.log(person);  //console.log(person) will then show you an Object has been created with no name/value pairs.//
     
    //we can also now add name/value pairs to the object person using the brackets and also create new objects within an object//
    
 var persons = {
    firstname: "Edward", 
    lastname: "Kitchen", 
    address:{
        street: "108 S. Hamlin Blvd.", 
        city: "Chicago", 
        state: "Illinois"
    }
 }
    
console.log(persons.firstname, persons.lastname,persons.address.street,persons.address.city,persons.address.state);
   
 function greet(persons) {
        console.log('Hi' + persons.firstname);
    }
    
VM1465:4 {}__proto__: Object
VM1465:16 Edward Kitchen 108 S. Hamlin Blvd. Chicago Illinois
undefined

//My question here is why is my greet function undefined when I call it belowwhen it is clear from the first statement that I have defined persons.firstname = "Edward" //

console.log(persons.firstname);
VM2650:1 Edward
undefined
console.log(greet(persons.firstname));
VM1465:18 Hiundefined   
VM2808:1 undefined

//To be continued// OK this is the continuation of Objects and Object Creation. I try to explain what I learn to help me understand it better. Lets create a new Object using the shorthand and then add some name /value pairs and new Object within the Object personnel//

var personnel = {}; //new object creation
console.log(personnel) //will confirm new object creation
var personnel={firstname: “Imhotep”,lastname: “Amen Ra El”,address:{street: “108 S Hamlin Ave”,city: “Chicago”,state: “Illinois”}} //define name value pairs within object and create new Object “address” within Object “personnel”

function greet(personnnel){
    console.log('Hi' + personnel.firstname);
}     // define function greet and instructions
greet(personnel);  //call the function greet 

VM266:2 {}
VM266:7 HiImhotep
undefined
greet(person); //person not defined must use personnel
VM307:1 Uncaught ReferenceError: person is not defined
at :1:7
(anonymous) @ VM307:1
console.log(personnel.firstname,personnel.lastname,personnel.address.street,personnel.address.city,personnel.address.state);
VM814:1 Imhotep Amen Ra El 108 S Hamlin Ave Chicago Illinois
undefined //Why the undefined here anyone? What is undefined?

// This is interesting. I exchanged the object in the greet function without knowing how I did it .

//I can also create a name/value pair on the fly inside of a function//

greet(Tony);   

greet({firstname: 'Imhotep',lastname:'Amen Ra El'})

console.log(greet(Tony));

VM913:3 Uncaught ReferenceError: Tony is not defined
at :3:11
(anonymous) @ VM913:3
var Tony = {}; //So now I define “Tony” as a new Object
undefined
greet({firstname: “Imhotep”,lastname:“Amen Ra El”});
//I define name/value pairs for greet function and it immediately prints below
VM266:7 HiImhotep
undefined
greet(Tony); //and now when I greet(Tony); I also get the same HiImhotep.
VM266:7 HiImhotep
undefined //The old undefined again.

// What I find interesting is that my original greet function was greet(personnel){“HI” + personnel.firstname}; And this produced Hi Imhotep when I invoke the function greet(personnel); Now what happens apparently is that I changed the bag within the greet function from “personnel” to “Tony” and I defined the Object Tony on the fly with name value pairs that just happen to be the same as the value pairs of “personnel”. Maybe need to change the name/value pairs of Tony and see if it prints the Object name/value for “Tony”. Let me try this.

Well no matter what I define as my new object, whenever I invoke the function greet, I will get the same result. So defining a new object and using the object as a parameter has no affect on the result. It will not use the name value pair of the new Object. The only way to change the result is to change the instructions within the function. Now again whenever I invoke the greet function you get the same result no matter what parameter you use or object you use to call the function. Can someone explain this better?

greet({firstname: ‘Mary’, lastname: ‘Doe’});
VM266:7 HiImhotep
undefined
greet(Tony);
VM266:7 HiImhotep
undefined
Tony
{}proto: constructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()defineGetter: ƒ defineGetter()defineSetter: ƒ defineSetter()lookupGetter: ƒ lookupGetter()lookupSetter: ƒ lookupSetter()get proto: ƒ proto()set proto: ƒ proto()
greet(Imhotep);
VM1119:1 Uncaught ReferenceError: Imhotep is not defined
at :1:7
(anonymous) @ VM1119:1

console.log(greet(Tony));
VM266:7 HiImhotep
VM1195:1 undefined
undefined

console.log(greet(personnel));
VM266:7 HiImhotep
VM1289:1 undefined
undefined
function greet(Tony){console.log(“Hello” + " " + personnel.firstname + personnel.lastname)};
undefined
greet(Tony);
VM1620:1 Hello ImhotepAmen Ra El
undefined
function greet(Tony){console.log(“Hello” + " " + personnel.firstname + " " + personnel.lastname)};greet(Tony);
VM1718:1 Hello Imhotep Amen Ra El
undefined
greet(persons);
VM1718:1 Hello Imhotep Amen Ra El
undefined
greet(personnnel); //missed spelled.
VM1825:1 Uncaught ReferenceError: personnnel is not defined
at :1:7
(anonymous) @ VM1825:1
greet(personnel);
VM1718:1 Hello Imhotep Amen Ra El
undefined

[Malik]

@Imhotep

console.log(greet(persons.firstname));

Hi @Imhotep,
You are passing the first name to the greet function instead of the entire persons object. In your greet function, you expect the entire persons object and the pick the first name out of it.

If you do console.log(greet(persons.firstname)); , you will eventually do greeting for persons.firstname.firstname which is undefined. Try calling the greet function like

console.log(greet(persons));

Hope this helps.

Happy Learning !

[Imhotep]

That is right. Thanks. I still have to think about it but I think I see what your saying. When I created the greet function I used the object “persons” as the parameter and I am telling the computer to look in the bag “persons” and find console.log(“Hi” + persons.firstname) Is that it?

var persons ={
firstname: “Edward”, lastname: “Kitchen”, address:{
street: “108 S. Hamlin Blvd.”, city: “Chicago”, state: “Illinois”
}
}

 console.log(persons.firstname, persons.lastname,persons.address.street,persons.address.city,persons.address.state);
function greet(persons){
    console.log('Hi' + persons.firstname);
}

VM56:7 Edward Kitchen 108 S. Hamlin Blvd. Chicago Illinois
undefined
greet(persons);
VM56:9 HiEdward
undefined

[Imhotep]

//To be continued// OK this is the continuation of Objects and Object Creation. I try to explain what I learn to help me understand it better. Lets create a new Object using the shorthand and then add some name /value pairs and new Object within the Object personnel//

var personnel = {}; //new object creation
console.log(personnel) //will confirm new object creation
var personnel={firstname: “Imhotep”,lastname: “Amen Ra El”,address:{street: “108 S Hamlin Ave”,city: “Chicago”,state: “Illinois”}} //define name value pairs within object and create new Object “address” within Object “personnel”

function greet(personnnel){
    console.log('Hi' + personnel.firstname);
}     // define function greet and instructions
greet(personnel);  //call the function greet 

VM266:2 {}
VM266:7 HiImhotep
undefined
greet(person); //person not defined must use personnel
VM307:1 Uncaught ReferenceError: person is not defined
at :1:7
(anonymous) @ VM307:1
console.log(personnel.firstname,personnel.lastname,personnel.address.street,personnel.address.city,personnel.address.state);
VM814:1 Imhotep Amen Ra El 108 S Hamlin Ave Chicago Illinois
undefined //Why the undefined here anyone? What is undefined?

// This is interesting. I exchanged the object in the greet function without knowing how I did it .

//I can also create a name/value pair on the fly inside of a function//

greet(Tony);   

greet({firstname: 'Imhotep',lastname:'Amen Ra El'})

console.log(greet(Tony));

VM913:3 Uncaught ReferenceError: Tony is not defined
at :3:11
(anonymous) @ VM913:3
var Tony = {}; //So now I define “Tony” as a new Object
undefined
greet({firstname: “Imhotep”,lastname:“Amen Ra El”});
//I define name/value pairs for greet function and it immediately prints below
VM266:7 HiImhotep
undefined
greet(Tony); //and now when I greet(Tony); I also get the same HiImhotep.
VM266:7 HiImhotep
undefined //The old undefined again.

// What I find interesting is that my original greet function was greet(personnel){“HI” + personnel.firstname}; And this produced Hi Imhotep when I invoke the function greet(personnel); Now what happens apparently is that I changed the bag within the greet function from “personnel” to “Tony” and I defined the Object Tony on the fly with name value pairs that just happen to be the same as the value pairs of “personnel”. Maybe need to change the name/value pairs of Tony and see if it prints the Object name/value for “Tony”. Let me try this.

Well no matter what I define as my new object, whenever I invoke the function greet, I will get the same result. So defining a new object and using the object as a parameter has no affect on the result. It will not use the name value pair of the new Object. The only way to change the result is to change the instructions within the function. Now again whenever I invoke the greet function you get the same result no matter what parameter you use or object you use to call the function. Can someone explain this better?

greet({firstname: ‘Mary’, lastname: ‘Doe’});
VM266:7 HiImhotep
undefined
greet(Tony);
VM266:7 HiImhotep
undefined
Tony
{} proto : constructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf() defineGetter : ƒ defineGetter () defineSetter : ƒ defineSetter () lookupGetter : ƒ lookupGetter () lookupSetter : ƒ lookupSetter ()get proto : ƒ proto ()set proto : ƒ proto ()
greet(Imhotep);
VM1119:1 Uncaught ReferenceError: Imhotep is not defined
at :1:7
(anonymous) @ VM1119:1

console.log(greet(Tony));
VM266:7 HiImhotep
VM1195:1 undefined
undefined

console.log(greet(personnel));
VM266:7 HiImhotep
VM1289:1 undefined
undefined
function greet(Tony){console.log(“Hello” + " " + personnel.firstname + personnel.lastname)};
undefined
greet(Tony);
VM1620:1 Hello ImhotepAmen Ra El
undefined
function greet(Tony){console.log(“Hello” + " " + personnel.firstname + " " + personnel.lastname)};greet(Tony);
VM1718:1 Hello Imhotep Amen Ra El
undefined
greet(persons);
VM1718:1 Hello Imhotep Amen Ra El
undefined
greet(personnnel); //missed spelled.
VM1825:1 Uncaught ReferenceError: personnnel is not defined
at :1:7
(anonymous) @ VM1825:1
greet(personnel);
VM1718:1 Hello Imhotep Amen Ra El
undefined

[Imhotep]

Here is my clean up from the original post. I am going back through my post after reviewing what I have learned after completing the Java Script course. I find this to be very helpful. This topic is very important because I feel that Object creation is at the core of Java Script programming.

<!DOC Type html>
<html>
<head>

<title>Object Creation using both the Primary and the Short-cut Object Literals Methods with both dot operators and colons methods for assigning name /value pairs.</title>

<body>


<script>
// How to create objects in Java script.  This first example is a primary method of creating an Object which are name /vaue pairs in Java Script.

//Take a section of this script and copy and paste in browser console to see how this works//
    
var persons= new Object();  //This Primary method creates a new Object with no name value pairs.
    
console.log(perons);  //creates an empty Object with no name/value pairs.

//After creating an object you can then define name/values to the object. An example of this is using "firstname" and "lastname" and defining those values using brackets after person object.//
    
persons["firstname"] = "Imhotep";
persons["lastname"]= "Amen Ra El";
    
    console.log(persons.firstname + "  " + persons.lastname); //prints first name and last to console.
    
 //Now we can use the primary method again to create an Object and another Object witnin the first Object.  But this time we will assign name/value pairs for each Object using the dot operator method //
    
    var person = new Object()  //create the first Object
    person.address = new Object();  //Creates the second Object
    
    //We can now use the dot opertor to create name value pairs for both the primary Object, "person" and the sub-object. "address".//
    
    person.firstname = "Edward";
    person.lastname = "Kitchen";    
    person.address.street = "1003 Lotus Dr";
    person.address.city = "Natchez";
    person.address.state = "Mississippi";
    person.address.zip = "39120"
    
    console.log(person.firstname + " " + person.lastname + "  " +  person.address.street + " " + person.address.city + "  " + person.address.state + "  " + person.address.zip);
    
    //ptint to console the fist name , last name and address of person Object
    
// The second method or Shorthard method for this Object creation is using an object literal which has the same meaning as var person = new Object(); //
    
    var person = {};   //short -cut creates a new Object called person and it replaces the old Object person.  This Object with have no values
    
    console.log(person);  // Object person now has no name value pairs but shows that  object has been created.
    
//Short-hand for Object creation and assigning name value /pairs. 
    
//We can now re-create the Object "person" using an object literal and defining name/value pairs using colons after the object name and putting the values in parenthesis.  
    
//Also to create a new Object within the "person" object you can use swiggley brackets and and define the name value pairs as previously described above.
    
     var person ={
    firstname: "Edward", lastname: "Kitchen", address:{
    street: "108 S. Hamlin Blvd.", city: "Chicago", state: "Illinois", zip: "60624"
    }
    }  
     console.log(person); // Pints to console the Object person and name/value pairs
    
     console.log(person.firstname, person.lastname,person.address.street,person.address.city,person.address.state,person.address.zip);  //prints to console the name and address of Object "person".
    
  
    
// Now lets create a function called greet uning the persons object as a parameter.
    
    function greet(persons){
        console.log('Hi' + "  " + persons.firstname);
    }
     greet(persons);  // Will take the object persons and print to console "Hi + first name of the persons Object.
    

 //We can also define a new variable and give its value as an object name/value //
   
    var firstNameProperty = "firstname";
    
    //Now we can write using document.write or console.log to see the output of these calls//
    
    console.log(person);  //This will return the Object peron with it name/value pairs //
    
    console.log(person[firstNameProperty]); //This will return Edward//
    
    //Here we can make these call using the dot operator called the member operator//
    
    console.log(persons.firstname) ;  //This will return Imhotep//
    
    console.log(persons.lastname);    //This will return Amen Ra El//
    
   
    // Shorthard  for this is Object literal again using new Objec tliteral//
    
    var personnel = {};
    console.log(personnel)
    
    var personnel={firstname: "Imhotep",lastname: "Amen Ra El",address:{street: "108 S Hamlin Ave",city: "Chicago",state: "Illinois", zip: "60624"}}
    
    console.log(personnel.firstname + " " + personnel.lastname + "  " + personnel.address.street + " " + personnel.address.city + "  " + personnel.address.state + "  " + personnel.address.zip);
    
    
    function greet(personnel){
        console.log('Hi' + " " + personnel.firstname);
    }
    
    greet(personnel);
    greet(person);
    greet(persons);

//This is intersting.  If I call the greet function using any of the Objects that I created, personnel, person, persons, and only change the execution of the greet function for personnnel it will change it for all objects that use the greet function.


</script>









</body




</html>