understanding javascript objects vs map

Question

I've been reading about javascript lately and I understand that most things are objects, functions, objects, arrays, etc. So I tried implementing something today, and I don't understand why it wasn't behaving as I was expecting it to. A little clarification would be nice.

I was trying to map some strings, to other strings, so I tried an object literal approach:

var stringMap = {
 'string1': 'string1 equivalent',
 'string2': 'string2 equivalent',
 //etc..
};

when I tried to do this:

var mapString = stringMap['string1'];

I got undefined. I, then, updated the object to this:

var stringMap = {
 return: {
  'string1': 'string1 equivalent',
  'string2': 'string2 equivalent',
  //etc..
 }
};

same result, undefined. Then I did this:

var stringMap = [];
stringMap['string1'] = 'string1 equivalent';
stringMap['string2'] = 'string2 equivalent';
//etc..

and this time, this worked:

var mapString = stringMap['string1'];

if everything is an object, why didn't my first 2 object literal attempts work? Was my sytanx wrong.

UPDATE

sorry guys, after writing this question, I realized what I did wrong. I said that I tried the following with the object literal:

var mapString = stringMap['string1'];

however, this is wrong, what I tried was the following:

var stringVal = 'string1';
var mapString = stringMap.stringVal;

I will keep this question open and accept an answer though, because The answers are helpful still!

Mulan · Accepted Answer · 2015-10-06 19:12:31Z

3

When you declare a variable with var, the return value is undefined.

var x = 5;
//=> undefined

To add to the confusion, console.log will also return undefined but it will output values to stdout

console.log(x);
// stdout: 5
//=> undefined

With that said, your code works fine

var stringMap = {
 'string1': 'string1 equivalent',
 'string2': 'string2 equivalent',
 //etc..
};
//=> undefined

var mapString = stringMap['string1'];
//=> undefined

console.log(mapString);
// stdout: 'string1 equivalent'
//=> undefined

You could also write

var mapString = stringMap.string1;
//=> undefined

console.log(mapString);
// stdout: 'string1 equivalent'
//=> undefined

Or log the value directly

console.log(stringMap.string1);
// stdout:'string1 equivalent'
//=> undefined

answered Oct 6, 2015 at 19:12

Mulan

136k35 gold badges240 silver badges276 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Josh Beam · Accepted Answer · 2015-10-06 19:15:17Z

2

I'll go through your examples one by one:

var mapString = stringMap['string1'];

The above is fine. To actually log the variable, you should do console.log(mapString).

var stringMap = {
 return: {
  'string1': 'string1 equivalent',
  'string2': 'string2 equivalent',
  //etc..
 }
};

The above is a syntax error. Won't work anywhere.

var stringMap = [];
stringMap['string1'] = 'string1 equivalent';
stringMap['string2'] = 'string2 equivalent';

On the above, you're monkey-patching properties to the Array instance itself; you're not actually adding elements into the Array. To add something inside of the Array, you can use various methods like unshift, push, etc.

answered Oct 6, 2015 at 19:15

Josh Beam

19.9k5 gold badges48 silver badges69 bronze badges

Comments

Sarjan Desai · Accepted Answer · 2015-10-06 19:19:34Z

1

Show undefined in console but value of string1 actually assigned to stringMap variable.

Try below code in console:

var stringMap = {
 'string1': 'string1 equivalent',
 'string2': 'string2 equivalent'
};

var mapString = stringMap['string1'];

mapString // Print value in console

Value assigned to variable can be used using square braces [] but object property can be use using dot operator .

var stringVal = 'string1';
// var mapString = stringMap.stringVal; // won't work because 'stringVal' is variable
var mapString = stringMap[stringVal]; // Work

edited Oct 6, 2015 at 19:19

answered Oct 6, 2015 at 19:13

Sarjan Desai

3,7332 gold badges21 silver badges32 bronze badges

Comments

jpopa · Accepted Answer · 2015-10-06 19:30:43Z

1

Since everything is an object instead of using

 var stringMap = {
     'string1': 'string1 equivalent',
     'string2': 'string2 equivalent',
 //etc..
};

you can instantiate your object as

var stringMap = {
    string1: 'string1Value',
    string2: 'string2Value,
}

or even

var stringMap = {};
stringMap.string1 = 'string1Value';
stringMap.string2 = 'string2Value';

To access the object's properties (in this case the strings inside stringMap) you can use bracket notation

var x = stringMap['string1'];

or dot notation

var x = stringMap.string1;

answered Oct 6, 2015 at 19:30

jpopa

112 bronze badges

Comments

Sukrit Gupta · Accepted Answer · 2015-10-06 19:16:48Z

0

Here's a snippet from Console , it might help you

var stringMap = {
 'string1': 'string1 equivalent',
 'string2': 'string2 equivalent'
};

undefined // Shows undefined but actually value is assigned

stringMap['string1']

"string1 equivalent"

stringMap.string1

"string1 equivalent"

stringMap[string1]
VM165:2 Uncaught ReferenceError: string1 is not defined(…)

answered Oct 6, 2015 at 19:16

Sukrit Gupta

4485 silver badges18 bronze badges

Collectives™ on Stack Overflow

understanding javascript objects vs map

5 Answers 5

Comments

Comments

Comments

Comments

undefined // Shows undefined but actually value is assigned

"string1 equivalent"

"string1 equivalent"

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

undefined // Shows undefined but actually value is assigned

"string1 equivalent"

"string1 equivalent"

Comments

Your Answer

Sign up or log in

Post as a guest

Related