๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Front-end/JS

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐฐ์—ด Array

by ciocio 2021. 8. 13.

๐Ÿ“Œ  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฐฐ์—ด์€ ๋ฐฐ์—ด์ด ์•„๋‹ˆ๋‹ค?

 

์ž๋ฃŒ ๊ตฌ์กฐdata structure์—์„œ ๋งํ•˜๋Š” "๋ฐฐ์—ด" === ๋™์ผํ•œ ํฌ๊ธฐ์˜ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์ด ๋นˆํ‹ˆ์—†์ด ์—ฐ์†์ ์œผ๋กœ ๋‚˜์—ด๋œ ์ž๋ฃŒ ๊ตฌ์กฐ.

์ฆ‰, "๋ฐฐ์—ด"์˜ ์š”์†Œ๋Š” ํ•˜๋‚˜์˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…์œผ๋กœ ํ†ต์ผ๋˜์–ด ์žˆ์œผ๋ฉฐ, ์„œ๋กœ ์—ฐ์†์ ์œผ๋กœ ์ธ์ ‘ํ•ด ์žˆ๋‹ค. ( ๋ฐ€์ง‘ ๋ฐฐ์—ดdense array )

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

 

์ผ๋ฐ˜์ ์ธ ๋ฐฐ์—ด ์žฅ๋‹จ์ 

์žฅ์ : ์ธ๋ฑ์Šค๋กœ ์š”์†Œ์— ๋น ๋ฅด๊ฒŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.

๋‹จ์ : ํŠน์ • ์š”์†Œ๋ฅผ ๊ฒ€์ƒ‰/์‚ฝ์ž…/์‚ญ์ œํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” ๋น„ํšจ์œจ์ ์ด๋‹ค.

 

์ฆ‰, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฐฐ์—ด์€ ์—ฐ์†์ ์œผ๋กœ ์ด์–ด์ ธ ์žˆ์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค. ex. ํฌ์†Œ ๋ฐฐ์—ด

์ฆ‰, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฐฐ์—ด์€ ์š”์†Œ๋ฅผ ์œ„ํ•œ ๊ฐ๊ฐ์˜ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์ด ๋™์ผํ•œ ํฌ๊ธฐ๋ฅผ ๊ฐ–์ง€ ์•Š์•„๋„ ๋œ๋‹ค. ex. ์š”์†Œ๋ฅผ ์ข…๋ฅ˜๋ณ„๋กœ ๋‹ด์„ ์ˆ˜ ์žˆ๋‹ค

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฐฐ์—ด ์žฅ๋‹จ์ 

์žฅ์ : ํŠน์ • ์š”์†Œ๋ฅผ ๊ฒ€์ƒ‰/์‚ฝ์ž…/์‚ญ์ œํ•˜๋Š” ๊ฒฝ์šฐ์— ์ผ๋ฐ˜์ ์ธ ๋ฐฐ์—ด๋ณด๋‹ค ๋น ๋ฅผ ์ˆ˜ ์žˆ๋‹ค.

๋‹จ์ : ์ธ๋ฑ์Šค๋กœ ์š”์†Œ์— ์ ‘๊ทผํ•  ๋•Œ ์ผ๋ฐ˜ ๋ฐฐ์—ด๋ณด๋‹ค ๋Š๋ฆฌ๋‹ค.

 

-->  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฐฐ์—ด์€ ์ผ๋ฐ˜์ ์ธ ๋ฐฐ์—ด์˜ ๋™์ž‘์„ ํ‰๋‚ด ๋‚ธ ํŠน์ˆ˜ํ•œ ๊ฐ์ฒด๋‹ค.

 

 

 

๐Ÿ“Œ  ๋ฐฐ์—ด ๋ฆฌํ„ฐ๋Ÿด

 

 

๋ฐฐ์—ด์€ ๊ฐ์ฒด์ง€๋งŒ ํ”„๋กœํผํ‹ฐ ํ‚ค๊ฐ€ ์—†๊ณ  ๊ฐ’๋งŒ ์กด์žฌํ•œ๋‹ค.

 

// ๋ฐฐ์—ด ๋ฆฌํ„ฐ๋Ÿด์€ 0๊ฐœ ์ด์ƒ์˜ ์š”์†Œ๋ฅผ, ์‰ผํ‘œ๋กœ ๊ตฌ๋ถ„ํ•˜์—ฌ ๋Œ€๊ด„ํ˜ธ๋กœ ๋ฌถ๋Š”๋‹ค.

const arr = [1, 2, 3];
console.log(arr.length);  // 3


// ๋ฐฐ์—ด ๋ฆฌํ„ฐ๋Ÿด์— ์š”์†Œ๋ฅผ ํ•˜๋‚˜๋„ ์ถ”๊ฐ€ํ•˜์ง€ ์•Š์œผ๋ฉด, ๋ฐฐ์—ด์˜ ๊ธธ์ด๋Š” 0์ธ ๋นˆ ๋ฐฐ์—ด์ด ๋œ๋‹ค.

const arr = [];
console.log(arr.length);  // 0


// ๋ฐฐ์—ด ๋ฆฌํ„ฐ๋Ÿด์— ์š”์†Œ๋ฅผ ์ƒ๋žตํ•˜๋ฉด, "ํฌ์†Œ ๋ฐฐ์—ด"์ด ์ƒ์„ฑ๋œ๋‹ค.

const arr = [1, , 3];  
console.log(arr.length)  // 3
                         // ํฌ์†Œ ๋ฐฐ์—ด
					     // ํฌ์†Œ ๋ฐฐ์—ด์€ ๋ฐฐ์—ด ๊ธธ์ด๋Š” ๊ฐ™์€๋ฐ ์š”์†Œ ๊ฐ’ ๊ฐœ์ˆ˜๋Š” ์ ์Œ ;; 
                         // OMG ์ตœ์•…

 

 

๐Ÿ“Œ  ๋ฐฐ์—ด ์ข…๋ฅ˜?

 

 

โ—พ Array ์ƒ์„ฑ์ž ํ•จ์ˆ˜

 

const arr = new Array(10);

console.log(arr);         // [empty x 10]
console.log(arr.length);  // 10

// ์ด๋•Œ ์ƒ์„ฑ๋œ ๋ฐฐ์—ด -> ํฌ์†Œ ๋ฐฐ์—ด
// length ํ”„๋กœํผํ‹ฐ ๊ฐ’์€ 0์ด ์•„๋‹ˆ์ง€๋งŒ, ์‹ค์ œ๋กœ ๋ฐฐ์—ด์˜ ์š”์†Œ๋Š” ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค.

console.log(Object.getOwnPropertyDescriptors(arr));
// length: configurable: false, enumerable: false, value: 10, writable: true

 

// ๋ฐฐ์—ด์€ ์š”์†Œ๋ฅผ ์ตœ๋Œ€ (2^32 - 1 = 4,294,967,295)๊ฐœ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋‹ค.
new Array(4294967295);

// ์ „๋‹ฌ๋œ ์ธ์ˆ˜๊ฐ€ 0~4,294,967,295๋ฅผ ๋ฒ—์–ด๋‚˜๋ฉด RangeError๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.
// ์ „๋‹ฌ๋œ ์ธ์ˆ˜๊ฐ€ ์Œ์ˆ˜์—ฌ๋„ RangeError๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.
new Array(4294967296);  // RangeError: Invalid array length 
new Array(-1);          // RangeError: Invalid array length

// ์ „๋‹ฌ๋œ ์ธ์ˆ˜๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ, ๋นˆ ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•œ๋‹ค !
new Array();  // -> []

// ์ „๋‹ฌ๋œ ์ธ์ˆ˜ ๊ฐœ์ˆ˜ >= 2 -> ๋ฐฐ์—ด ์ƒ์„ฑ
new Array(1, 2, 3);  // -> [1, 2, 3]

// ์ „๋‹ฌ๋œ ์ธ์ˆ˜ ๊ฐœ์ˆ˜ <= 1 && !typeof ์ธ์ˆ˜ === 'number' -> ๋ฐฐ์—ด ์ƒ์„ฑ
new Array({});       // -> [{}]

// new ์—ฐ์‚ฐ์ž์™€ ํ˜ธ์ถœํ•˜์ง€์•Š๋”๋ผ๋„, ์ผ๋ฐ˜ ํ•จ์ˆ˜๋กœ์„œ ํ˜ธ์ถœํ•ด๋„ ๋™์ž‘ํ•œ๋‹ค.
Array(1, 2, 3);      // -> [1, 2, 3]

 

 

โ—พ Array.of (ES6 ๋„์ž…)

 

Array ์ƒ์„ฑ์ž ํ•จ์ˆ˜์™€ ๋‹ค๋ฅด๊ฒŒ, ์ „๋‹ฌ๋œ ์ธ์ˆ˜๊ฐ€ 1๊ฐœ์—ฌ๋„ ๊ทธ ๊ฐ’์˜ ํƒ€์ž…์— ์ƒ๊ด€์—†์ด ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•œ๋‹ค !

 

Array.of(1);        // -> [1]
Array.of(1, 2, 3);  // -> [1, 2, 3]
Array.of('string');  // -> ['string']

 

 

โ—พ Array.from (ES6 ๋„์ž…)

 

์œ ์‚ฌ ๋ฐฐ์—ด ๊ฐ์ฒดarray-like object๋˜๋Š” ์ดํ„ฐ๋Ÿฌ๋ธ” ๊ฐ์ฒดiterable object๋ฅผ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์•„ ๋ฐฐ์—ด๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

 

Array.from({length: 2, 0: 'a', 1: 'b'});  // -> ['a', 'b']
Array.from('Hello');                      // -> ['H','e','l','l','o']

 

 

๐Ÿ  ์œ ์‚ฌ ๋ฐฐ์—ด ๊ฐ์ฒด array-like object?

 

01 ๋งˆ์น˜ ๋ฐฐ์—ด์ฒ˜๋Ÿผ ์ธ๋ฑ์Šค๋กœ ํ”„๋กœํผํ‹ฐ ๊ฐ’์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.

02 length ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ–๋Š” ๊ฐ์ฒด์ด๋‹ค.

 

// ์œ ์‚ฌ ๋ฐฐ์—ด ๊ฐ์ฒด
const arrayLike = {
  '0': 'apple',
  '1': 'banana',
  '2': 'orange',
  length: 3
}

// ์œ ์‚ฌ ๋ฐฐ์—ด ๊ฐ์ฒด๋Š” ๋งˆ์น˜ ๋ฐฐ์—ด์ฒ˜๋Ÿผ for๋ฌธ์œผ๋กœ ์ˆœํšŒํ•  ์ˆ˜ ์žˆ๋‹ค.
for(let i=0; i<arrayLike.length; i++){
  console.log(arrayLike[i]);  // apple banana orange
}

 

 

๐Ÿ  ์ดํ„ฐ๋Ÿฌ๋ธ” iterable object?

 

01 Symbol.iterator ๋ฉ”์„œ๋“œ๋ฅผ ๊ตฌํ˜„ํ•˜์—ฌ for...of ๋ฌธ์œผ๋กœ ์ˆœํšŒํ•  ์ˆ˜ ์žˆ๋‹ค.

02 ์Šคํ”„๋ ˆ๋“œ ๋ฌธ๋ฒ•, ๋ฐฐ์—ด ๋””์ŠคํŠธ๋Ÿญ์ฒ˜๋ง ํ• ๋‹น์˜ ๋Œ€์ƒ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ์ฒด์ด๋‹ค.

-->  ์ง€๊ธˆ์œผ๋กœ์„œ๋Š” ์ดํ•ด๊ฐ€ ํ•˜๋‚˜๋„ ์•ˆ๊ฐ€์ง€๋งŒ ์ผ๋‹จ PASS ^_^

03 ES6์—์„œ ์ œ๊ณตํ•˜๋Š” built-in ์ดํ„ฐ๋Ÿฌ๋ธ”์€ Array, String, Map, Set, DOM Collection(NodeList, HTMLCollection), arguments..

 

 

 

