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 , i.e. 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());