JavaScript - Create New Object (Function) Using an object literal?

Question

I have a function defined in my JavaScript with two properties: size and url:

function IconInfo() {
    this.size = size;
    this.url = url;
}

Inside another function I create a new instance of IconInfo and set the properties this way:

function SomeFunction() {
    var icon = new IconInfo();
    icon.size = 64;
    icon.url = "http://somesite.com/image1.png";
}

Isn't there a way to create an instance like the following:

  var icon = new IconInfo({
      size : 64,
      url  : "http://somesite.com/image1.png"
  });

I like that notation better, it seems more concise and easier to read.

===========================UPDATE================================

Based on Tim's answer of doing it the following way:

var icon = {
  size : 64,
  url  : "http://somesite.com/image1.png"
};

I have the following question.

Let's say I have 2 functions both with the same exact properties and constructor arguments:

function Func1(x) {
    this.x = x;
}

function Func2(x) {
    this.x = x;
}

And I have a container that holds either type:

function Container() {
    this.f = null;
}

If I add one of the functions using that method what type will it actually be?

...
var container = new Container();
container.x = new f { // is f Func1 or Func2?
    x: 10;
}

The term "type" has a defined meaning in ECMAScript that is inconsistent with your use. You are using it more like "class", but [[Class]] has a different meaning too. So you really mean to ask "how can I distinguish between an instance of Func1 and Func2". Look at the instanceof operator, or perhaps the object's constructor property, but there are issues with both approaches. — RobG
– RobG, Commented Jul 25, 2014 at 4:21

Tim Mac · Accepted Answer · 2014-07-25 03:36:55Z

2

There are a lot of options, but keeping it simple.. you could just do this:

var icon = {
  size : 64,
  url  : "http://somesite.com/image1.png"
};

You don't have to declare a "type", but you could.. sort of like this:

function IconInfo(size, url)
  this.size = size;
  this.url = url;
);
var icon = new IconInfo(2, "www.google.com");

answered Jul 25, 2014 at 3:36

Tim Mac

1,1491 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

AClockworkOrangutan Over a year ago

I read something like that on another search site but I wasn't sure how the "compiler" knows that when you create a new icon (as in your first example) what type it is?

Tim Mac Over a year ago

The javascript "compiler" doesn't care if you have a strongly defined type. You can put any property you want on an object. For instance.. var obj = {} ... obj.prop = 2. That's not to say that it's not a good idea to strongly define a type, but that's another discussion entirely.

AClockworkOrangutan Over a year ago

What if I have another function that has the same exact properties: size and url then I do a new blah = { size: 64, etc...} how would it know to which type I am referring?

Tim Mac Over a year ago

is it important to know the type? Could you assume that the type you're getting has the properties you need? You could check for the existence of those properties via if(obj.prop) .. do something ..

RobG Over a year ago

Better to use if (obj.hasOwnProperty(prop)) ... as obj.prop will return false for a number of values when the property exists but has a falsey value.

|

musical_coder · Accepted Answer · 2014-07-25 03:35:56Z

1

You can actually make it even more concise. First, you're forgetting to set the variables inside IconInfo; it should be this:

function IconInfo(size, url) {
    this.size = size;
    this.url = url;
}

To create a new IconInfo in your other function, you'll just need to call it like this:

function SomeFunction() {
    var icon = new IconInfo(64, "http://somesite.com/image1.png");
}

answered Jul 25, 2014 at 3:35

musical_coder

3,8963 gold badges17 silver badges18 bronze badges

1 Comment

AClockworkOrangutan Over a year ago

Yes, I realized just now that I was forgetting to set the variables. But more generally I just wanted to know if there was a way to create an object using the "json" type syntax of new SomeType({x:"x", y:"y", etc.}); and also what using that syntax is called anyway? I know I am calling it "json" syntax which is probably totally stupid. :)

Collectives™ on Stack Overflow

JavaScript - Create New Object (Function) Using an object literal?

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related