Trouble understanding this behaviour of Javascript arrays

Question

I am trying to get through some Javascript problems when this one caught me off guard. Have a look at the following snippet,

var person = [];
person['1'] = "John";
person['2'] = "Doe";
person['3'] = 46; 
//[1: "John", 2: "Doe", 3: 46]
console.log(person);
//4 <-- as i expected
console.log(person.length);

var person2 = [];
person2['a'] = "John";
person2['b'] = "Doe";
person2['c'] = 46; 
//[1: "John", 2: "Doe", 3: 46]
console.log(person2);
//0 <-- i expected 4, but got 0
console.log(person2.length)

I have added the output in comments.

I am trying to figure out why

console.log(person2.length)

gives length 0 instead of 4. Can someone please help me understand this?

You're treating `person2` as an object, not an array. Objects don't have a length. — , Dec 21 '16 at 18:57
[Not a dup](http://stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable), but the accepted answer might explain a lot. — Teemu, Dec 21 '16 at 19:00
The length of an array is always the highest numeric key + 1. — 4castle, Dec 21 '16 at 19:03

Zakaria Acharki · Answer 1 · 2016-12-21T19:06:45.933

2

The javascript Arrays doesn't have key:value but just the value, your code may should looks like :

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
console.log(person);
console.log(person.length);

Or also using push :

var person = [];
person.push("John");
person.push("Doe");
person.push(46); 
console.log(person);
console.log(person.length);

If you want your data to be stored by key/value you could use object :

var person = {};
person['1'] = "John";
person['2'] = "Doe";
person['3'] = 46; 
console.log(person);
console.log(Object.keys(person).length);

Hope this helps.

edited Dec 21 '16 at 19:06

answered Dec 21 '16 at 19:00

Zakaria Acharki

66,747
15
75
101

@connexo Any string can be used as a property name, you just have to use bracket notation for ones that wouldn't work with dot notation. – 4castle Dec 21 '16 at 19:10

score 1 · Accepted Answer · answered Dec 21 '16 at 19:08

The problem you're facing is this:
In JavaScript, arrays are accessed by their index (e.g. 0,1,2,3. ..). What you're doing is assigning a key and a value to person2. Instead of this, just use

var person2 = [];
person2[0] = "John";
person2[1] = "Doe";
person2[2] = 46;

Alternatively, you can access the length of the Object you created like this:

var person2 = [];
person2['a'] = "John";
person2['b'] = "Doe";
person2['c'] = 46; 
console.log(person2); //[1: "John", 2: "Doe", 3: 46]
console.log(Object.keys(person2).length)

This works because although you defined it as an array, JavaScript arrays are already Objects anyway, so you can use Object.keys(name).length to access the length.

connexo · Answer 3 · 2016-12-21T19:13:36.237

Javascript only knows index-based arrays, starting at 0. You access array elements like arr[n] where n is an integer with n >=0 and n < arr.length. You have tried to use strings instead of integers.

Furthermore, since arrays are objects in Javascript, you can also add properties to that object which you did by using person['1'] = "John";. Since arrays are also objects in Javascript, this creates the property named 1 on the person object.

On objects, you can access (or create) properties in two ways:

var obj = {};
// variant one using dot-notation
obj.prop = "whatever";
// identical result, different syntax:
obj["prop"] = "whatever";

score 0 · Answer 4 · answered Dec 21 '16 at 19:02

Arrays in Javascript are objects-- as such, when you are doing:

person2['a'] = "John";
person2['b'] = "Doe";
person2['c'] = 46;

You're setting properties of the person2 object. If you want a cleaner way to add items to an array I recommend looking at array.push.

score 0 · Answer 5 · answered Dec 21 '16 at 19:05

For first one you will get 4 because its index-based array.

so JavaScript will count 4 its position of pointer on stack

and for the second one its associative array. so there is no matter of index at all.we can access it only based on key or using for-each.

in 2nd you will get length 3 given below.

var person = [];
person.push("John");
person.push("Doe");
person.push(46); 
console.log(person);
console.log(person.length);

Trouble understanding this behaviour of Javascript arrays

5 Answers5