My creation of a simple object is not working correctly?

Question

I want to create a simple object and then use a constructor to fill that object just like you can in an OOP language. Why is Javascript not letting me create a basic object

person = new Object();

Question: What would be the best way to declare an object in Javascript so that it basically follows that same convesion as Java and C++?

I would like to be able to add in the object properties before I use them in the code.

Code:

<!DOCTYPE html>
<html>
<body>

<script>

person=new Object(); <-- will work with out this code

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

myFather=new person("John","Doe",50,"blue");

document.write(myFather.firstname + " -- " + myFather.age);
</script>

</body>
</html>

Note that JavaScript *is* an OOP language. It's just prototype based instead of class based. — ajp15243, Apr 01 '14 at 15:46
I don't understand the question. What's the problem with the constructor? — Smeegs, Apr 01 '14 at 15:48
Your code doesn't make sense. First you declare a function (`person`, notice, that functions in JS are hoisted), then you override it with an empty object... — Teemu, Apr 01 '14 at 15:48
*What would be the best way to declare an object in Javascript so that it basically follows that same convesion[sic] as Java and C++?*: Different language, different conventions. Don't fight to try and get the language to work the same as some other language or you'll be frustrated for a long time. — Matt Burland, Apr 01 '14 at 15:48
See also [stackoverflow creating objects in Javascript](http://stackoverflow.com/questions/6843951/which-way-is-best-for-creating-an-object-in-javascript-is-var-necessary-befor) — Richard Chambers, Apr 01 '14 at 15:55

mpm · Answer 1 · 2014-04-01T15:55:56.990

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

myFather=new person("John","Doe",50,"blue");

document.body.innerHTML=myFather.firstname + " -- " + myFather.age;

works, you dont need person=new Object() since your are defining person in a function statement anyway. In javascript, functions are object constructors too.That's why you can call new on functions.

http://jsfiddle.net/camus/bBj8f/

Question: What would be the best way to declare an object in Javascript so that it basically follows that same convesion as Java and C++?

Javascript doesnt have to follow Java or C++ "conventions", Javascript doesnt work like Java or C++ .

I was going to post this myself, but the OP states this in his question, I have no idea what he's asking. — Smeegs, Apr 01 '14 at 15:49

score 1 · Answer 2 · answered Apr 01 '14 at 15:49

1

Your line

person=new Object();

is not needed here. Just remove that line and your code should work: http://jsfiddle.net/s5UDq/

answered Apr 01 '14 at 15:49

Timo Virkkunen

106
4

score 1 · Answer 3 · answered Apr 01 '14 at 15:50

Just a small dissection of your code:

Here you are creating a (global variable) with an object inside.

person=new Object();

The line next you are creating a new function named person: note that is not a variable with the function as value.

function person(firstname,lastname,age,eyecolor){
  this.firstname=firstname;
  this.lastname=lastname;
  this.age=age;
  this.eyecolor=eyecolor;
}

After that you are using the named function as implicit constructor for the object person.

The solution would be to either create a variable person, with the function as a value, or just the named function.

For the former have a look to this:

  var person = function(firstname,lastname,age,eyecolor){
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
  }

For the latter, just remove the person = new Object(); line.

friedi · Answer 4 · 2014-04-01T16:08:06.573

The solution:
Remove the line person = new Object(); and then your code works as expected.

The reason:
The reason why you're getting an error in your code is because of function hoisting in javascript (see http://designpepper.com/blog/drips/variable-and-function-hoisting). Because of this the function player gets defined above all. After that you overwrite the function player with a emtpy object (with the line person = new Object();).

So this is why there is an error like this: Uncaught TypeError: object is not a function

Have a look at the additional comments:

console.log(person); // logs function person(firstname,lastname,age,eyecolor) ...

person=new Object(); // here you overwrite your function

function person(firstname,lastname,age,eyecolor) // at this point the function is already declared
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

console.log(person); // logs Object {}

myFather=new person("John","Doe",50,"blue"); // Uncaught TypeError: object is not a function

console.log(myFather.firstname + " -- " + myFather.age);

If i open a page in Google Chrome will it show me all the errors on the page? — , Apr 01 '14 at 16:27
no, you can see the error in the javascript console (you can get to the console with the key F12) — friedi, Apr 01 '14 at 16:28

My creation of a simple object is not working correctly?

4 Answers4