Square Brackets Javascript Object Key












53














Can anyone explain how the why/how the below method of assigning keys in javascript works?



a = "b"

c = {[a]: "d"}


return:



Object {b: "d"}





javascript







share|improve this question
























  • @Tushar: There is no call to Object here. That's completely unrelated.
    – Felix Kling
    Sep 11 '15 at 4:52










  • @FelixKling Array is treated as object, typeof
    – Tushar
    Sep 11 '15 at 4:53










  • @Tushar: arrays are objects, but there is no array here and, again, no call to Object.
    – Felix Kling
    Sep 11 '15 at 4:54










  • Yes, but while typeof == "object", Array.prototype.constructor != Object.prototype.constructor, nor is the behavior the same.
    – Sean Vieira
    Sep 11 '15 at 5:04
















53














Can anyone explain how the why/how the below method of assigning keys in javascript works?



a = "b"

c = {[a]: "d"}


return:



Object {b: "d"}





javascript







share|improve this question
























  • @Tushar: There is no call to Object here. That's completely unrelated.
    – Felix Kling
    Sep 11 '15 at 4:52










  • @FelixKling Array is treated as object, typeof
    – Tushar
    Sep 11 '15 at 4:53










  • @Tushar: arrays are objects, but there is no array here and, again, no call to Object.
    – Felix Kling
    Sep 11 '15 at 4:54










  • Yes, but while typeof == "object", Array.prototype.constructor != Object.prototype.constructor, nor is the behavior the same.
    – Sean Vieira
    Sep 11 '15 at 5:04














53












53








53


10





Can anyone explain how the why/how the below method of assigning keys in javascript works?



a = "b"

c = {[a]: "d"}


return:



Object {b: "d"}





javascript







share|improve this question















Can anyone explain how the why/how the below method of assigning keys in javascript works?



a = "b"

c = {[a]: "d"}


return:



Object {b: "d"}





javascript




javascript






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Sep 11 '15 at 4:47









Tushar

67.3k1192120




67.3k1192120










asked Sep 11 '15 at 4:40









lcharbon

5321510




5321510












  • @Tushar: There is no call to Object here. That's completely unrelated.
    – Felix Kling
    Sep 11 '15 at 4:52










  • @FelixKling Array is treated as object, typeof
    – Tushar
    Sep 11 '15 at 4:53










  • @Tushar: arrays are objects, but there is no array here and, again, no call to Object.
    – Felix Kling
    Sep 11 '15 at 4:54










  • Yes, but while typeof == "object", Array.prototype.constructor != Object.prototype.constructor, nor is the behavior the same.
    – Sean Vieira
    Sep 11 '15 at 5:04


















  • @Tushar: There is no call to Object here. That's completely unrelated.
    – Felix Kling
    Sep 11 '15 at 4:52










  • @FelixKling Array is treated as object, typeof
    – Tushar
    Sep 11 '15 at 4:53










  • @Tushar: arrays are objects, but there is no array here and, again, no call to Object.
    – Felix Kling
    Sep 11 '15 at 4:54










  • Yes, but while typeof == "object", Array.prototype.constructor != Object.prototype.constructor, nor is the behavior the same.
    – Sean Vieira
    Sep 11 '15 at 5:04
















@Tushar: There is no call to Object here. That's completely unrelated.
– Felix Kling
Sep 11 '15 at 4:52




@Tushar: There is no call to Object here. That's completely unrelated.
– Felix Kling
Sep 11 '15 at 4:52












@FelixKling Array is treated as object, typeof
– Tushar
Sep 11 '15 at 4:53




@FelixKling Array is treated as object, typeof
– Tushar
Sep 11 '15 at 4:53












@Tushar: arrays are objects, but there is no array here and, again, no call to Object.
– Felix Kling
Sep 11 '15 at 4:54




@Tushar: arrays are objects, but there is no array here and, again, no call to Object.
– Felix Kling
Sep 11 '15 at 4:54












Yes, but while typeof == "object", Array.prototype.constructor != Object.prototype.constructor, nor is the behavior the same.
– Sean Vieira
Sep 11 '15 at 5:04




Yes, but while typeof == "object", Array.prototype.constructor != Object.prototype.constructor, nor is the behavior the same.
– Sean Vieira
Sep 11 '15 at 5:04












2 Answers
2






active

oldest

votes


















78














It's the new ES2015 (the EcmaScript spec formally known as ES6) computed property name syntax. It's a shorthand for the someObject[someKey] assignment that you know from ES3/5:



var a = "b"

var c = {[a]: "d"}


is syntactic sugar for:



var a = "b"

var c = {}

c[a] = "d"





share|improve this answer





















  • It's not only ES6
    – Tushar
    Sep 11 '15 at 4:47










  • @Tushar - where else does this work? It throws for me in a normal ES5 environment (Node 0.10).
    – Sean Vieira
    Sep 11 '15 at 4:51



















4














Really the use of gives an excellent way to use actual value of variable as key/property while creating JavaScript objects.




I'm pretty much statisfied with the above answer and I appreciate it as it allowed me to write this with a little example.



I've executed the code line by line on Node REPL (Node shell).




