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

Question

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 , ie a string, to another property that's not a function.

Many thanks

Answer 1

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

Answer 2

You need to use

this.inDent

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

Answer 3

Use closures, eg

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, eg 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 );
}

ie 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