JavaScript ๋ฐฐ์—ด(Array)์˜ ๋ฐœ์ „๊ณผ ์„ฑ๋Šฅ์— ๋Œ€ํ•ด์„œ ์ž์„ธํžˆ ์•Œ์•„๋ณด๊ธฐ

    JavaScript ๋ฐฐ์—ด(Array)์˜ ๋ฐœ์ „๊ณผ ์„ฑ๋Šฅ์— ๋Œ€ํ•ด์„œ ์ž์„ธํžˆ ์•Œ์•„๋ณด๊ธฐ


    ์ด ํฌ์ŠคํŒ…์€ 2017๋…„ 9์›” 2์ผ์— Paul Shan์ด ์ž‘์„ฑํ•œ Diving deep into JavaScript array - evolution & performance๋ฅผ ๋ฒˆ์—ญํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.

    ํฌ์ŠคํŒ…์„ ์‹œ์ž‘ํ•˜๊ธฐ ์ „์— ์ด ํฌ์ŠคํŒ…์€ JavaScript ๋ฐฐ์—ด์˜ ๊ตฌ๋ฌธ์— ๊ด€ํ•œ ๊ฒƒ์„ ์•Œ๋ ค์ฃผ๊ฑฐ๋‚˜ ์˜ˆ์ œ๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๋“ฑ์˜ ๊ธฐ๋ณธ์ ์ธ ๋‚ด์šฉ์€ ์•„๋‹ˆ๋ผ๊ณ  ๋จผ์ € ์–˜๊ธฐํ•ด๋‘๊ณ  ์‹ถ๋‹ค. ์ด ํฌ์ŠคํŒ…์—์„œ๋Š” ๋ฉ”๋ชจ๋ฆฌ ํ‘œํ˜„, ์ตœ์ ํ™”, ๊ตฌ๋ฌธ์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง€๋Š” ๋™์ž‘์˜ ์ฐจ์ด, ์„ฑ๋Šฅ ๋ฐ ์ตœ๊ทผ์˜ JavaScript ๋ฐฐ์—ด์ด ์–ด๋–ป๊ฒŒ ๋ฐœ์ „ํ–ˆ๋Š”์ง€์— ๊ด€ํ•ด์„œ๋งŒ ์„ค๋ช…ํ•  ๊ฒƒ์ด๋‹ค.

    ํ•„์ž๊ฐ€ JavaScript๋ฅผ ์ฒ˜์Œ ์‹œ์ž‘ํ–ˆ์„ ๋•Œ ํ•„์ž๋Š” ์ด๋ฏธ C, C++, C# ๋“ฑ์˜ ์–ธ์–ด์— ์ต์ˆ™ํ•œ ์ƒํƒœ์˜€๋‹ค. ๊ทธ๋ž˜์„œ ๋‹ค๋ฅธ C/C++ ๊ฐœ๋ฐœ์ž๋“ค์ฒ˜๋Ÿผ JavaScript์™€์˜ ์ฒซ ๋งŒ๋‚จ์ด ๊ทธ๋ฆฌ ์ข‹์ง€๋Š” ๋ชปํ–ˆ๋‹ค.

    ๊ทธ ์ค‘ ํ•„์ž๊ฐ€ JavaScript๋ฅผ ์ข‹์•„ํ•˜์ง€ ์•Š์•˜๋˜ ๊ฐ€์žฅ ํฐ ์ด์œ ๋Š”, ๋ฐ”๋กœ ๋ฐฐ์—ด์ด๋‹ค. JavaScript์˜ ๋ฐฐ์—ด์€ Hash Map์ด๋‚˜ Dictionary๋กœ ๊ตฌํ˜„๋˜์—ˆ๊ณ  ์—ฐ์†์ ์ด์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ํ•„์ž๋Š” ์ด ์–ธ์–ด๊ฐ€ ๋ฐฐ์—ด์„ ์ œ๋Œ€๋กœ ๊ตฌํ˜„ํ• ์ˆ˜๋„ ์—†๋Š” B๊ธ‰ ์–ธ์–ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๊ทธ ์ดํ›„ JavaScript์— ๋Œ€ํ•œ ํ•„์ž์˜ ์ดํ•ด๋„๋Š” ๋งŽ์ด ๋‹ฌ๋ผ์กŒ๋‹ค.

    (์—ญ์ฃผ) ๊ธฐ์กด ์–ธ์–ด์—์„œ ๊ตฌํ˜„ํ–ˆ๋˜ ๋ฐฐ์—ด์€ ์ƒ์„ฑ ์‹œ์— ํŠน์ • ๋ฒ”์œ„์˜ ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ํ• ๋‹นํ•˜๊ณ  ์—ฐ์†์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ–ˆ์ง€๋งŒ JavaScript๋Š” ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ๋ฏธ๋ฆฌ ํ• ๋‹นํ•ด๋†“์ง€ ์•Š๊ณ  ๋™์  ํ• ๋‹นํ•˜๋ฏ€๋กœ ์—ฐ์†์ ์œผ๋กœ ์›์†Œ๊ฐ€ ์ €์žฅ๋˜์ง€ ์•Š๋Š”๋‹ค. ๋ฆฌ์ŠคํŠธ์™€ ๋™์ผํ•œ ๋ฐฉ์‹.

    JavaScript์˜ ๋ฐฐ์—ด์ด ์‹ค์ œ๋กœ๋Š” ๋ฐฐ์—ด์ด ์•„๋‹Œ ์ด์œ 

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ๊ด€ํ•œ ์„ค๋ช…๋“ค์„ ์‹œ์ž‘ํ•˜๊ธฐ ์ „์— ๋ฐฐ์—ด์ด ๋ฌด์—‡์ธ์ง€๋ถ€ํ„ฐ ์„ค๋ช…์„ ๋จผ์ € ํ•ด์•ผํ•  ๊ฒƒ ๊ฐ™๋‹ค. ๋ฐฐ์—ด์€ ์—ฐ์†์ ์ธ ๋ฉ”๋ชจ๋ฆฌ ๋กœ์ผ€์ด์…˜๋“ค์˜ ๋ฌถ์Œ์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ’์„ ์ €์žฅํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋œ๋‹ค. ์—ฌ๊ธฐ์„œ ์ค‘์š”ํ•œ ํฌ์ธํŠธ๋Š” ์—ฐ์†์„ฑ(continuous)๊ณผ ์ธ์ ‘์„ฑ(contiguous)์ด๋ผ๋Š” ๋‹จ์–ด์ด๋‹ค.

    Actual Array in JavaScript

    ์œ„ ๊ทธ๋ฆผ์€ ๋ฐฐ์—ด์˜ ๋ฉ”๋ชจ๋ฆฌ ์ƒํƒœ์˜ ์˜ˆ์‹œ๋ฅผ ํ‘œํ˜„ํ•œ ๊ฒƒ์ด๋‹ค. ์ด ๋ฐฐ์—ด์€ 4 bit๋กœ ์ด๋ฃจ์–ด์ง„ 4๊ฐœ์˜ ๋ธ”๋ก์„ ๊ฐ€์ง€๊ณ  ์žˆ๊ณ  ์ด 16 bit์˜ ๋ฉ”๋ชจ๋ฆฌ ๋ธ”๋ก์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค.

    ์ด์ œ ํ•„์ž๊ฐ€ tinyInt arr[4];๋ฅผ ์„ ์–ธํ–ˆ๊ณ  1201๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์„œ ์ด ๋ฉ”๋ชจ๋ฆฌ ๋ธ”๋ก๋“ค์„ ํฌ์ฐฉํ–ˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž. ์ด์ œ ํ•„์ž๊ฐ€ ์–ด๋–ค ํฌ์ธํŠธ๋กœ๋ถ€ํ„ฐ a[2]๋ฅผ ์ฝ์œผ๋ ค๊ณ  ํ•œ๋‹ค๋ฉด a[2]์˜ ๋ฉ”๋ชจ๋ฆฌ ์ฃผ์†Œ๋ฅผ ์ฐพ๊ธฐ ์œ„ํ•œ ๊ฐ„๋‹จํ•œ ์ˆ˜ํ•™ ๊ณ„์‚ฐ์ด ์ด๋ฃจ์–ด์ง„๋‹ค. 1201 + (2 x 4)์™€ ๊ฐ™์€ ์‹์œผ๋กœ 1209์˜ ์ฃผ์†Œ๋ฅผ ๋ฐ”๋กœ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋‹ค.

    ์—ญ์ฃผ: ๋ฉ”๋ชจ๋ฆฌ ์‹œ์ž‘ ์ฃผ์†Œ + (์ฐพ๊ณ ์ž ํ•˜๋Š” ์ธ๋ฑ์Šค x ํ•œ ๋ธ”๋ก์— ํ• ๋‹น๋œ ๋ฉ”๋ชจ๋ฆฌ ๋ธ”๋ก ๊ฐœ์ˆ˜)๋กœ ๊ณ„์‚ฐํ•œ ๊ฒƒ์ด๋‹ค. ๋ฐฐ์—ด์€ ์ด๋ ‡๊ฒŒ ์›ํ•˜๋Š” ์›์†Œ์— ๋ฐ”๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.

    Old Array in JavaScript

    JavaScript์—์„œ์˜ ๋ฐฐ์—ด์€ Hash Map์ด๋‹ค. ์ด๊ฒƒ์€ ๋‹ค์–‘ํ•œ ์ž๋ฃŒ ๊ตฌ์กฐ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ตฌํ˜„๋  ์ˆ˜ ์žˆ๊ณ , ๊ทธ ์ค‘ ํ•˜๋‚˜๊ฐ€ ๋ฐ”๋กœ Linked List์ด๋‹ค. ๋งŒ์•ฝ JavaScript ๋‚ด์—์„œ ์šฐ๋ฆฌ๊ฐ€ var arr = new Array(4);๋กœ ๋ฐฐ์—ด์„ ์„ ์–ธํ•˜๋ฉด ์ด ๋ฐฐ์—ด์€ ์ƒ๋‹จ์˜ ๊ทธ๋ฆผ๊ณผ ๊ฐ™์€ ๊ตฌ์กฐ๋ฅผ ์ƒ์„ฑํ•œ๋‹ค. ๋”ฐ๋ผ์„œ ๋งŒ์•ฝ ์šฐ๋ฆฌ๊ฐ€ a[2]๋ฅผ ์ฝ๊ณ  ์‹ถ๋‹ค๋ฉด ๋ฌด์กฐ๊ฑด 1201๋ถ€ํ„ฐ ํƒ์ƒ‰ํ•ด๋‚˜๊ฐ€๋ฉด์„œ a[2]๋ฅผ ์ฐพ์•„๋‚˜๊ฐ€์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.

    ์ด๊ฒƒ์ด ๋ฐ”๋กœ JavaScript์˜ ๋ฐฐ์—ด๊ณผ ์ง„์งœ ๋ฐฐ์—ด์ด ๋‹ค๋ฅธ ์ ์ด๋‹ค. ๋ถ„๋ช…ํžˆ JavaScript์˜ ๋ฐฐ์—ด์„ ํƒ์ƒ‰ํ•˜๋Š” ๊ฒƒ์€ ์›๋ž˜์˜ Linked List ํƒ์ƒ‰๋ณด๋‹ค๋Š” ๊ณ„์‚ฐ์ด ์ ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋ฐฐ์—ด์˜ ๊ธธ์ด๊ฐ€ ๊ธธ์–ด์งˆ์ˆ˜๋ก ์ธ์ƒ์ด ๊ณ ๋‹ฌํŒŒ์ง€๋Š” ๊ฑด ๋˜‘๊ฐ™๋‹ค.

    JavaSciprt ๋ฐฐ์—ด์˜ ๋ฐœ์ „

    ์˜ˆ์ „์—๋Š” ์นœ๊ตฌ๊ฐ€ ์ปดํ“จํ„ฐ์— 256MB ์งœ๋ฆฌ ๋žจ์„ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ํ•˜๋ฉด ๋ถ€๋Ÿฌ์›€์„ ๋А๋ผ๋˜ ์‹œ์ ˆ๋„ ์žˆ์—ˆ์ง€๋งŒ ์š”์ฆ˜์—” ๋ณดํ†ต 8GB ์ •๋„์˜ ๋žจ์„ ์‚ฌ์šฉํ•œ๋‹ค.

    ์ด์™€ ๋น„์Šทํ•˜๊ฒŒ JavaScript ๋˜ํ•œ ๋งŽ์€ ๋ฐœ์ „์„ ์ด๋ฃจ์—ˆ๋‹ค. V8, SpiderMonkey, TC39, ์ฆ๊ฐ€ํ•˜๊ณ  ์žˆ๋Š” ์›น ์‚ฌ์šฉ์ž๋“ค์˜ ํ”ผ๋‚˜๋Š” ๋…ธ๋ ฅ์œผ๋กœ ์ธํ•ด JavaScript๋Š” ์ „ ์„ธ๊ณ„์˜ ํ•„์ˆ˜ ์š”์†Œ๊ฐ€ ๋˜์—ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๊ฑฐ๋Œ€ํ•œ ์œ ์ € ๋ฒ ์ด์Šค๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๋ฉด ๋ถ„๋ช…ํžˆ ์„ฑ๋Šฅ ํ–ฅ์ƒ ๋˜ํ•œ ํ•„์š”ํ•˜๋‹ค.

    ์ตœ๊ทผ์˜ JavaScript ์—”์ง„์€ ๋ชจ๋“  ์š”์†Œ๊ฐ€ ๋™์ผํ•œ ํƒ€์ž…์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๋ฐฐ์—ด์ธ ๊ฒฝ์šฐ ์—ฐ์†์ ์œผ๋กœ ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ํ• ๋‹นํ•œ๋‹ค. ํ›Œ๋ฅญํ•œ ํ”„๋กœ๊ทธ๋ž˜๋จธ๋Š” ํ•ญ์ƒ ๋ฐฐ์—ด์„ ๋™์ผํ•œ ํƒ€์ž…์œผ๋กœ ์‚ฌ์šฉํ•˜๋ฉฐ JIT(Just in Time) ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ์ด๋Ÿฐ ๋ฐฐ์—ด์— ๋Œ€ํ•ด์„œ C ์ปดํŒŒ์ผ๋Ÿฌ์™€ ๊ฐ™์€ ๋ฐฐ์—ด ๊ณ„์‚ฐ์„ ์ˆ˜ํ–‰ํ•œ๋‹ค.

    ๊ทธ๋Ÿฌ๋‚˜ ์ด๋Ÿฐ ๋™์ผํ•œ ํƒ€์ž… ๋ฐฐ์—ด์— ๋‹ค๋ฅธ ํƒ€์ž…์˜ ์›์†Œ๋ฅผ ์‚ฝ์ž…ํ•˜๋ ค๊ณ  ํ•  ๋•Œ JIT๋Š” ์ „์ฒด ๋ฐฐ์—ด์˜ ๊ตฌ์กฐ๋ฅผ ํ•ด์ œํ•˜๊ณ  ๋‹ค์‹œ ์˜ˆ์ „์˜ ๋ฐฐ์—ด์ฒ˜๋Ÿผ ๋น„์—ฐ์†์ ์ธ ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ํ• ๋‹นํ•œ๋‹ค. ์ฆ‰, ๋งŒ์•ฝ ์šฐ๋ฆฌ๊ฐ€ ์ฝ”๋“œ๋ฅผ ์ œ๋Œ€๋กœ ์ž‘์„ฑํ•œ๋‹ค๋ฉด JavaScript์˜ Array ๊ฐ์ฒด๋Š” ์‹ค์ œ ๋ฐฐ์—ด์ฒ˜๋Ÿผ ์ž‘๋™ํ•œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ์ด๋Š” ๋ชจ๋˜ JS ๊ฐœ๋ฐœ์ž๋“ค์—๊ฒŒ๋Š” ์ •๋ง ์ข‹์€ ์ผ์ด๋‹ค.

    ์ด์— ๋”ํ•ด์„œ ๋ฐฐ์—ด์€ ES2015 ๋˜๋Š” ES6๋ฅผ ํ†ตํ•ด์„œ ๋”์šฑ ๋ฐœ์ „ํ–ˆ๋‹ค. TC39 ์œ„์›ํšŒ๋Š” JavaScript์— ํƒ€์ดํ•‘๋œ ๋ฐฐ์—ด์„ ์ถ”๊ฐ€ํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ๊ณ  ๊ทธ๋ž˜์„œ ์šฐ๋ฆฌ๋Š” ArrayBuffer๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค. ArrayBuffer๋Š” ์ธ์ ‘ํ•œ ๋ฉ”๋ชจ๋ฆฌ ๋ธ”๋ก์„ ์ œ๊ณตํ•˜๊ณ  ์šฐ๋ฆฌ๊ฐ€ ๊ทธ๊ฒƒ์„ ๋งˆ์Œ๋Œ€๋กœ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ์ง์ ‘ ๋‹ค๋ฃจ๋Š” ๊ฒƒ์€ ๋งค์šฐ Low Level์ด๊ณ  ๋˜ ๋„ˆ๋ฌด ๋ณต์žกํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์šฐ๋ฆฌ๋Š” View๋ผ๋Š” ๊ฒƒ์„ ํ†ตํ•ด์„œ ArrayBuffer๋ฅผ ๋‹ค๋ฃจ๊ฒŒ ๋œ๋‹ค. ์ด๋ฏธ ๋ช‡๊ฐ€์ง€ View๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ  ๋‚˜์ค‘์—๋Š” ๋” ์ถ”๊ฐ€๋  ์˜ˆ์ •์ด๋‹ค.

    var buffer = new ArrayBuffer(8);
    var view   = new Int32Array(buffer);
    view[0] = 100;

    ๋งŒ์•ฝ ๋‹น์‹ ์ด Int32Array์™€ ๊ฐ™์€ Typed Array์— ๋Œ€ํ•ด์„œ ๋” ์•Œ๊ณ  ์‹ถ๋‹ค๋ฉด MDN Documentation๋ฅผ ์ฐธ๊ณ ํ•˜๊ธฐ ๋ฐ”๋ž€๋‹ค.

    ํƒ€์ดํ•‘๋œ ๋ฐฐ์—ด์€ ๊ต‰์žฅํžˆ ํšจ์œจ์ ์ด๋‹ค. ํƒ€์ดํ•‘๋œ ๋ฐฐ์—ด์€ WebGL์„ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์ด ์ผ๋ฐ˜ ๋ฐฐ์—ด๋กœ๋Š” ๋ฐ”์ด๋„ˆ๋ฆฌ ๋ฐ์ดํ„ฐ๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์—†๋Š” ์—„์ฒญ๋‚œ ์„ฑ๋Šฅ ๋ฌธ์ œ์— ์ง๋ฉดํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ์š”์ฒญํ•ด์„œ ๋„์ž…๋œ ๊ฐ์ฒด์ด๋‹ค.(์—ญ์ฃผ: ThreeJS๋„ ๋‚ด๋ถ€์ ์œผ๋กœ๋Š” ์ „๋ถ€ Typed Array๋ฅผ ์‚ฌ์šฉ ์ค‘์ด๊ณ , ์„ฑ๋Šฅ ์ฐจ์ด ๋˜ํ•œ ๋ชธ์œผ๋กœ ๋А๊ปด์งˆ ์ •๋„๋กœ ํ™•์—ฐํ•˜๋‹ค.) ๋˜ํ•œ ์šฐ๋ฆฌ๋Š” SharedArrayBuffer๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์—ฌ๋Ÿฌ ๊ฐœ์˜ Web Worker๊ฐ„ ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ๊ณต์œ ํ•˜์—ฌ ์„ฑ๋Šฅ์„ ๋Œ์–ด์˜ฌ๋ฆด ์ˆ˜๋„ ์žˆ๋‹ค.

    ๋†€๋ž์ง€ ์•Š์€๊ฐ€? JavaScript์˜ ๋ฐฐ์—ด์€ ๊ฐ„๋‹จํ•œ Hash Map์—์„œ ์‹œ์ž‘ํ•ด์„œ ์ด์ œ๋Š” SharedArrayBuffer๊นŒ์ง€ ๋‹ค๋ฃจ๊ณ  ์žˆ๋‹ค.

    ์ผ๋ฐ˜ ๋ฐฐ์—ด vs ํƒ€์ดํ•‘๋œ ๋ฐฐ์—ด - ์„ฑ๋Šฅ ๋น„๊ต

    ์šฐ๋ฆฌ๋Š” JavaScript ๋ฐฐ์—ด์˜ ๋ฐœ์ „์— ๋Œ€ํ•ด์„œ ์ด์•ผ๊ธฐ ํ–ˆ๋‹ค. ์ด์ œ ์ตœ๊ทผ์˜ ๋ฐฐ์—ด์ด ์–ผ๋งˆ๋‚˜ ์ข‹์€์ง€ ํ™•์ธํ•ด๋ณด์ž. ํ•„์ž๋Š” Mac๊ณผ Node.js 8.4.0 ํ™˜๊ฒฝ์—์„œ ๋ช‡ ๊ฐœ์˜ ์ž‘์€ ํ…Œ์ŠคํŠธ๋ฅผ ํ•ด๋ณด์•˜๋‹ค.

    ์ผ๋ฐ˜ ๋ฐฐ์—ด โ€“ ์‚ฝ์ž…

    var LIMIT = 10000000;
    var arr = new Array(LIMIT);
    console.time("Array insertion time");
    for (var i = 0; i < LIMIT; i++) {
      arr[i] = i;
    }
    console.timeEnd("Array insertion time");

    ์ˆ˜ํ–‰ ์‹œ๊ฐ„: 55ms

    ํƒ€์ดํ•‘๋œ ๋ฐฐ์—ด โ€“ ์‚ฝ์ž…

    var LIMIT = 10000000;
    var buffer = new ArrayBuffer(LIMIT * 4);
    var arr = new Int32Array(buffer);
    console.time("ArrayBuffer insertion time");
    for (var i = 0; i < LIMIT; i++) {
      arr[i] = i;
    }
    console.timeEnd("ArrayBuffer insertion time");

    ์ˆ˜ํ–‰ ์‹œ๊ฐ„: 52ms

    ์•—โ€ฆ? ์˜ˆ์ „์˜ ์ „ํ†ต์ ์ธ ๋ฐฐ์—ด๊ณผ ์ตœ๊ทผ ๋ฐฐ์—ด์˜ ์„ฑ๋Šฅ์ด ๋น„์Šทํ•œ๋ฐ์š”โ€ฆ?

    Nope. ํ•„์ž๋Š” ์š”์ฆ˜์˜ ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ๋˜‘๋˜‘ํ•˜๊ธฐ๋•Œ๋ฌธ์— ๊ฐ™์€ ํƒ€์ž…์„ ๊ฐ€์ง„ ๋ฐฐ์—ด์€ ๋‚ด๋ถ€์ ์œผ๋กœ ์—ฐ์†์ ์ธ ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ๊ฐ€์ง„ ๋ฐฐ์—ด๋กœ ๋ณ€ํ™˜ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์„ค๋ช…ํ–ˆ๋‹ค. ์ด๊ฒŒ ๋ฐ”๋กœ ์ฒซ๋ฒˆ์งธ ์˜ˆ์‹œ์—์„œ ๋ฐœ์ƒํ•œ ์ผ์ด๋‹ค. ํ•„์ž๋Š” new Array(LIMIT)์„ ์‚ฌ์šฉํ–ˆ์ง€๋งŒ ๋‚ด๋ถ€์ ์œผ๋กœ๋Š” ์—ฐ์†์ ์ธ ๋ฉ”๋ชจ๋ฆฌ ํ• ๋‹น์„ ๊ฐ€์ง„ ํ˜„๋Œ€์ ์ธ ๋ฐฐ์—ด์„ ์œ ์ง€ํ•˜๊ณ  ์žˆ๋˜ ๊ฒƒ์ด๋‹ค.

    ์ด์ œ ์ฒซ๋ฒˆ์งธ ์˜ˆ์‹œ๋ฅผ ์ˆ˜์ •ํ•˜์—ฌ ๋™์ผํ•œ ์ž๋ฃŒํ˜•์„ ๊ฐ€์ง€๊ณ  ์žˆ์ง€ ์•Š์€ ๋ฐฐ์—ด๋กœ ๋งŒ๋“ค๊ณ  ์„ฑ๋Šฅ ์ฐจ์ด๊ฐ€ ์žˆ๋Š”์ง€ ์‚ดํŽด๋ณด๋„๋ก ํ•˜์ž.

    ์ผ๋ฐ˜ ๋ฐฐ์—ด โ€“ ์‚ฝ์ž… (๋™์ผํ•˜์ง€ ์•Š์€ ์ž๋ฃŒํ˜•)

    var LIMIT = 10000000;
    var arr = new Array(LIMIT);
    arr.push({a: 22});
    console.time("Array insertion time");
    for (var i = 0; i < LIMIT; i++) {
      arr[i] = i;
    }
    console.timeEnd("Array insertion time");

    ์ˆ˜ํ–‰ ์‹œ๊ฐ„: 1207ms

    ์—ฌ๊ธฐ์„œ ํ•„์ž๋Š” 3๋ฒˆ ๋ผ์ธ์— ์ƒˆ๋กœ์šด ํ‘œํ˜„์„ ์ถ”๊ฐ€ํ–ˆ์„ ๋ฟ ๋‚˜๋จธ์ง€๋Š” ์ด์ „๊ณผ ์ „๋ถ€ ๋™์ผํ•˜์ง€๋งŒ ์„ฑ๋Šฅ์€ ์ฐจ์ด๊ฐ€ ๋‚˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค. ๋ฌด๋ ค 22๋ฐฐ ๋А๋ ค์ง„ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

    ์ผ๋ฐ˜ ๋ฐฐ์—ด - ์ฝ๊ธฐ

    var LIMIT = 10000000;
    var arr = new Array(LIMIT);
    arr.push({a: 22});
    for (var i = 0; i < LIMIT; i++) {
      arr[i] = i;
    }
    var p;
    console.time("Array read time");
    for (var i = 0; i < LIMIT; i++) {
      //arr[i] = i;
      p = arr[i];
    }
    console.timeEnd("Array read time");

    ์ˆ˜ํ–‰ ์‹œ๊ฐ„: 196ms

    Typed Array - read

    var LIMIT = 10000000;
    var buffer = new ArrayBuffer(LIMIT * 4);
    var arr = new Int32Array(buffer);
    console.time("ArrayBuffer insertion time");
    for (var i = 0; i < LIMIT; i++) {
      arr[i] = i;
    }
    console.time("ArrayBuffer read time");
    for (var i = 0; i < LIMIT; i++) {
      var p = arr[i];
    }
    console.timeEnd("ArrayBuffer read time");

    ์ˆ˜ํ–‰ ์‹œ๊ฐ„: 27ms

    ๊ฒฐ๋ก 

    JavaScript์— ํƒ€์ดํ•‘๋œ ๋ฐฐ์—ด์ด ์ถ”๊ฐ€๋œ ๊ฒƒ์€ ์œ„๋Œ€ํ•œ ์ฒซ ๋ฐœ๊ฑธ์Œ์ด๋‹ค. Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array ๋“ฑ์€ ๋„ค์ดํ‹ฐ๋ธŒ ๋ฐ”์ดํŠธ ์ˆœ์„œ๋กœ ์ด๋ฃจ์–ด์ง„ ๋ทฐ๋ฅผ ์ œ๊ณตํ•˜๊ณ , ๋˜ ์—ฌ๋Ÿฌ๋ถ„์ด ์ง์ ‘ DataView๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ปค์Šคํ…€ ๋ทฐ๋ฅผ ๋งŒ๋“ค ์ˆ˜๋„ ์žˆ๋‹ค. ์•ž์œผ๋กœ ArrayBuffer๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ๋” ๋งŽ์€ DataView ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์ด ํ™œ์„ฑํ™”๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž€๋‹ค.

    JavaScript์˜ ๋ฐฐ์—ด์ด ์ด๋ ‡๊ฒŒ ๊ฐœ์„ ๋œ ๊ฒƒ์€ ์ข‹์€ ์ผ์ด๋‹ค. ์ด์ œ JavaScript์˜ ๋ฐฐ์—ด์€ ๋น ๋ฅด๊ณ  ํšจ์œจ์ ์ด๋ฉฐ ๊ฐ•๋ ฅํ•˜๊ณ  ๋˜‘๋˜‘ํ•˜๊ฒŒ ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ํ• ๋‹นํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ ๊ฒƒ์ด๋‹ค.

    Evan Moon

    ๐Ÿข ๊ฑฐ๋ถ์ด์ฒ˜๋Ÿผ ์‚ด์ž

    ๊ฐœ๋ฐœ์„ ์ž˜ํ•˜๊ธฐ ์œ„ํ•ด์„œ๊ฐ€ ์•„๋‹Œ ๊ฐœ๋ฐœ์„ ์ฆ๊ธฐ๊ธฐ ์œ„ํ•ด ๋…ธ๋ ฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค. ์‚ฌ์†Œํ•œ ์ƒ๊ฐ ์ •๋ฆฌ๋ถ€ํ„ฐ ํŠœํ† ๋ฆฌ์–ผ, ์‚ฝ์งˆ๊ธฐ ์ •๋„๋ฅผ ์ฃผ๋กœ ๋„์ ์ด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.