๐Ÿ“Œ  ๋ฐฐ์—ด ์š”์†Œ์˜ ์ฐธ์กฐ

 

 

๐Ÿ  ์ฐธ์กฐ

 

const arr = [1, 2];

// ์ธ๋ฑ์Šค๊ฐ€ 0์ธ ์š”์†Œ๋ฅผ ์ฐธ์กฐ
console.log(arr[0]);  // 1

 

์ธ๋ฑ์Šค๋Š” ๊ฐ’์„ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์˜๋ฏธ์—์„œ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ ํ‚ค์™€ ๊ฐ™์€ ์—ญํ• ์„ ํ•œ๋‹ค.

 

const arr = [1, 2];

// ๋ฐฐ์—ด arr์—๋Š” ์ธ๋ฑ์Šค๊ฐ€ 2์ธ ์š”์†Œ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค.
console.log(arr[2]);  // undefined

 

์กด์žฌํ•˜์ง€ ์•Š๋Š” ์š”์†Œ์— ์ ‘๊ทผํ•˜๋ฉด undefined๊ฐ€ ๋ฐ˜ํ™˜๋œ๋‹ค.

๋ฐฐ์—ด์€ ์‚ฌ์‹ค, ์ธ๋ฑ์Šค๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฌธ์ž์—ด์„ ํ”„๋กœํผํ‹ฐ ํ‚ค๋กœ ๊ฐ–๋Š” ๊ฐ์ฒด๋‹ค.

์กด์žฌํ•˜์ง€ ์•Š๋Š” ํ”„๋กœํผํ‹ฐ ํ‚ค๋กœ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ์— ์ ‘๊ทผํ–ˆ์„ ๋•Œ undefined์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ

๋ฐฐ์—ด๋„ ์กด์žฌํ•˜์ง€ ์•Š๋Š” ์š”์†Œ๋ฅผ ์ฐธ์กฐํ•˜๋ฉด undefined๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

 

// ํฌ์†Œ ๋ฐฐ์—ด
const arr = [1,  , 3];

console.log(arr[1]);  // undefined
console.log(arr[3]);  // undefined

 

๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ํฌ์†Œ ๋ฐฐ์—ด์˜ ์กด์žฌํ•˜์ง€ ์•Š๋Š” ์š”์†Œ๋ฅผ ์ฐธ์กฐํ•ด๋„ undefined๊ฐ€ ๋ฐ˜ํ™˜๋œ๋‹ค.

 

 

 

๐Ÿ“Œ  ๋ฐฐ์—ด ์š”์†Œ์˜ ์ถ”๊ฐ€ & ๊ฐฑ์‹ 

 

 

๐Ÿ  ์ถ”๊ฐ€

 

const arr = [0];

// ๋ฐฐ์—ด ์š”์†Œ์˜ ์ถ”๊ฐ€
arr[1] = 1;

console.log(arr);  // [0, 1]
console.log(arr.length);  // 2

 

๊ฐ์ฒด์— ํ”„๋กœํผํ‹ฐ ํ‚ค๋ฅผ ๋™์ ์œผ๋กœ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ฐฐ์—ด์—๋„ ๊ทธ ์š”์†Œ๋ฅผ ๋™์ ์œผ๋กœ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค.

์ด๋•Œ length ํ”„๋กœํผํ‹ฐ ๊ฐ’์€ ์ž๋™๊ฐฑ์‹ ๋œ๋‹ค.

 

arr[100] = 100;

console.log(arr);  // [0, 1, empty*98, 100]
console.log(arr.length);  // 101

 

ํ˜„์žฌ ๋ฐฐ์—ด์˜ length ํ”„๋กœํผํ‹ฐ ๊ฐ’๋ณด๋‹ค ํฐ ์ธ๋ฑ์Šค๋กœ ์ƒˆ๋กœ์šด ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ํฌ์†Œ ๋ฐฐ์—ด์ด ๋œ๋‹ค.

