Change array size by just adding element and no push javascript

Question

I know the universal way of changing an array's size is to use .push().

However, today I saw a piece of code in angularJS that does something like this:

var service = {
   pages: [],
   doSmth: doSmth
};

doSmth();

function doSmth() {
   service.pages[1] = "abc";
   service.pages[5] = "def";
}

I ran the debugger on the browser and found that before doSmth() is called, pages[1] is undefined, but after that, pages[1] is assigned the value without any error.

How is this possible?

Because pages already been initialized in pages: [] . Without pages:[], you would see the undefined error. — tanjir
– tanjir, Commented Nov 24, 2015 at 20:52
Assigning values to indices at or past an array’s length will resize it to fit. — Ry-
– Ry- ♦, Commented Nov 24, 2015 at 20:52
What behaviour did you expect? remember that function doSmth is hoisted — NicolasMoise
– NicolasMoise, Commented Nov 24, 2015 at 20:52
You can always just add an element to an array at any index and it will "resize" (in so far as the length will appear to be the largest index + 1) to fit. The push function is just a convenience to add an element to myarray[myarray.length] — Matt Burland
– Matt Burland, Commented Nov 24, 2015 at 20:55

Brennan · Accepted Answer · 2015-11-24 21:12:33Z

21

That's just the magic that JavaScript allows. If you come from a language like Java or C, this may seem like a weird idea, but you can set the value of any index in the array at any time, and the array will expand to that size!

Consider:

var t = [];
t.length === 0;
t[10000] = 'value';
t.length === 10001;

JavaScript just handles this behind the scenes. It's worth mentioning that this behavior is not specific to JavaScript. This is seen a bit in other interpreted languages as well. Ruby, for example, allows you to do the same.

Additionally in JavaScript, length is a writeable attribute of arrays, so you can easily truncate or clear an entire array:

var t = [1];
t[4] = 0;
t === [1, undefined, undefined, undefined, 0];
t.length = 2;
t === [1, undefined];
t.length = 0;
t === [];

Setting the length to 0 is one of the fastest and simplest ways to clear an array. It might not be the most intuitive solution, but it's my go-to.

edited Nov 24, 2015 at 21:12

answered Nov 24, 2015 at 20:55

Brennan

5,7822 gold badges20 silver badges24 bronze badges

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

2 Comments

Matt Burland Over a year ago

Note: The array may not actually expand. It will behave as if it did, but internally, depending on the implementation, it may well not have actually assigned any extra space.

Alexander Manekovskiy Over a year ago

And all this is formally described in specification ecma-international.org/ecma-262/5.1/#sec-15.4.5.1

TbWill4321 · Accepted Answer · 2015-11-24 20:53:19Z

3

An array in JavaScript is just an object with some special properties. Essentially, they are just objects with positive, integer property names. There are some other key differences, but the idea is that you could do this:

var obj = { };
obj['1'] = 'abc';

So you can do the same with an array.

However! You shouldn't. Modern JavaScript engines usually optimize arrays by backing them with fast, native implementations. By setting indexes that are not currently allocated will de-optimize your code into something more like an object, which is much slower.

answered Nov 24, 2015 at 20:53

TbWill4321

8,6863 gold badges30 silver badges25 bronze badges

5 Comments

CoderPi Over a year ago

but this is not what is happening

tanjir Over a year ago

var obj = { }; <- you are initializing an object, not array. obj = [] is array.

Ry- Over a year ago

@CodeiSir: In what way?

CoderPi Over a year ago

@minitech see my answer, its not the same namespace

TbWill4321 Over a year ago

@tanjir, I understand, Array's are just specialized JS Objects. I was showing the basic way of how you can set any property on an object. I like Brennans anwer best for explaining the extra magic.

CoderPi · Accepted Answer · 2015-11-24 20:59:41Z

0

Pages in function doSmth() is not in the same namespace as pages in service, wich is service.pages.

Your pages[1] musst be a global declared somewhere else.

However you are initializing pages as an empty (but existing) array: pages: [],

var service = {
    pages: [],
    doSmth: doSmth
};

doSmth();

function doSmth() {
    pages[1] = "abc";
    pages[5] = "def";
}

edited Nov 24, 2015 at 20:59

answered Nov 24, 2015 at 20:53

CoderPi

13.2k4 gold badges38 silver badges64 bronze badges

Collectives™ on Stack Overflow

Change array size by just adding element and no push javascript

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related