Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<pre><code>var dict = []; // create an empty array dict.push({ key: "keyName", value: "the value" }); // repeat this last part as needed to add more key/value pairs </code></pre> <p>Basically, you're creating an object literal with 2 properties (called <code>key</code> and <code>value</code>) and inserting it (using <code>push()</code>) into the array.</p> <hr> <p><strong>Edit:</strong> So almost 5 years later, this answer is getting downvotes because it's not creating an "normal" JS object literal (aka map, aka hash, aka dictionary).<br> It <em>is</em> however creating the structure that OP asked for (and which is illustrated in the other question linked to), which is <em>an array of object literals</em>, each with <code>key</code> and <code>value</code> properties. Don't ask me why that structure was required, but it's the one that was asked for.</p> <p>But, but, if what you want in a plain JS object - and <em>not</em> the structure OP asked for - see <a href="https://stackoverflow.com/a/22315575/167996">tcll's answer</a>, though the bracket notation is a bit cumbersome if you just have simple keys that are valid JS names. You can just do this:</p> <pre><code>// object literal with properties var dict = { key1: "value1", key2: "value2" // etc. }; </code></pre> <p>Or use regular dot-notation to set properties after creating an object:</p> <pre><code>// empty object literal with properties added afterward var dict = {}; dict.key1 = "value1"; dict.key2 = "value2"; // etc. </code></pre> <p>You <em>do</em> want the bracket notation if you've got keys that have spaces in them, special characters, or things like that. E.g:</p> <pre><code>var dict = {}; // this obviously won't work dict.some invalid key (for multiple reasons) = "value1"; // but this will dict["some invalid key (for multiple reasons)"] = "value1"; </code></pre> <p>You also want bracket notation if your keys are dynamic:</p> <pre><code>dict[firstName + " " + lastName] = "some value"; </code></pre> <p>Note that keys (property names) are always strings, and non-string values will be coerced to a string when used as a key. E.g. a <code>Date</code> object gets converted to its string representation:</p> <pre><code>dict[new Date] = "today's value"; console.log(dict); // =&gt; { // "Sat Nov 04 2016 16:15:31 GMT-0700 (PDT)": "today's value" // } </code></pre> <p>Note however that this doesn't necessarily "just work", as many objects will have a string representation like <code>"[object Object]"</code> which doesn't make for a non-unique key. So be wary of something like:</p> <pre><code>var objA = { a: 23 }, objB = { b: 42 }; dict[objA] = "value for objA"; dict[objB] = "value for objB"; console.log(dict); // =&gt; { "[object Object]": "value for objB" } </code></pre> <p>Despite <code>objA</code> and <code>objB</code> being completely different and unique elements, they both have the same basic string representation: <code>"[object Object]"</code>.</p> <p>The reason <code>Date</code> doesn't behave like this is that the <code>Date</code> prototype has a custom <code>toString</code> method which overrides the default string representation. And you can do the same:</p> <pre><code>// a simple constructor with a toString prototypal method function Foo() { this.myRandomNumber = Math.random() * 1000 | 0; } Foo.prototype.toString = function () { return "Foo instance #" + this.myRandomNumber; }; dict[new Foo] = "some value"; console.log(dict); // =&gt; { // "Foo instance #712": "some value" // } </code></pre> <p>(Note that since the above uses a <em>random</em> number, name collisions can still occur very easily. It's just to illustrate an implementation of <code>toString</code>.)</p> <p>So when trying to use objects as keys, JS will use the object's own <code>toString</code> implementation, if any, or use the default string representation.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload