Commas in Javascript

Question

<script>

(function() {

$('html').addClass('js');

var contactForm = {

    container: $('#contact'),          <-- THIS COMMA

    init: function() {
        $('<button></button>', {
            text: 'Contact Me'
        })
            .insertAfter('article:first')
            .on('click', this.show);
    },  <---------------------------------- AND THIS COMMA

    show: function() {
        contactForm.container.show();
    }
};

contactForm.init();

})();

</script>

In the above script, I noticed:

container: $('#contact'),

Is that one way to declare a variable? Doing the following breaks the script:

var container = $('#contact');

Also, what is with the commas after the init function and the container variable (if it is a variable)?

This is Javascript object syntax and is not specific to jQuery. — Frédéric Hamidi, May 30 '12 at 20:23

VisioN · Accepted Answer · 2012-05-30T20:34:48.017

8

This way you declare an object:

var contactForm = {
    // properties:
    property1 : value,
    property2 : value,
    property3 : value,

    // methods:
    method1 : function() {
        // ...
    },
    method2 : function() {
        // ...
    }
};

You can find more information about JavaScript objects in MDN ...and in the comments below :)

edited May 30 '12 at 20:34

answered May 30 '12 at 20:22

VisioN

143,310
32
282
281

If you don't mind my asking, what exactly is an object? I possess 0 Object Oriented programming knowledge. Is it like a function? Sorry if this question is dumb. – eveo May 30 '12 at 20:23
1

@eveo that's a big question. Here's an abstract (not specific to js) example. Look at your keyboard. That's an object. The idea of a keyboard is a "class", and the specific instance of that class is an "object". – Kyle Trauberman May 30 '12 at 20:24
2

@eveo, I'd suggest you start from [MDN's Javascript Guide](https://developer.mozilla.org/en/JavaScript/Guide), it will help you get a good grasp at the language and its practical uses. – Frédéric Hamidi May 30 '12 at 20:27
Perfect article @KyleTrauberman, not sure why you edited it out. Thank you very much. I'll check out your link too Frédéric Hamidi. Thanks guys. Here's the link for anyone who see's this thread after that Kyle Trauberman linked. http://www.javascriptkit.com/javatutors/oopjs.shtml – eveo May 30 '12 at 20:29
@eveo, I didn't post a link, someone else posted that link. – Kyle Trauberman May 30 '12 at 20:30

Kyle Trauberman · Answer 2 · 2012-05-30T20:56:05.630

3

That block of code (beginning with var contactForm = {) is declaring an object using object literal notation. Commas separate the different key-value pairs in the object literal notation.

var obj = { key1: value1, key2: value2 };

edited May 30 '12 at 20:56

answered May 30 '12 at 20:23

Kyle Trauberman

25,414
13
85
121

2

Nope, this is not JSON notation. [JSON requires quotes around keys](http://stackoverflow.com/q/949449/464709). – Frédéric Hamidi May 30 '12 at 20:50
1

I never realized there was a difference. I always thought the quotes were just optional. Thanks for the link. – Kyle Trauberman May 30 '12 at 20:58

score 2 · Answer 3 · answered May 30 '12 at 20:22

2

Commas are used to separate name/value pairs when defining objects:

var newObj = {
  name: value,
  another_name: another_value
};

answered May 30 '12 at 20:22

kinakuta

9,029
1
39
48

score 1 · Answer 4 · edited May 23 '17 at 12:11

Those are key:value pairs of the object contactForm you defined separated by commans

var obj = { key1 : value1, 

            key2 : value2

            method1 : function(){
              // definition
            },
            method2 : function(){
              // definition
            }
}

The thing that confused me in my early days is that what is function(){....} doing inside a variable(in this case an object) definition until I discovered functions are objects too in js which may not be the same case in language you have used earlier .

and this function function(){....} without name is called a anonymous function.

Here's a good thread on anonymous function Why do you need to invoke an anonymous function on the same line?

S P · Answer 5 · 2012-05-30T20:33:10.347

1

That is called Object literal notation.

Which is basically a Comma-Separated list of name/value pairs, wrapped in curly braces.

Advantage of this notation is that all data within the braces are encapsulated and not defined globally which avoids conflicts with other scripts or libraries.

edited May 30 '12 at 20:33

answered May 30 '12 at 20:27

S P

4,615
2
18
31

Commas in Javascript

5 Answers5