creating one var object vs multiple var

Question

For better code structure, I want to use a javascript object holding all properties instead of using multiple vars:

// 1. WAY
// This returns an error, as _inp cannot be accessed by input_value
// Uncaught TypeError: Cannot read property 'value' of undefined
var ref = {
_inp: input.target, 
input_value: _inp.value,
....
};

// 2. WAY
// When using this, it works
var ref = {
_inp: input.target, 
input_value: input.target.value,
....
};


// 3. WAY
// This obviously works, too.
var 
    _inp = input.target,
    input_value = _inp.value,

My Question is, why does 3. Way works and 1.Way doesnt?

You should take a look at this and learn your javascript data types, http://www.oreillynet.com/pub/a/javascript/excerpts/learning-javascript/javascript-datatypes-variables.html — gmaliar, Feb 11 '14 at 08:44

score 3 · Accepted Answer · edited May 23 '17 at 10:33

3

In example 1, _inp will be a property of an object. It isn't a variable. You can only access it from a reference to the object (and it won't be a property of the object until the object exists, which will be after the object literal has been evaluated, see also Self-references in object literal declarations).

edited May 23 '17 at 10:33

Community

1
1

answered Feb 11 '14 at 08:43

Quentin

914,110
126
1,211
1,335

Very useful link to that other StackOverflow question with some rather interesting solutions. – Xuntar Feb 11 '14 at 08:52
Yes that link helps me out. The following solutions works: (SOLUTION 1) var ref = { _inp: input.target, input_value: null, init: function() { this.input_value = this._inp.value; return this; } }.init(); (SOLUTION 2: preferred) var ref = { _inp: input.target, get input_value(){ return this._inp.value; } }; I prefer solution 2. However, I guess for performance reasons, it would be better to use multiple vars instead of one object-creation (see 3.WAY). – nimo23 Feb 11 '14 at 09:03

score 1 · Answer 2 · answered Feb 11 '14 at 08:43

1

Because _inp will only be filled in with the input.target value after passing through the entire var ref = { ... }; statement. This means that when you try to use it, it doesn't exist yet.

answered Feb 11 '14 at 08:43

Xuntar

2,260
3
21
31

score 0 · Answer 3 · answered Feb 11 '14 at 09:03

The 1st way don't work because you refers to "_inp" which is not an existing var. and the ref object is not fully created (that's why input_value: this._inp.value won't work either)

To create objects and assigning values to its properties, you can use a function (I keep most of your code):

var ref = {
  _inp: input.target, 
  input_value: null,
  init: function()
  {
    this.input_value = this._inp.value;
  }
};
ref.init(); 
console.log(ref.input_value); // will contains the same as input.target.value

but usually, people create objects with all property with default values, and pass an argument to their init function:

var ref = {
  _inp: null, 
  input_value: null,
  init: function(input)
  {
    if (input)
    {
      this._inp        = input.target;
      this.input_value = input.target.value;
    }
  }
};
var input = {target:{value:"foo"}};
ref.init(input);

creating one var object vs multiple var

3 Answers3