How can I access local scope dynamically in javascript?

Solution 1:

To answer your question, no, there is no way to do dynamic variable lookup in a local scope without using eval().

The best alternative is to make your "scope" just a regular object [literal] (ie, "{}"), and stick your data in there.

Solution 2:

No, like crescentfresh said. Below you find an example of how to implement without eval, but with an internal private object.

var test = function () {
  var prv={ };
  function prop(name, def) {
    prv[name] = def;
    return function(value) {
      // if (!value) is true for 'undefined', 'null', '0', NaN, '' (empty string) and false.
      // I assume you wanted undefined. If you also want null add: || value===null
      // Another way is to check arguments.length to get how many parameters was
      // given to this function when it was called.
      if (typeof value === "undefined"){
        //check if hasOwnProperty so you don't unexpected results from
        //the objects prototype.
        return Object.prototype.hasOwnProperty.call(prv,name) ? prv[name] : undefined;
      }
      prv[name]=value;
      return this;
    }
  };

  return pub = {
    a:prop('a', 1),
    b:prop('b', 2),
    c:prop('c', 3),
    d:function(){
      //to show that they are accessible via two methods
      //This is a case where 'with' could be used since it only reads from the object.
      return [prv.a,prv.b,prv.c];
    }
  };
}();

Solution 3:

I think you actually sort of can, even without using eval!

I might be wrong so please correct me if I am, but I found that if the private variables are declared inside the local scope as arguments, instead of using var, i.e:

function (a, b, c) { ...

instead of

function () { var a, b, c; ...

it means that those variables/arguments, will be bound together with the function's arguments object if any values are given to them in the function's invocation, i.e:

function foo (bar) {
    arguments[0] = 'changed...';
    console.log(bar); // prints 'changed...'

    bar = '...yet again!';
    console.log(arguments[0]); // prints '..yet again!'
}

foo('unchanged'); // it works (the bound is created)
// logs 'changed...'
// logs '...yet again!'

foo(undefined); // it works (the bound is created)
// logs 'changed...'
// logs '...yet again!'

foo(); // it doesn't work if you invoke the function without the 'bar' argument
// logs undefined
// logs 'changed...'

In those situations (where it works), if you somehow store/save the invoked function's arguments object, you can then change any argument related slot from arguments object and the changes will automatically be reflected in the variables themselves, i.e:

// using your code as an example, but changing it so it applies this principle
var test = function (a, b, c) {
    //this = window
    var args = arguments, // preserving arguments as args, so we can access it inside prop
        prop = function (i, def) {
            //this = window

            // I've removed .toSource because I couldn't apply it on my tests
            //eval(name+ ' = ' + (def.toSource() || undefined) + ';');
            args[i] = def || undefined;   

            return function (value) {
                //this = test object
                if (!value) {
                    //return eval('(' + name + ')');
                    return args[i];
                }

                //eval(name + ' = value;');
                args[i] = value;
                return this;
            };
        };

    return {
        a: prop(0, 1),
        b: prop(1, 2),
        c: prop(2, 3),
        d: function () {
            // to show that they are accessible via to methods
            return [a, b, c];
        }
    };
}(0, 0, 0);

If the fact that you can pass the values as arguments into the function annoys you, you can always wrap it with another anonymous function, that way you really don't have any access to the first defined values passed as arguments, i.e:

var test = (function () {
    // wrapping the function with another anomymous one
    return (function (a, b, c) {
        var args = arguments, 
            prop = function (i, def) {
                args[i] = def || undefined;   

                return function (value) {
                    if (!value) {
                        return args[i];
                    }

                    args[i] = value;
                    return this;
                };
            };

        return {
            a: prop(0, 1),
            b: prop(1, 2),
            c: prop(2, 3),
            d: function () {
                return [a, b, c];
            }
        };
    })(0, 0, 0);
})();

Full Dynamic Access Example

We can map all argument variable names into an array by getting the function itself (arguments.callee) as a string, and filtering its parameters using a regex:

var argsIdx = (arguments.callee + '').replace(/function(\s|\t)*?\((.*?)\)(.|\n)*/, '$2').replace(/(\s|\t)+/g, '').split(',')

Now with all the variables in an array, we can now know the corresponding variable name for each function's arguments slot index, and with that, declare a function (in our case it's prop) to read/write into the variable:

function prop (name, value) {
    var i = argsIdx.indexOf(name);

    if (i === -1) throw name + ' is not a local.';
    if (arguments.hasOwnProperty(1)) args[i] = value;

    return args[i];
}

We can also dynamically add each variable as a property, like in the question's example:

argsIdx.forEach(function (name, i) {
    result[name] = prop.bind(null, name);
});

Finally we can add a method to retrieve variables by name (all by default), and if true is passed as the first argument, it returns the hard-coded array with all the variables by their identifiers, to prove that they are being changed:

function props (flgIdent) {
    var names = [].slice.call(arguments.length > 0 ? arguments : argsIdx);

    return flgIdent === true ? [a, b, c, d, e, f] : names.map(function (name) {
        return args[argsIdx.indexOf(name)];
    });
}

The prop and props functions can be made available as methods inside the returned object, in the end it could look something like this:

var test = (function () {
    return (function (a, b, c, d, e, f) { 
        var argsIdx = (arguments.callee + '').replace(/function(\s|\t)*?\((.*?)\)(.|\n)*/, '$2').replace(/(\s|\t)+/g, '').split(','), 
            args = arguments, 
            result = {
                prop: function (name, value) {
                    var i = argsIdx.indexOf(name);

                    if (i === -1) throw name + ' is not a local.';
                    if (arguments.hasOwnProperty(1)) args[i] = value;

                    return args[i];
                },
                props: function (flgIdent) {
                    var names = [].slice.call(arguments.length > 0 ? arguments : argsIdx);

                    return flgIdent === true ? [a, b, c, d, e, f] : names.map(function (name) {
                        return args[argsIdx.indexOf(name)];
                    });
                }
            };

        args.length = argsIdx.length;
        argsIdx.forEach(function (name, i) {
            result[name] = result.prop.bind(null, name);
        });

        return result;
    })(0, 0, 0, 0, 0, 0);
})();

Conclusions

It's impossible to read/write a function's local scope variable without eval, but if those variables are function's arguments and if they're given values, you can bound those variable identifiers to the function's arguments object and indirectly read/write into them from the arguments object itself.

How can I access local scope dynamically in javascript?

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts