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. — user47589
– user47589, Commented Dec 21, 2016 at 18:57
The length of an array is always the highest numeric key + 1. — castletheperson
– castletheperson, Commented Dec 21, 2016 at 19:03

Zakaria Acharki · Accepted Answer · 2016-12-21 19:06:45Z

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.

@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.

TrojanByAccident · Accepted Answer · 2016-12-21 19:08:43Z

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.

Alexander Nied · Accepted Answer · 2016-12-21 19:02:05Z

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.

Ankit vadariya · Accepted Answer · 2016-12-21 19:05:46Z

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);

connexo · Accepted Answer · 2016-12-21 19:13:36Z

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";

Collectives™ on Stack Overflow

Trouble understanding this behaviour of Javascript arrays

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Linked

Related