๋ช…์‹œ์ ์œผ๋กœ ์ธ๋ฑ์Šค๋กœ ์š”์†Œ์— ์ ‘๊ทผํ•˜์—ฌ ๊ฐ’์„ ํ• ๋‹นํ•˜์ง€ ์•Š์€ ์š”์†Œ๋Š” ์ƒ์„ฑ๋˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์— ์ฃผ์˜ํ•˜์ž.

 

 

๐Ÿ  ๊ฐฑ์‹ 

 

// ์š”์†Œ๊ฐ’์˜ ๊ฐฑ์‹ 
arr[1] = 10;

console.log(arr);  // [0, 10, empty*98, 100]

 

์ด๋ฏธ ์š”์†Œ๊ฐ€ ์กด์žฌํ•˜๋Š” ์ธ๋ฑ์Šค์— ๊ฐ’์„ ์žฌํ• ๋‹นํ•˜๋ฉด ์š”์†Œ๊ฐ’์ด ๊ฐฑ์‹ ๋œ๋‹ค.

 

const arr = [];

// ๋ฐฐ์—ด ์š”์†Œ์˜ ์ถ”๊ฐ€
arr[0] = 1;
arr['1'] = 2;

// ํ”„๋กœํผํ‹ฐ ์ถ”๊ฐ€
arr['foo'] = 3;
arr.var = 4;
arr[1.1] = 5;
arr[-1] = 6;

console.log(arr);  // [1, 2, foo:3, bar:4, '1.1':5, '-1':6]

// ํ”„๋กœํผํ‹ฐ๋Š” length์— ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๋Š”๋‹ค.
console.log(arr.length);  // 2

 

์ธ๋ฑ์Šค๋Š” ์š”์†Œ์˜ ์œ„์น˜๋ฅผ ๋‚˜ํƒ€๋‚ด๋ฏ€๋กœ ๋ฐ˜๋“œ์‹œ 0์ด์ƒ์˜ ์ •์ˆ˜( ๋˜๋Š” ์ •์ˆ˜ ํ˜•ํƒœ์˜ ๋ฌธ์ž์—ด )๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.

์ •์ˆ˜ ์ด์™ธ์˜ ๊ฐ’์„ ์ธ๋ฑ์Šค์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•˜๋ฉด, ์š”์†Œ๊ฐ€ ์ƒ์„ฑ๋˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ํ”„๋กœํผํ‹ฐ๊ฐ€ ์ƒ์„ฑ๋œ๋‹ค.

์ด๋•Œ ์ถ”๊ฐ€๋œ ํ”„๋กœํผํ‹ฐ๋Š” length ํ”„๋กœํผํ‹ฐ ๊ฐ’์— ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๋Š”๋‹ค.

 

 

 

๐Ÿ“Œ  ๋ฐฐ์—ด ์š”์†Œ์˜ ์‚ญ์ œ

 

 

๐Ÿ  ์‚ญ์ œ

 

const arr = [1, 2, 3];

// ๋ฐฐ์—ด ์š”์†Œ์˜ ์‚ญ์ œ
delete arr[1];
console.log(arr);  // [1, empty, 3]

// length ํ”„๋กœํผํ‹ฐ์— ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๋Š”๋‹ค. -> ํฌ์†Œ ๋ฐฐ์—ด์ด ๋œ๋‹ค.
console.log(arr.length);  // 3

 

delete ์—ฐ์‚ฐ์ž๋Š” ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ์‚ญ์ œํ•˜์ง€๋งŒ ํฌ์†Œ ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•œ๋‹ค.

์ด ์—ฐ์‚ฐ์ž๋Š” ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

ํฌ์†Œ ๋ฐฐ์—ด์„ ๋งŒ๋“ค์ง€ ์•Š์œผ๋ฉด์„œ ๋ฐฐ์—ด์˜ ํŠน์ • ์š”์†Œ๋ฅผ ์™„์ „ํžˆ ์‚ญ์ œํ•˜๋ ค๋ฉด Array.prototype.splice ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด๋œ๋‹น :)

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€