JavaScript dot notation

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, Jan 04 '10 at 18:54
In case anyone is wondering, there doesn't seem to be any performance benefit of using either notation: http://jsperf.com/dot-notation-vs-square-bracket-notation — Purefan, Mar 20 '13 at 19:24
If you look for a reason to use a.b instead of a['b'] check my [answer](http://stackoverflow.com/a/24858166/1090562) — Salvador Dali, Jul 21 '14 at 05:23

Quentin · Accepted Answer · 2010-01-04T19:02:57.127

93

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 04 '10 at 19:02

answered Jan 04 '10 at 18:57

Quentin

914,110
126
1,211
1,335

1

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? – skarama Jan 04 '10 at 19:04
5

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. – pkaeding Jan 04 '10 at 19:07
1

Thanks pkaeding. What lead me to using JSLint in the first place was the w3 validator that said :
character "&" is the first character of a delimiter but occurred as data
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! – skarama Jan 04 '10 at 19:09
2

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 Jan 04 '10 at 19:11
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. – Quentin Jan 04 '10 at 19:12
There is a third reason for using SBN in addition to the two reasons given in the reference sited. If one wants write code that can be minified with the Closure Compiler's ADVANCED_OPTIMIZATIONS option, then any globally reference symbols have to be exported. See [Export Symbols You Want to Keep](https://developers.google.com/closure/compiler/docs/api-tutorial3). The string literal used in SBN won't be replaced by the compiler. – Karl Oct 26 '12 at 15:16
Here’s a slightly more in-depth blog post, for those interested in the spec details: http://mathiasbynens.be/notes/javascript-properties – Mathias Bynens Mar 06 '13 at 08:59
I agree with this lintage 99% of the time.. But when you have something like: obj[var1]['foo'][var2], I prefer to use brackets all the way through for readability rather than obj[var1].foo['var2] which I find more difficult to scan. – Stephen Jun 19 '17 at 12:51

score 16 · Answer 2 · edited May 29 '19 at 10:05

16

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:

edited May 29 '19 at 10:05

Glorfindel

21,988
13
81
109

answered Jan 04 '10 at 19:00

Christian C. Salvadó

807,428
183
922
838

Does this line replace mine entirely? – skarama Jan 04 '10 at 19:07
Yes, unless you want to support IE 4 or older. – Christian C. Salvadó Jan 04 '10 at 19:08

score 1 · Answer 3 · answered Jan 04 '10 at 18:53

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 04 '10 at 18:53

Li0liQ

11,158
35
52

1

Perhaps, but it still uses square bracket notation, so doesn't answer the question. – Quentin Jan 04 '10 at 18:58
You can change `document.all["dhtmltooltip"]` to `document.all.dhtmltooltip` if you like. – Li0liQ Jan 04 '10 at 19:02
1

You can, and that is the core of what the question is about. – Quentin Jan 04 '10 at 19:04
This answer should be a comment...it doesn't even attempt to answer the actual question, just gives some formatting advice on the side. – Jimbo Jonny Feb 22 '16 at 00:55

score 0 · Answer 4 · edited Sep 28 '12 at 11:13

0

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?

edited Sep 28 '12 at 11:13

Mihai Iorga

39,330
16
106
107

answered Aug 03 '12 at 21:42

Michael Sloat

1

score 0 · Answer 5 · answered Feb 02 '13 at 19:19

0

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

answered Feb 02 '13 at 19:19

Tyson Cadenhead

352
3
8

Hank Gay · Answer 6 · 2010-01-04T19:06:32.660

0

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.

edited Jan 04 '10 at 19:06

answered Jan 04 '10 at 18:54

Hank Gay

70,339
36
160
222

1

What does that have to do with using dot notation? – Quentin Jan 04 '10 at 18:59
So this line would replace my entire line, make it lighter and more current but still work the same? – skarama Jan 04 '10 at 19:11
As long as you don't care about supporting IE 4 and other incredibly ancient browsers. – Hank Gay Jan 04 '10 at 19:12

score 0 · Answer 7 · answered Jan 04 '10 at 18:54

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 "".

What does that have to do with using dot notation? – Quentin Jan 04 '10 at 18:59 — Quentin, Jan 04 '10 at 18:59

score 0 · Answer 8 · answered Jan 04 '10 at 19:02

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") : "";
}

score 0 · Answer 9 · answered Jul 21 '14 at 05:21

0

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.

answered Jul 21 '14 at 05:21

Salvador Dali

214,103
147
703
753

JavaScript dot notation

9 Answers9

Linked