For example:

deep(document, "body.firstChild.style.backgroundColor");
or
deep("myElementId.childNodes[3].id");
or
deep( myJsonObject,
"locations.ca.sandiego.directory.people.smith.john.phone");

This would return undefined if any element along the chain is not
there, or index is out of bounds, etc. If the chain gets to the end,
it would return the last-evaluated value. This would be convenient for
accessing deep properties of objects that may or may not exist, and
not having to manually check the chain in your code.

I'm curious to know if anyone uses such an approach, or the cons of
doing so.

But then again I don't think I've ever written something as deep as
your third example.

/*
Error-Free Deep Property Access!

Returns: Property value, or undefined if any part of the property
         chain is undefined

Usage:
 $prop( object, 'property_name' )
 $prop( 'element_id.property_name' )
 $prop( 'element_id.prop1.prop2.prop3' )
 $prop( object, 'array_property[0]' )
 $prop( object, 'method(arg).property_name.array_property[0]
[1].prop' )
 $prop( window, 'document.getElementsByTagName(div)
[0].childNodes[1].style.color' )

Special Usage:
 $prop() returns the object last evaluated!
    if ($prop("id.style.color")) {
      alert( $prop() );
    }

JSON Example:

var json = {
        'a':'1'
        ,'b': ['x','y','z']
        ,'c': {
                'array':['1','2','3']
                ,'property':'prop!'
        }

*/
var $prop = (function() {
        var last_match;
        return function(a,b) {
                // Calls to $property() return the last match
                if (typeof a=="undefined") { return last_match; }

                var context, props = null, p;
                // If first arg is not a string, assume it's an object to
                // start from
                if (typeof a!="string") {
                        context = a;
                        props = b.split(".");
                }
                // Otherwise it's just a string where the first part is an
                // element ID
                else {
                        props = a.split(".");
                        context = document.getElementById(props.shift());
                        if (!context) { return; }
                }
                while (context && props.length>0) {
                        if (context==null) { return; }
                        p = props.shift();
                        // If there is an array index [i] at the end, only
                        // process the first part and stick the second part
                        // back on the beginning
                        if ( p.match(/(.+?)(\[\d+\].*)/) ) {
                                p = RegExp.$1;
                                props.unshift(RegExp.$2);
                        }
                        // if the first part itself is an array index [i]
                        // then process it
                        if ( p.match(/^\[(\d+)\]$/) ) {
                                if (!context || !context.length) { return; }
                                context = context[RegExp.$1];
                        }
                        // If it's a function(arg) call
                        else if ( p.match(/(.*)\((.*?)\)/) ) {
                                context = context[RegExp.$1](RegExp.$2);
                        }
                        // Else it's a regular property
                        else {
                                context = context[p];
                        }
                        if (typeof context=="undefined") { return; }
                }
                last_match = context;
                return context;
        }

    $props("myObj.prop1.prop2[current.value]")

Is that right?  It needs to have only a single root at the first
token.  That will cover a lot of possibilities, but the more general
case is interesting too.

$prop("myObj.prop1.prop2."+current.value)
?

And of course we could want

    $props("myObj.prop1.prop2[current.deeply.nested.value]")

as well.

  current.value = 42;

or

  current.value = "foo.bar";

or

  current.value = "foo['bar']";

<https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Deprec...>

var obj = {};
obj['.prop.'] = true;
obj['[prop]'] = true;

print(obj['.prop.']);
print(obj['[prop]'])

Your strategy is too complex and implementation will be terrible any
time. For example you can use evil for your purposes:

eval(properties);

Of course that is not solve the design problems. I will prefer to use
array which contain each property name. For example:

if ( $prop("current.deeply.nested.value") ) {
   $prop("myObj.prop1.prop2."+$prop())

It also has the advantage that you can pass variables holding strings
without manual concatenation.  The only thing I would do differently
than the above is that I would remove the array and deal with variable
arguments; this seems cleaner to me:

    deep(context, 'property1', 'property2', 'propertyN');

This still does not get at the even more general solution I mentioned,
and which I tried to implement some time ago.  But of course that
solution had the problem yours does with property names containing
periods or brackets.  I used an escape syntax for those, and that's
where some of the clean API went up in smoke.

I will see if I still have a copy of that code at home.  I'm curious
to see how much five-year-old code might make me shudder.

var obj = {
  property : {
    '.property.' : {
      '[property]' : true
    }
  }

deep(context, 'prop1[0]')

if 'context' has no property named 'prop1'?
And what if 'context' has a property named 'myarray[0]' which is an
array?

deep(context, 'myarray[0][0]')

?

User defined:
myObject[ prop.toString() ] = val;

I will gladly limit the potential situations for which my solution
will apply, which for my case will probably cover 99.9% of the cases.
In the rare cases where it doesn't, I'm happier with writing context-
specific code rather than extending my solution to a more general,
obscure case.

  deep(context, 'prop1', 0)

or

  deep(context, ['myarray[0]', 0])

Which one you prefer would depend on the purpose.  For example, for
JSX:isMethod/areMethods() I used additional arguments for property names
that are part of the same member expression, and a trailing additional array
argument for names of properties that are properties of the same object,
i.e.

  jsx.object.areMethods(foo, 'bar', ['baz', 'bla'])

returns `true' iff both `foo.bar.baz' and `foo.bar.bla' refer to supposedly
callable objects that are referred to by properties of an object (in short:
methods).