๐ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฐฐ์ด์ ๋ฐฐ์ด์ด ์๋๋ค?
์๋ฃ ๊ตฌ์กฐ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 ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ฉด๋๋น :)
'Front-end > JS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
์๋ฐ์คํฌ๋ฆฝํธ ๋ฐฐ์ด ๊ณ ์ฐจํจ์ reduce (0) | 2021.08.15 |
---|---|
์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ DOM (Document Object Model) (0) | 2021.08.14 |
์๋ฐ์คํฌ๋ฆฝํธ ์์ ํ์ & ๊ฐ์ฒด ํ์ Primitive type & Reference type (0) | 2021.08.12 |
์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ์์ด String (0) | 2021.07.24 |
์๋ฐ์คํฌ๋ฆฝํธ ์ ์ด๋ฌธ Control flow statement (0) | 2021.07.23 |
๋๊ธ