]>
Commit | Line | Data |
---|---|---|
8f9d1d4d DC |
1 | --- |
2 | title: dot-notation | |
8f9d1d4d DC |
3 | rule_type: suggestion |
4 | --- | |
5 | ||
6 | ||
eb39fafa DC |
7 | |
8 | In JavaScript, one can access properties using the dot notation (`foo.bar`) or square-bracket notation (`foo["bar"]`). However, the dot notation is often preferred because it is easier to read, less verbose, and works better with aggressive JavaScript minimizers. | |
9 | ||
10 | ```js | |
11 | foo["bar"]; | |
12 | ``` | |
13 | ||
14 | ## Rule Details | |
15 | ||
16 | This rule is aimed at maintaining code consistency and improving code readability by encouraging use of the dot notation style whenever possible. As such, it will warn when it encounters an unnecessary use of square-bracket notation. | |
17 | ||
18 | Examples of **incorrect** code for this rule: | |
19 | ||
8f9d1d4d DC |
20 | :::incorrect |
21 | ||
eb39fafa DC |
22 | ```js |
23 | /*eslint dot-notation: "error"*/ | |
24 | ||
25 | var x = foo["bar"]; | |
26 | ``` | |
27 | ||
8f9d1d4d DC |
28 | ::: |
29 | ||
eb39fafa DC |
30 | Examples of **correct** code for this rule: |
31 | ||
8f9d1d4d DC |
32 | :::correct |
33 | ||
eb39fafa DC |
34 | ```js |
35 | /*eslint dot-notation: "error"*/ | |
36 | ||
37 | var x = foo.bar; | |
38 | ||
39 | var x = foo[bar]; // Property name is a variable, square-bracket notation required | |
40 | ``` | |
41 | ||
8f9d1d4d DC |
42 | ::: |
43 | ||
eb39fafa DC |
44 | ## Options |
45 | ||
46 | This rule accepts a single options argument: | |
47 | ||
48 | * Set the `allowKeywords` option to `false` (default is `true`) to follow ECMAScript version 3 compatible style, avoiding dot notation for reserved word properties. | |
49 | * Set the `allowPattern` option to a regular expression string to allow bracket notation for property names that match a pattern (by default, no pattern is tested). | |
50 | ||
51 | ### allowKeywords | |
52 | ||
53 | Examples of **correct** code for the `{ "allowKeywords": false }` option: | |
54 | ||
8f9d1d4d DC |
55 | :::correct |
56 | ||
eb39fafa DC |
57 | ```js |
58 | /*eslint dot-notation: ["error", { "allowKeywords": false }]*/ | |
59 | ||
60 | var foo = { "class": "CS 101" } | |
61 | var x = foo["class"]; // Property name is a reserved word, square-bracket notation required | |
62 | ``` | |
63 | ||
8f9d1d4d DC |
64 | ::: |
65 | ||
609c276f TL |
66 | Examples of additional **correct** code for the `{ "allowKeywords": false }` option: |
67 | ||
8f9d1d4d DC |
68 | :::correct |
69 | ||
609c276f TL |
70 | ```js |
71 | /*eslint dot-notation: ["error", { "allowKeywords": false }]*/ | |
72 | ||
73 | class C { | |
74 | #in; | |
75 | foo() { | |
76 | this.#in; // Dot notation is required for private identifiers | |
77 | } | |
78 | } | |
79 | ``` | |
80 | ||
8f9d1d4d DC |
81 | ::: |
82 | ||
eb39fafa DC |
83 | ### allowPattern |
84 | ||
85 | For example, when preparing data to be sent to an external API, it is often required to use property names that include underscores. If the `camelcase` rule is in effect, these [snake case](https://en.wikipedia.org/wiki/Snake_case) properties would not be allowed. By providing an `allowPattern` to the `dot-notation` rule, these snake case properties can be accessed with bracket notation. | |
86 | ||
87 | Examples of **correct** code for the sample `{ "allowPattern": "^[a-z]+(_[a-z]+)+$" }` option: | |
88 | ||
8f9d1d4d DC |
89 | :::correct |
90 | ||
eb39fafa DC |
91 | ```js |
92 | /*eslint camelcase: "error"*/ | |
93 | /*eslint dot-notation: ["error", { "allowPattern": "^[a-z]+(_[a-z]+)+$" }]*/ | |
94 | ||
95 | var data = {}; | |
96 | data.foo_bar = 42; | |
97 | ||
98 | var data = {}; | |
99 | data["fooBar"] = 42; | |
100 | ||
101 | var data = {}; | |
102 | data["foo_bar"] = 42; // no warning | |
103 | ``` | |
8f9d1d4d DC |
104 | |
105 | ::: |