What does this initialization do ? = {}

Question

I've seen the folllowing:

var field = {};
field.tf = $("#textfield");
field.date = $("td#CurrentDate");
field.name = $("input#myname");

what does the initialization var field = {} do? Is it creating a generic object (field) on which properties (field.tf) can be set on the fly?

Answer 1

JavaScript has a number of different literal syntaxes beyond the standard Number, String, Boolean that are common to other languages:

foo = {};

is the same as:

foo = new Object();

While

foo = [];

is the same as:

foo = new Array();

and

foo = /foo/;

is the same as:

foo = new RegExp('foo');

These literal syntaxes have their own quirks and nuances. For objects, key-value pairs are comma separated with the keys and values separated by colon characters:

foo = {
    bar: 'baz',
    fizz: 'buzz'
};

is equivalent to:

foo = new Object();
foo.bar = 'baz';
foo.fizz = 'buzz';

For arrays, the array members are simply comma separated:

foo = ['bar', 'baz'];

is equivalent to:

foo = new Array();
foo.push('bar', 'baz');

_{Note that for arrays the constructor function has a flaw. new Array(1, 2, 3) is equivalent to [1, 2, 3], but new Array(3) is not equivalent to [3], it is instead equivalent to [undefined, undefined, undefined] (an array of size 3 with no members).}

This convenient initialization structure, and the ability to nest objects and arrays within each other is what lead to the formalization of the JSON data interchange format

Answer 2

var field = {};

It represent an object datatype.

Answer 3

A generic object.

It is the same as:

var field = {
   tf: $("#textfield"),
   date: $("td#CurrentDate"),
   name: $("input#myname")
};

Answer 4

Is it creating a generic object (field) on which properties (field.tf) can be set on the fly?

Answer: Yes, that's exactly what it's doing.

For what it's worth, the code in the question could be simplified by defining all the properties in the initial declaration:

var field = {
    'tf'   : $("#textfield"),
    'date' : $("td#CurrentDate"),
    'name' : $("input#myname")
};

That does exactly the same as the original code, but a bit neater.

Answer 5

var something = {} defines an object in JavaScript. So if you do not know what {} means, I assume that you don't have a full understanding of the 3 other lines of code as well. Let's give it a try:

So "field" is an object and you can give any structure to this object. It can have height, width, dimension and whatever you like. So, we defined our object like this:

var field = {};

Now, how do you add the properties to the object? In object oriented programming, we have the dot(.) notation. For example: person.name, requests the name of a person. According to your code:

field.tf = $("#textfield");
field.date = $("td#CurrentDate");
field.name = $("input#myname");

a) First you initialize the tf of the field to the value of your text box.
b) Secondly you initialize the date of the field to the value of your text box.

c) And finally you initialize the name of the field to the value of your text box.

You could also define your object as:

var field = {
'tf'   : $("#textfield"),
'date' : $("td#CurrentDate"),
'name' : $("input#myname")
};

I hope that helps! Cheers

Answer 6

That's just the standard notation for creating an empty JavaScript object. You'll see short-hand like this quite frequently:

var object = { };
var array = [ ];

Think of it as the minimalist version of a declaration:

var object = {
  key1: 'value1',
  key2: 'value2'
}

var array = [ 1, 2, 3, 4 ];

Answer 7

It is the same as saying:

var field = new Object();

Another example is creating an array: var myArr = [ ] vs var myArr = new Array();

Answer 8

It is creating a javascript object by directly assigning object literal to it.

Object literals provide a very convenient notation for creating new object values. An object literal is a pair of curly braces surrounding zero or more name/value pairs. An object literal can appear anywhere an expression can appear:

var empty_object = {};
var stooge = {
   "first-name": "Jerome",
   "last-name": "Howard"
};