> var key = "fullName";     // Assignment

undefined

>

> var obj = {key: "Rishikesh Agrawani"}    // Here key's value will not be used

undefined

> obj     // Inappropriate, which we don't want

{ key: 'Rishikesh Agrawani' }

>

> // Let's fix

undefined

> var obj2 = {[key]: "Rishikesh Agrawani"}

undefined

> obj2

{ fullName: 'Rishikesh Agrawani' }

>





share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f32515598%2fsquare-brackets-javascript-object-key%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    78














    It's the new ES2015 (the EcmaScript spec formally known as ES6) computed property name syntax. It's a shorthand for the someObject[someKey] assignment that you know from ES3/5:



    var a = "b"
    
var c = {[a]: "d"}


    is syntactic sugar for:



    var a = "b"
    
var c = {}
    
c[a] = "d"





    share|improve this answer





















    • It's not only ES6
      – Tushar
      Sep 11 '15 at 4:47










    • @Tushar - where else does this work? It throws for me in a normal ES5 environment (Node 0.10).
      – Sean Vieira
      Sep 11 '15 at 4:51
















    78














    It's the new ES2015 (the EcmaScript spec formally known as ES6) computed property name syntax. It's a shorthand for the someObject[someKey] assignment that you know from ES3/5:



    var a = "b"
    
var c = {[a]: "d"}


    is syntactic sugar for:



    var a = "b"
    
var c = {}
    
c[a] = "d"





    share|improve this answer





















    • It's not only ES6
      – Tushar
      Sep 11 '15 at 4:47










    • @Tushar - where else does this work? It throws for me in a normal ES5 environment (Node 0.10).
      – Sean Vieira
      Sep 11 '15 at 4:51














    78












    78








    78






    It's the new ES2015 (the EcmaScript spec formally known as ES6) computed property name syntax. It's a shorthand for the someObject[someKey] assignment that you know from ES3/5:



    var a = "b"
    
var c = {[a]: "d"}


    is syntactic sugar for:



    var a = "b"
    
var c = {}
    
c[a] = "d"





    share|improve this answer












    It's the new ES2015 (the EcmaScript spec formally known as ES6) computed property name syntax. It's a shorthand for the someObject[someKey] assignment that you know from ES3/5:



    var a = "b"
    
var c = {[a]: "d"}


    is syntactic sugar for:



    var a = "b"
    
var c = {}
    
c[a] = "d"






    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Sep 11 '15 at 4:46









    Sean Vieira

    112k23222227




    112k23222227












    • It's not only ES6
      – Tushar
      Sep 11 '15 at 4:47










    • @Tushar - where else does this work? It throws for me in a normal ES5 environment (Node 0.10).
      – Sean Vieira
      Sep 11 '15 at 4:51


















    • It's not only ES6
      – Tushar
      Sep 11 '15 at 4:47










    • @Tushar - where else does this work? It throws for me in a normal ES5 environment (Node 0.10).
      – Sean Vieira
      Sep 11 '15 at 4:51
















    It's not only ES6
    – Tushar
    Sep 11 '15 at 4:47




    It's not only ES6
    – Tushar
    Sep 11 '15 at 4:47












    @Tushar - where else does this work? It throws for me in a normal ES5 environment (Node 0.10).
    – Sean Vieira
    Sep 11 '15 at 4:51




    @Tushar - where else does this work? It throws for me in a normal ES5 environment (Node 0.10).
    – Sean Vieira
    Sep 11 '15 at 4:51













    4














    Really the use of gives an excellent way to use actual value of variable as key/property while creating JavaScript objects.




    I'm pretty much statisfied with the above answer and I appreciate it as it allowed me to write this with a little example.



    I've executed the code line by line on Node REPL (Node shell).




    > var key = "fullName";     // Assignment
    
undefined
    
>
    
> var obj = {key: "Rishikesh Agrawani"}    // Here key's value will not be used
    
undefined
    
> obj     // Inappropriate, which we don't want
    
{ key: 'Rishikesh Agrawani' }
    
>
    
> // Let's fix
    
undefined
    
> var obj2 = {[key]: "Rishikesh Agrawani"}
    
undefined
    
> obj2
    
{ fullName: 'Rishikesh Agrawani' }
    
>





    share|improve this answer


























      4














      Really the use of gives an excellent way to use actual value of variable as key/property while creating JavaScript objects.




      I'm pretty much statisfied with the above answer and I appreciate it as it allowed me to write this with a little example.



      I've executed the code line by line on Node REPL (Node shell).




      > var key = "fullName";     // Assignment
      
undefined
      
>
      
> var obj = {key: "Rishikesh Agrawani"}    // Here key's value will not be used
      
undefined
      
> obj     // Inappropriate, which we don't want
      
{ key: 'Rishikesh Agrawani' }
      
>
      
> // Let's fix
      
undefined
      
> var obj2 = {[key]: "Rishikesh Agrawani"}
      
undefined
      
> obj2
      
{ fullName: 'Rishikesh Agrawani' }
      
