CalBear Posted November 2, 2011 Share Posted November 2, 2011 JShint.com and JSlint.com say that an array should be declared as var myArray = []; not as var myArray = new Array(); which is shown on most web resources and published books. What is correct and why? Link to comment Share on other sites More sharing options...
Ingolme Posted November 2, 2011 Share Posted November 2, 2011 They both have the same functionality. Square brackets are recommended because they were shown to be more efficient in most browsers. Link to comment Share on other sites More sharing options...
CalBear Posted November 2, 2011 Author Share Posted November 2, 2011 That sounds reasonable. However, I don't understand why most tutorials/books "teach" var myArray = new Array(); yet the two code checkers absolutely insist you use [ ]. Link to comment Share on other sites More sharing options...
Don E Posted November 2, 2011 Share Posted November 2, 2011 Perhaps why most tutorials/books teach it that way is because it's probably considered the "traditional" or "original" way of doing it, or to get you use the idea of instantiating a new object... Like Ingolme said, they do the same thing but I learned the one with the brackets is what's considered the "literal" notation/way of doing it. Link to comment Share on other sites More sharing options...
ShadowMage Posted November 2, 2011 Share Posted November 2, 2011 My guess would be tutorials use new Array() to introduce the concept of instantiating objects, as Don mentioned, but also to illustrate exactly what you are creating. Because I know the literal syntax, it is easy for me to recognize that this:var arr = [1, 2, 3];is creating an array object. For beginners, though, it may not be apparent what that is supposed to do. Link to comment Share on other sites More sharing options...
justsomeguy Posted November 2, 2011 Share Posted November 2, 2011 Here's a test: <html> <head><title>Javascript array creation benchmark</title></head> <body> <script type="text/javascript">var num, els, i, j, ar, start, end;document.write('Starting array test<hr>');num = 1000;els = 0;document.write('Creating ' + num + ' arrays with ' + els + ' elements using "new Array()": ');start = new Date();for (i = 0; i < num; i++){ ar = new Array(); for (j = 0; j < els; j++) ar.push(j);}end = new Date();document.write('Total time: ' + (Math.round((end - start) * 1000) / 1000) + 'ms; Average: ' + ((Math.round((end - start) * 1000) / 1000) / num) + 'ms<br>');document.write('Creating ' + num + ' arrays with ' + els + ' elements using "[]": ');start = new Date();for (i = 0; i < num; i++){ ar = new Array(); for (j = 0; j < els; j++) ar.push(j);}end = new Date();document.write('Total time: ' + (Math.round((end - start) * 1000) / 1000) + 'ms; Average: ' + ((Math.round((end - start) * 1000) / 1000) / num) + 'ms<br>');num = 100000;els = 0;document.write('Creating ' + num + ' arrays with ' + els + ' elements using "new Array()": ');start = new Date();for (i = 0; i < num; i++){ ar = new Array(); for (j = 0; j < els; j++) ar.push(j);}end = new Date();document.write('Total time: ' + (Math.round((end - start) * 1000) / 1000) + 'ms; Average: ' + ((Math.round((end - start) * 1000) / 1000) / num) + 'ms<br>');document.write('Creating ' + num + ' arrays with ' + els + ' elements using "[]": ');start = new Date();for (i = 0; i < num; i++){ ar = new Array(); for (j = 0; j < els; j++) ar.push(j);}end = new Date();document.write('Total time: ' + (Math.round((end - start) * 1000) / 1000) + 'ms; Average: ' + ((Math.round((end - start) * 1000) / 1000) / num) + 'ms<br>');num = 1000000;els = 0;document.write('Creating ' + num + ' arrays with ' + els + ' elements using "new Array()": ');start = new Date();for (i = 0; i < num; i++){ ar = new Array(); for (j = 0; j < els; j++) ar.push(j);}end = new Date();document.write('Total time: ' + (Math.round((end - start) * 1000) / 1000) + 'ms; Average: ' + ((Math.round((end - start) * 1000) / 1000) / num) + 'ms<br>');document.write('Creating ' + num + ' arrays with ' + els + ' elements using "[]": ');start = new Date();for (i = 0; i < num; i++){ ar = new Array(); for (j = 0; j < els; j++) ar.push(j);}end = new Date();document.write('Total time: ' + (Math.round((end - start) * 1000) / 1000) + 'ms; Average: ' + ((Math.round((end - start) * 1000) / 1000) / num) + 'ms<br>');num = 1000;els = 1000;document.write('Creating ' + num + ' arrays with ' + els + ' elements using "new Array()": ');start = new Date();for (i = 0; i < num; i++){ ar = new Array(); for (j = 0; j < els; j++) ar.push(j);}end = new Date();document.write('Total time: ' + (Math.round((end - start) * 1000) / 1000) + 'ms; Average: ' + ((Math.round((end - start) * 1000) / 1000) / num) + 'ms<br>');document.write('Creating ' + num + ' arrays with ' + els + ' elements using "[]": ');start = new Date();for (i = 0; i < num; i++){ ar = new Array(); for (j = 0; j < els; j++) ar.push(j);}end = new Date();document.write('Total time: ' + (Math.round((end - start) * 1000) / 1000) + 'ms; Average: ' + ((Math.round((end - start) * 1000) / 1000) / num) + 'ms<br>');num = 100000;els = 1000;document.write('Creating ' + num + ' arrays with ' + els + ' elements using "new Array()": ');start = new Date();for (i = 0; i < num; i++){ ar = new Array(); for (j = 0; j < els; j++) ar.push(j);}end = new Date();document.write('Total time: ' + (Math.round((end - start) * 1000) / 1000) + 'ms; Average: ' + ((Math.round((end - start) * 1000) / 1000) / num) + 'ms<br>');document.write('Creating ' + num + ' arrays with ' + els + ' elements using "[]": ');start = new Date();for (i = 0; i < num; i++){ ar = new Array(); for (j = 0; j < els; j++) ar.push(j);}end = new Date();document.write('Total time: ' + (Math.round((end - start) * 1000) / 1000) + 'ms; Average: ' + ((Math.round((end - start) * 1000) / 1000) / num) + 'ms<br>');num = 1000000;els = 1000;document.write('Creating ' + num + ' arrays with ' + els + ' elements using "new Array()": ');start = new Date();for (i = 0; i < num; i++){ ar = new Array(); for (j = 0; j < els; j++) ar.push(j);}end = new Date();document.write('Total time: ' + (Math.round((end - start) * 1000) / 1000) + 'ms; Average: ' + ((Math.round((end - start) * 1000) / 1000) / num) + 'ms<br>');document.write('Creating ' + num + ' arrays with ' + els + ' elements using "[]": ');start = new Date();for (i = 0; i < num; i++){ ar = new Array(); for (j = 0; j < els; j++) ar.push(j);}end = new Date();document.write('Total time: ' + (Math.round((end - start) * 1000) / 1000) + 'ms; Average: ' + ((Math.round((end - start) * 1000) / 1000) / num) + 'ms<br>');document.write('Done');document.close(); </script> </body></html> With results from Chrome: Creating 1000 arrays with 0 elements using "new Array()": Total time: 0ms; Average: 0msCreating 1000 arrays with 0 elements using "[]": Total time: 0ms; Average: 0msCreating 100000 arrays with 0 elements using "new Array()": Total time: 3ms; Average: 0.00003msCreating 100000 arrays with 0 elements using "[]": Total time: 1ms; Average: 0.00001msCreating 1000000 arrays with 0 elements using "new Array()": Total time: 26ms; Average: 0.000026msCreating 1000000 arrays with 0 elements using "[]": Total time: 25ms; Average: 0.000025msCreating 1000 arrays with 1000 elements using "new Array()": Total time: 16ms; Average: 0.016msCreating 1000 arrays with 1000 elements using "[]": Total time: 16ms; Average: 0.016msCreating 100000 arrays with 1000 elements using "new Array()": Total time: 1546ms; Average: 0.01546msCreating 100000 arrays with 1000 elements using "[]": Total time: 1522ms; Average: 0.01522msCreating 1000000 arrays with 1000 elements using "new Array()": Total time: 15103ms; Average: 0.015103msCreating 1000000 arrays with 1000 elements using "[]": Total time: 15100ms; Average: 0.0151ms And Opera:Creating 1000 arrays with 0 elements using "new Array()": Total time: 0ms; Average: 0msCreating 1000 arrays with 0 elements using "[]": Total time: 0ms; Average: 0msCreating 100000 arrays with 0 elements using "new Array()": Total time: 12ms; Average: 0.00012msCreating 100000 arrays with 0 elements using "[]": Total time: 12ms; Average: 0.00012msCreating 1000000 arrays with 0 elements using "new Array()": Total time: 122ms; Average: 0.000122msCreating 1000000 arrays with 0 elements using "[]": Total time: 120ms; Average: 0.00012msCreating 1000 arrays with 1000 elements using "new Array()": Total time: 69ms; Average: 0.069msCreating 1000 arrays with 1000 elements using "[]": Total time: 67ms; Average: 0.067msCreating 100000 arrays with 1000 elements using "new Array()": Total time: 6636ms; Average: 0.06636msCreating 100000 arrays with 1000 elements using "[]": Total time: 6734ms; Average: 0.06734msCreating 1000000 arrays with 1000 elements using "new Array()": Total time: 67369ms; Average: 0.067369msCreating 1000000 arrays with 1000 elements using "[]": Total time: 67298ms; Average: 0.067298ms So there's not much of a difference between the two, it's just shorter. If you're creating a lot of nested arrays and objects it's definitely easier to read using the shorter syntax. Link to comment Share on other sites More sharing options...
ShadowMage Posted November 2, 2011 Share Posted November 2, 2011 Correct me if I'm wrong, but isn't your test using new Array() for all the tests...? Link to comment Share on other sites More sharing options...
justsomeguy Posted November 2, 2011 Share Posted November 2, 2011 *smack* Victim of copy and paste after I made some changes. It *was* working.. Link to comment Share on other sites More sharing options...
justsomeguy Posted November 2, 2011 Share Posted November 2, 2011 I thought I saw slightly better performance from the short version at first. Chrome: Creating 1000 arrays with 0 elements using "new Array()": Total time: 0ms; Average: 0msCreating 1000 arrays with 0 elements using "[]": Total time: 0ms; Average: 0msCreating 100000 arrays with 0 elements using "new Array()": Total time: 3ms; Average: 0.00003msCreating 100000 arrays with 0 elements using "[]": Total time: 1ms; Average: 0.00001msCreating 1000000 arrays with 0 elements using "new Array()": Total time: 34ms; Average: 0.000034msCreating 1000000 arrays with 0 elements using "[]": Total time: 24ms; Average: 0.000024msCreating 1000 arrays with 1000 elements using "new Array()": Total time: 20ms; Average: 0.02msCreating 1000 arrays with 1000 elements using "[]": Total time: 17ms; Average: 0.017msCreating 100000 arrays with 1000 elements using "new Array()": Total time: 1677ms; Average: 0.01677msCreating 100000 arrays with 1000 elements using "[]": Total time: 1781ms; Average: 0.01781msCreating 1000000 arrays with 1000 elements using "new Array()": Total time: 18112ms; Average: 0.018112msCreating 1000000 arrays with 1000 elements using "[]": Total time: 17825ms; Average: 0.017825ms Opera:Creating 1000 arrays with 0 elements using "new Array()": Total time: 1ms; Average: 0.001msCreating 1000 arrays with 0 elements using "[]": Total time: 0ms; Average: 0msCreating 100000 arrays with 0 elements using "new Array()": Total time: 12ms; Average: 0.00012msCreating 100000 arrays with 0 elements using "[]": Total time: 6ms; Average: 0.00006msCreating 1000000 arrays with 0 elements using "new Array()": Total time: 119ms; Average: 0.000119msCreating 1000000 arrays with 0 elements using "[]": Total time: 64ms; Average: 0.000064msCreating 1000 arrays with 1000 elements using "new Array()": Total time: 67ms; Average: 0.067msCreating 1000 arrays with 1000 elements using "[]": Total time: 69ms; Average: 0.069msCreating 100000 arrays with 1000 elements using "new Array()": Total time: 7580ms; Average: 0.0758msCreating 100000 arrays with 1000 elements using "[]": Total time: 7150ms; Average: 0.0715msCreating 1000000 arrays with 1000 elements using "new Array()": Total time: 67981ms; Average: 0.067981msCreating 1000000 arrays with 1000 elements using "[]": Total time: 66683ms; Average: 0.066683ms So there you go, the shorter syntax is generally slightly faster. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.