JavaScript dot notation [duplicate]

Question

The following line is apparently written best in dot notation. I am trying to clean my JavaScript code to make it strict. What does it mean?

if (ie||ns6) { var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""; }

I added some context to my line of code, in case this helps? I know nothing about DOM. I am not trying to support Internet Explorer 4, this is not my code and I wouldn't be able to write JavaScript myself. I am only trying to get it compliant and the JSLint tool says about this line:

Problem at line 17 character 43: ['dhtmltooltip'] is better written in dot notation.

You should test for .getElementById first, because some browsers fake .all for backwards compatibility; and byId is the functionality you're really looking for. — Anonymous
– Anonymous, Commented Jan 4, 2010 at 18:54
In case anyone is wondering, there doesn't seem to be any performance benefit of using either notation: jsperf.com/dot-notation-vs-square-bracket-notation — Purefan
– Purefan, Commented Mar 20, 2013 at 19:24
If you look for a reason to use a.b instead of a['b'] check my answer — Salvador Dali
– Salvador Dali, Commented Jul 21, 2014 at 5:23

Quentin · Accepted Answer · 2010-01-04 19:02:57Z

95

There are two ways to access properties of an object in JavaScript.

Dot notation

foo.bar.baz

Square bracket notation

foo['bar']['baz']

You are using the latter in part of your code.

Douglas Crockford, who wrote JSLint (a tool which gives that error message), is of the opinion that is is better to use dot notation where possible.

edited Jan 4, 2010 at 19:02

answered Jan 4, 2010 at 18:57

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

skarama Over a year ago

Thank you, that explains it! You seem to consider his opinion not necessarily 100% valid tho, is there a better way then JSLint to validate my code?

pkaeding Over a year ago

I don't think there is a better way to validate the JS code, other than running it and testing it. I think the point @David Dorward was trying to make is that both are valid, and it is just a matter of style. The dot notation is the more preferred style, by most people, but there is nothing inherently wrong with using the square bracket notation.

skarama Over a year ago

Thanks pkaeding. What lead me to using JSLint in the first place was the w3 validator that said :<br/> character "&" is the first character of a delimiter but occurred as data <br/> so I figured I'd check that entire script, but this particular error didn't even come up..I'll make it another question if I don't find a way!

Quentin Over a year ago

DN is slightly more efficient than SBN, and is usually more readable. There are situations where I think that SBN is more readable, but that probably has more to do with the conventions I am used to than anything else. JSLint is a decent tool, don't take the wording of my answer as a criticism of it, my aim was to avoid promoting or disparaging it.

Quentin Over a year ago

A markup validator will pick up issues related to expressing JavaScript in an HTML document. JSLint will not, it looks only at the JS, not the representation of it in a document.

|

Glorfindel · Accepted Answer · 2019-05-29 10:05:29Z

JSLint wants this:

var tipobj= document.all ? document.all.dhtmltooltip : document.getElementById ? document.getElementById("dhtmltooltip") : "";

But nowadays is completely safe to assume that document.getElementById exists, it was introduced on the DOM Level Core 2 as of year 2000.

document.all is dead, unless you try to support really old browsers like IE4 (12 year old!):

var tipobj = document.getElementById("dhtmltooltip");

The two above snippets are a good example about the complexity cost of supporting very old browser versions:

Li0liQ · Accepted Answer · 2010-01-04 18:53:36Z

1

The following seems to be more user-friendly.

var tipobj; if (document.all) tipobj = document.all["dhtmltooltip"]; else if (document.getElementById) tipobj = document.getElementById("dhtmltooltip"); else tipobj = "";

answered Jan 4, 2010 at 18:53

Li0liQ

11.3k38 silver badges52 bronze badges

4 Comments

Quentin Over a year ago

Perhaps, but it still uses square bracket notation, so doesn't answer the question.

Li0liQ Over a year ago

You can change document.all["dhtmltooltip"] to document.all.dhtmltooltip if you like.

Quentin Over a year ago

You can, and that is the core of what the question is about.

Jimbo Jonny Over a year ago

This answer should be a comment...it doesn't even attempt to answer the actual question, just gives some formatting advice on the side.

avpx · Accepted Answer · 2010-01-04 18:54:57Z

A quick Google search says that document.all is only used to support IE4. It is an array that allows the browser to access different parts of the DOM (see here.)

The code you posted first checks if document.all exists. If not, it sets tipobj to "". Now, beyond this, it's not really worth deciphering the line you posted unless you really want IE4 support. Since very few people still use IE4 and this piece of code isn't compliant to any modern standards, I'd just drop that line and set tipobj to "".

chills42 · Accepted Answer · 2010-01-04 19:02:42Z

It looks like the only real issues are formatting/syntax. This should work exactly the same and conform to javascript best practice. The main difference is using javascript dot notation instead of bracket notation.

if (ie || ns6) { var tipobj = document.all ? document.all.dhtmltooltip : document.getElementById ? document.getElementById("dhtmltooltip") : ""; }

Hank Gay · Accepted Answer · 2010-01-04 19:06:32Z

It's using capability checking to retrieve an element with the id dhtmltooltip and falling back to an empty String if there is not a capability for doing the retrieval.

UPDATE: As others have pointed out, the check for getElementById should be first, and could probably be omitted since any browser that could be called "modern" with a straight face has had it for a long time.

UPDATE 2: With the new context, JSLint is complaining that it isn't document.all.dhtmltooltip. You should probably just rewrite the whole thing as:

var tipobj = document.getElementById("dhtmltooltip");

and be done with it.

So this line would replace my entire line, make it lighter and more current but still work the same?
As long as you don't care about supporting IE 4 and other incredibly ancient browsers.

Mihai Iorga · Accepted Answer · 2012-09-28 11:13:53Z

why not just use:

var tipobj = dhtmltooltip.id

Not sure why the long version is required unless the dot notation doesnt work in all browsers?

Tyson Cadenhead · Accepted Answer · 2013-02-02 19:19:49Z

If the dot notation is a problem, you can always set the /*jslint sub: true */ option to override it.

Salvador Dali · Accepted Answer · 2014-07-21 05:21:45Z

As is was answered by Quentin both ways are valid.

One of the reasons why I prefer to use elem.bar instead of elem['bar'] is that it saves 3 characters. Surely this is not a big improvement, but a free 3 bites per assignment is not bad.

Collectives™ on Stack Overflow

JavaScript dot notation [duplicate]

9 Answers 9

8 Comments

2 Comments

4 Comments

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

8 Comments

2 Comments

4 Comments

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Linked

Related