CODEWITHSUNDEEP
javascriptjqueryobject-literal
Shaoz
Shaoz

Reputation: 10653

How to use properties of an object literal without being inside a function in javascript

I created an object literal in JS, but wanna to access a property without being in a function. Whenever I try, I don't get any results or it returns null.

JS: 

var settings = {
        prev: '#prev',
        next: '#next',
        slides: '#slides',
        crslContainer: '#carousel',

        //I'm trying to access the 'slides' by using 'this.slides'
        inDent: $(this.slides).find('li').outerWidth(),
        fx: 'rotate',

        myFunction: function () {
          console.log(settings.inDent); //This shows null in the console, why??
        }
    }

In the code above I'm trying to access slides by using this.slides, all inside the same object, but the console says null. But when I do the method, inDent: $('#slides').find('li').outerWidth(), then it works. Why is that? I assumed it's the same as using those properties inside a function by using this keyword, apparently it's not the case. I just wanna pass the value of that object property , i.e. a string, to another property that's not a function.

Many thanks

Upvotes: 4

Views: 1900

Answers (3)

scibuff
scibuff

Reputation: 13765

Use closures, e.g

var settings = function(){
    var private = {};
    private.slides = '#slides';

    var public = {}
    public.inDent = ($(private.slides).find('li').outerWidth());
    public.doSomething = function(){
        console.log( public.inDent );
    }

    return public;
}();

The advantage of this is also that it gives you "encapsulation" for free

BTW, you shouldn't rely on anything that is publicly available, because, well, it can be changed, e.g. settings.inDent = null and then settings.doSomething() may no longer function correctly. What correct way to do it is the following

...
private.inDent = ($(settings.slides).find('li').outerWidth());

public.inDent = private.inDent;
public.doSomething = function(){
    console.log( private.inDent );
}

i.e. make the inDent value "read only" (in a sense that nothing outside of the settings object can actually change the internal implementation of private.inDent); as long as you always use private.inDent from within settings you're safe because even if someone does settings.inDent = null, the settings.doSomething(); will still function properly

Upvotes: 0

scibuff
scibuff

Reputation: 13765

You need to use 

this.inDent

The inDent field would be accessed via settings.inDent only outside of the settings object definition

Upvotes: 0

Pointy
Pointy

Reputation: 414086

You can't refer to the "object being defined" in an object literal. That is, there's no way to have the value expression for a property of the under-construction object refer to the object itself in order to access another (presumably, already-defined) property.

You can however add a property to the object after it's been defined.

 var obj = { a: 0 };
 obj.b = (obj.a ? 1 : 2);

Or in your case:

 var settings = { ... };
 settings.inDent = ($(settings.slides).find('li').outerWidth());

Upvotes: 9

Related Questions