>





      share|improve this answer
























        4












        4








        4






        Really the use of gives an excellent way to use actual value of variable as key/property while creating JavaScript objects.




        I'm pretty much statisfied with the above answer and I appreciate it as it allowed me to write this with a little example.



        I've executed the code line by line on Node REPL (Node shell).




        > var key = "fullName";     // Assignment
        
undefined
        
>
        
> var obj = {key: "Rishikesh Agrawani"}    // Here key's value will not be used
        
undefined
        
> obj     // Inappropriate, which we don't want
        
{ key: 'Rishikesh Agrawani' }
        
>
        
> // Let's fix
        
undefined
        
> var obj2 = {[key]: "Rishikesh Agrawani"}
        
undefined
        
> obj2
        
{ fullName: 'Rishikesh Agrawani' }
        
>





        share|improve this answer












        Really the use of gives an excellent way to use actual value of variable as key/property while creating JavaScript objects.




        I'm pretty much statisfied with the above answer and I appreciate it as it allowed me to write this with a little example.



        I've executed the code line by line on Node REPL (Node shell).




        > var key = "fullName";     // Assignment
        
undefined
        
>
        
> var obj = {key: "Rishikesh Agrawani"}    // Here key's value will not be used
        
undefined
        
> obj     // Inappropriate, which we don't want
        
{ key: 'Rishikesh Agrawani' }
        
>
        
> // Let's fix
        
undefined
        
> var obj2 = {[key]: "Rishikesh Agrawani"}
        
undefined
        
> obj2
        
{ fullName: 'Rishikesh Agrawani' }
        
>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 2 at 17:08









        hygull

        3,14111228




        3,14111228






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f32515598%2fsquare-brackets-javascript-object-key%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -

            Popular posts from this blog

            List item for chat from Array inside array React Native

            Image
            0 This is my code for Chat Box, the window where I have "In" and "Out" messages are appearing. import React, { Component } from "react"; import { StyleSheet, Text, View, TouchableOpacity, TextInput, FlatList, Platform, AsyncStorage } from "react-native"; import Tutor from "../image/krutika.jpg"; import { Container, Header, Left, Input, Body, Right, Thumbnail, Button } from "native-base"; import FontAwesome from "react-native-vector-icons/FontAwesome"; import Ionicons from "react-native-vector-icons/Ionicons"; import Icon1 from "react-native-vector-icons/FontAwesome"; import axios from "axios"; export default class ChatBox extends Component { st...
            Read more

            Thiostrepton

            Image
            Thiostrepton [1] Names Other names Alaninamide, Bryamycin, Thiactin Identifiers CAS Number 1393-48-2   Y 3D model (JSmol) Interactive image ChEMBL ChEMBL468719   N ECHA InfoCard 100.014.304 PubChem CID 16130278 InChI InChI=1S/C72H85N19O18S5/c1-14-26(3)47-63(105)78-30(7)57(99)75-28(5)56(98)76-31(8)58(100)91-72-19-18-40(66-85-43(22-111-66)59(101)77-29(6)55(97)74-27(4)54(73)96)81-52(72)42-21-112-67(83-42)49(34(11)109-69(107)41-20-37(32(9)92)36-16-17-39(79-47)51(95)50(36)80-41)89-60(102)44-24-113-68(86-44)53(71(13,108)35(12)94)90-62(104)45-23-110-65(84-45)38(15-2)82-64(106)48(33(10)93)88-61(103)46-25-114-70(72)87-46/h15-17,20-22,24-26,30-35,39,45,47-49,51-53,79,92-95,108H,4-6,14,18-19,23H2,1-3,7-13H3,(H2,73,96)(H,74,97)(H,75,99)(H,76,98)(H,77,101)(H,78,105)(H,82,106)(H,88,103)(H,89,102)(H,90,104)(H,91,100)/b38-15-/t26-,30-,31-,32-,33+,34+,35+,39+,45+,47-,48-,49-,51-,52+,53+,71+,72+/m0/s1 Key: NSFFHOGKXHRQEW-AIHSUZKVSA-N ...
            Read more

            Caerphilly

            Image
            This article is about the town of Caerphilly. For the cheese of the same name, see Caerphilly cheese. For other uses, see Caerphilly (disambiguation). Caerphilly Welsh: Caerffili Caerphilly Castle Caerphilly Location within Caerphilly Population 30,388  OS grid reference ST1586 Principal area Caerphilly Ceremonial county Gwent Country Wales Sovereign state United Kingdom Post town CAERPHILLY Postcode district CF83 Dialling code 029 Police Gwent Fire South Wales Ambulance Welsh EU Parliament Wales UK Parliament Caerphilly Welsh Assembly Caerphilly List of places UK Wales Caerphilly 51°34′41″N 3°13′05″W  /  51.578°N 3.218°W  / 51.578; -3.218 Coordinates: 51°34′41″N 3°13′05″W  /  51.578°N 3.218°W  / 51.578; -3.218 Caerphilly ( / k aɪər ˈ f ɪ l i / ; Welsh: Caerffili , Welsh pronunciation:  [ˌkɑːɨrˈfɪlɪ] ) is a town and community in South Wales, at the southern end of the Rhymney Valley....
            Read more