JavaScript: Writing convention and the differences

Question

I am confused with the way I write my javascriptand I am wondering what are the differences between? They all generate the same result but which is the best way to write it?

I am using Framer.js library for prototyping. I do aware Framer.js uses coffeescriptbut I am writing them in vanilla javascript.

Difference 1

framerOnboard.card1.states.animationOptions({
    curve: "spring(200, 20, 0)"
});

framerOnboard.card1.states.animationOptions = {
    curve: "spring(200, 20, 0)"
};

Difference 2

framerOnboard.card1.states["switch"]("two");

framerOnboard.card1.states.switch("two");

The idea of dot notation for property names is to save some typing, so if the names are suitable, use dots. :-) — RobG, Sep 08 '15 at 02:30

score 1 · Answer 1 · edited Nov 18 '17 at 05:32

Difference 1:

The first one you are invoking the method animationOptions and using {curve: "spring(200, 20, 0)"} as the argument. The second one you are setting framerOnboard.card1.states.animationOptions to be an object with a key as 'curve' and the value as "spring(200, 20, 0)".

Difference 2:

They both do the same thing, which is to invoke the method switch with "two" as the argument. However. the first one is called bracket notation and the second one is called dot notation. Here are some use cases for one over the other.

score 1 · Accepted Answer · answered Sep 08 '15 at 02:54

Difference 1

animationOptions.- It is a function that receives as a parameter an object. This object has a key and this key has a string value.

framerOnboard.card1.states.animationOptions({
    curve: "spring(200, 20, 0)"
});

animationOptions.- It is an object with a key and this key has a string value.

framerOnboard.card1.states.animationOptions = {
    curve: "spring(200, 20, 0)"
};

Difference 2

There is no difference.

Check this example:

var framerOnboard = {};
framerOnboard.card1 = {};
framerOnboard.card1.states = {};
framerOnboard.card1.states.switch = function(arg) // It's a function.
{
    alert(arg);
};

You can execute this functions in two ways:

framerOnboard.card1.states["switch"]("two");

Or

framerOnboard.card1.states.switch("two");

http://jsfiddle.net/dannyjhonston/un693467/1/

If you declare a variable as {} what does this mean in Javascript sense? Making it into an object? — Vennsoh, Sep 08 '15 at 03:04
Yes, it's an object. Check this link: http://jsfiddle.net/dannyjhonston/c4qud6co/ — Danny Fardy Jhonston Bermúdez, Sep 08 '15 at 03:11

JavaScript: Writing convention and the differences

2 Answers2