difference between dot notation and bracket notation in javascript [duplicate]

Question

I am trying to understand the difference between .Notation and [] notation. In my problem below when I use if (object[key] === true) I get the correct answer. When I use if (object.key === true) it does not work. Could someone explain why it's different.

var myObj = {
    one: false,
    two: false,
    three: false,
    four: true,
    five: false,
    six: false
};
var myFunc = function (object) {
    for (var key in object) {
        if (object[key] === true) {
            return "There is a true value in this object";
        } else {

        }
    }
    return "Sorry, there are no true values in this object";
};

In dot notation you access keys by name, in bracket notation by string. The later can be dynamic. — elclanrs
– elclanrs, Commented Dec 23, 2013 at 3:56
@thefourtheye, why specifically should a variable not be named object? Thanks. — jstone
– jstone, Commented Dec 23, 2013 at 4:07
@jstone There is a built-in JavaScript object named Object, so its better not to name the variables with the same name even if the case is different. — thefourtheye
– thefourtheye, Commented Dec 23, 2013 at 4:11

Community · Accepted Answer · 2017-05-23 11:46:39Z

18

When you use dot notation, key means the actual property in the object, which will not be there. So, undefined is returned which is not equal to true.

When you use [] notation you are accessing the property in the object with the name in the variable key. So, that will work.

For example,

var myObj = {
    myVar : 1
};

for (var key in myObj) {
    console.log(key);
    console.log(myObj.key);
    console.log(myObj[key]);
}

This will print,

myVar
undefined
1

Because, myObj has no member named key (myObj.key tries to get the member with the name key) and in the next case, myObj has a member named myVar (myObj[key] tries to get the member with the value in key).

Dot Notation

jslint prefers dot notation.

[] Notation

This offers flexibility. You can dynamically access the members with a variable.

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Dec 23, 2013 at 3:57

thefourtheye

241k53 gold badges466 silver badges505 bronze badges

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

Comments

Linga · Accepted Answer · 2013-12-23 04:01:02Z

Dot notation is faster to write and clearer to read.

Square bracket notation allows access to properties containing special characters and selection of properties using variables.

<form id="myForm">
<div><label>
<input type="checkbox" name="foo[]" value="1"> 1
</label></div>
<div><label>
<input type="checkbox" name="foo[]" value="2"> 2
</label></div>
<div><label>
<input type="checkbox" name="foo[]" value="3"> 3
</label></div>
</form>

Example with errors:

var inputs = myForm.foo[];

Square bracket notation, on the other hand, allows:

var inputs = myForm["foo[]"];

Since the square brackets are part of a string, their special meaning doesn't apply.The second advantage of square bracket notation is when dealing with variable property names.

for (var i = 0; i < 10; i++) {
doSomething(myForm["myControlNumber" + i]);
}

Collectives™ on Stack Overflow

difference between dot notation and bracket notation in javascript [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related