[Deep Dive] ๋ฐฐ์—ด

link717ยท2022๋…„ 1์›” 4์ผ
0

Deep Dive

๋ชฉ๋ก ๋ณด๊ธฐ
10/28
post-thumbnail

๐ŸŒผ27. ๋ฐฐ์—ด

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ฐฐ์—ด์€ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๊ฐ’์„ ์ˆœ์ฐจ์ ์œผ๋กœ ๋‚˜์—ดํ•œ ์ž๋ฃŒ๊ตฌ์กฐ๋กœ ์—„๋ฐ€ํžˆ ๋ง์— ์ž๋ฃŒ๊ตฌ์กฐ์—์„œ ํ†ต์šฉ๋˜๋Š” ์ผ๋ฐ˜์ ์ธ ์˜๋ฏธ์˜ ๋ฐฐ์—ด์ด ์•„๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฐฐ์—ด์€ ์ผ๋ฐ˜์ ์ธ ๋ฐฐ์—ด์˜ ๋™์ž‘์„ ํ‰๋‚ด ๋‚ธ ํŠน์ˆ˜ํ•œ ๊ฐ์ฒด๋‹ค.

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

์ž๋ฃŒ๊ตฌ์กฐ์—์„œ ๋งํ•˜๋Š” ๋ฐฐ์—ด์€ ๋™์ผํ•œ ํฌ๊ธฐ์˜ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์ด ๋นˆํ‹ˆ์—†์ด ์—ฐ์†์ ์œผ๋กœ ๋‚˜์—ด๋œ ์ž๋ฃŒ๊ตฌ์กฐ๋ฅผ ๋งํ•œ๋‹ค. ์ฆ‰, ๋ฐฐ์—ด์˜ ์š”์†Œ๋Š” ํ•˜๋‚˜์˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…์œผ๋กœ ํ†ต์ผ๋˜์–ด ์žˆ์œผ๋ฉฐ ์„œ๋กœ ์—ฐ์†์ ์œผ๋กœ ์ธ์ ‘ํ•ด ์žˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฐฐ์—ด์„ ๋ฐ€์ง‘ ๋ฐฐ์—ด(dense array)์ด๋ผ ํ•œ๋‹ค.

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

  • ์ผ๋ฐ˜์ ์ธ ๋ฐฐ์—ด์€ ๊ฐ ์š”์†Œ๊ฐ€ ๋™์ผํ•œ ๋ฐ์ดํ„ฐ ํฌ๊ธฐ๋ฅผ ๊ฐ€์ง€๋ฉฐ ๋นˆํ‹ˆ์—†์ด ์—ฐ์†์ ์œผ๋กœ ์ด์–ด์ ธ ์žˆ์œผ๋ฏ€๋กœ ์ธ๋ฑ์Šค๋ฅผ ํ†ตํ•ด ๋‹จ ํ•œ๋ฒˆ์˜ ์—ฐ์‚ฐ์œผ๋กœ ์ž„์˜์˜ ์š”์†Œ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์–ด ๋งค์šฐ ํšจ์œจ์ ์ด๋‹ค. ํ•˜์ง€๋งŒ ํŠน์ • ์š”์†Œ๋ฅผ ๊ฒ€์ƒ‰ํ•˜๊ฑฐ๋‚˜ ์š”์†Œ๋ฅผ ์‚ฝ์ž… ๋˜๋Š” ์‚ญ์ œํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ์—ฐ์†์ ์œผ๋กœ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ ์š”์†Œ๋“ค์„ ์ด๋™์‹œ์ผœ์•ผํ•ด์„œ ํšจ์œจ์ ์ด์ง€ ์•Š๋‹ค. (์ •๋ ฌ๋˜์–ด ์žˆ์ง€ ์•Š์€ ๊ฐ’์„ ์„ ํ˜• ํƒ์ƒ‰ํ•  ๊ฒฝ์šฐ, O(n)๋งŒํผ์˜ ์‹œ๊ฐ„๋ณต์žก๋„๊ฐ€ ๊ฑธ๋ฆฐ๋‹ค.)

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐฐ์—ด์€ ํ•ด์‹œ ํ…Œ์ด๋ธ”๋กœ ๊ตฌํ˜„๋œ ๊ฐ์ฒด์ด๋ฏ€๋กœ ์ธ๋ฑ์Šค๋กœ ์š”์†Œ์— ์ ‘๊ทผํ•˜๋Š” ๊ฒฝ์šฐ ์ผ๋ฐ˜์ ์ธ ๋ฐฐ์—ด๋ณด๋‹ค ์„ฑ๋Šฅ์ ์ธ ๋ฉด์—์„œ ๋Š๋ฆด์ˆ˜ ๋ฐ–์— ์—†๋Š” ๊ตฌ์กฐ์ ์ธ ๋‹จ์ ์ด ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ํŠน์ • ์š”์†Œ๋ฅผ ๊ฒ€์ƒ‰ํ•˜๊ฑฐ๋‚˜ ์š”์†Œ๋ฅผ ์‚ฝ์ž… ๋˜๋Š” ์‚ญ์ œํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” ์ผ๋ฐ˜์ ์ธ ๋ฐฐ์—ด๋ณด๋‹ค ๋น ๋ฅธ ์„ฑ๋Šฅ์„ ๊ธฐ๋Œ€ํ•  ์ˆ˜ ์žˆ๋‹ค.

console.log(Object.getOwnPropertyDescriptors([1,2,3]));
/*

1. ์ธ๋ฑ์Šค๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฌธ์ž์—ด์„ ํ”„๋กœํผํ‹ฐ ํ‚ค๋กœ ๊ฐ–๋Š”๋‹ค.
2. length ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ–๋Š” ํŠน์ˆ˜ํ•œ ๊ฐ์ฒด๋‹ค.
3. ๋ฐฐ์—ด์˜ ์š”์†Œ๋Š” ์‚ฌ์‹ค ํ”„๋กœํผํ‹ฐ ๊ฐ’์ด๋‹ค.
4. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ๋“  ๊ฐ’์€ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ ๊ฐ’์ด ๋  ์ˆ˜ ์žˆ๋‹ค.
   ์ฆ‰, ์–ด๋–ค ๊ฐ’์ด๋ผ๋„ ๋ฐฐ์—ด์˜ ์š”์†Œ๊ฐ€ ๋  ์ˆ˜ ์žˆ๋‹ค.

{
  '0': {
    value: 1,
    writable: true,
    enumerable: true,
    configurable: true
  },
  '1': {
    value: 2,
    writable: true,
    enumerable: true,
    configurable: true
  },
  '2': {
    value: 3,
    writable: true,
    enumerable: true,
    configurable: true
  },
  length: {
    value: 3,
    writable: true,
    enumerable: false,
    configurable: false
  }
}
*/

๐ŸŒผ27.3 length ํ”„๋กœํผํ‹ฐ์™€ ํฌ์†Œ ๋ฐฐ์—ด

length ํ”„๋กœํผํ‹ฐ๋Š” ์š”์†Œ์˜ ๊ฐœ์ˆ˜, ์ฆ‰ ๋ฐฐ์—ด์˜ ๊ธธ์ด๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” 0 ์ด์ƒ์˜ ์ •์ˆ˜๋ฅผ ๊ฐ’์œผ๋กœ ๊ฐ–๋Š”๋‹ค. length ํ”„๋กœํผํ‹ฐ ๊ฐ’์€ ์š”์†Œ์˜ ๊ฐœ์ˆ˜, ์ฆ‰ ๋ฐฐ์—ด์˜ ๊ธธ์ด๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ๊ฒฐ์ •๋˜์ง€๋งŒ ์ž„์˜์˜ ์ˆซ์ž ๊ฐ’์„ ๋ช…์‹œ์ ์œผ๋กœ ํ• ๋‹นํ•  ์ˆ˜๋„ ์žˆ๋‹ค.

  • ํ˜„์žฌ length ํ”„๋กœํผํ‹ฐ ๊ฐ’๋ณด๋‹ค ์ž‘์€ ์ˆซ์ž ๊ฐ’์„ ํ• ๋‹นํ•œ ๊ฒฝ์šฐ: ๋ฐฐ์—ด์˜ ๊ธธ์ด๊ฐ€ ์ค„์–ด๋“ ๋‹ค.
const arr = [1, 2, 3, 4, 5];
arr.length = 3;
console.log(arr); // [1, 2, 3]
  • ํ˜„์žฌ length ํ”„๋กœํผํ‹ฐ ๊ฐ’๋ณด๋‹ค ํฐ ์ˆซ์ž ๊ฐ’์„ ํ• ๋‹นํ•œ ๊ฒฝ์šฐ: length ํ”„๋กœํผํ‹ฐ ๊ฐ’์€ ๋ณ€๊ฒฝ๋˜์ง€๋งŒ ์‹ค์ œ๋กœ ๋ฐฐ์—ด์˜ ๊ธธ์ด๊ฐ€ ๋Š˜์–ด๋‚˜์ง€๋Š” ์•Š๋Š”๋‹ค.
/*
1. <2 empty items>๋Š” ์‹ค์ œ๋กœ ์ถ”๊ฐ€๋œ ๋ฐฐ์—ด์˜ ์š”์†Œ๊ฐ€ ์•„๋‹ˆ๋‹ค. ๊ฐ’์ด ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค.
2. length ํ”„๋กœํผํ‹ฐ๋Š” ์„ฑ๊ณต์ ์œผ๋กœ ๋ณ€๊ฒฝ๋˜์ง€๋งŒ ์‹ค์ œ ๋ฐฐ์—ด์—๋Š” ์•„๋ฌด๋Ÿฐ ๋ณ€ํ•จ์ด ์—†๋‹ค.
   ๋น„์–ด ์žˆ๋Š” ์š”์†Œ๋ฅผ ์œ„ํ•ด ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์„ ํ™•๋ณดํ•˜์ง€ ์•Š์œผ๋ฉด ๋นˆ ์š”์†Œ๋ฅผ ์ƒ์„ฑํ•˜์ง€๋„ ์•Š๋Š”๋‹ค.
*/
const arr = [1];
arr.length = 3;
console.log(arr.length); // 3
console.log(arr); // [1, <2 empty items>]

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

๐ŸŒผ27.4 ๋ฐฐ์—ด ์ƒ์„ฑ

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

  • Array ์ƒ์„ฑ์ž ํ•จ์ˆ˜: new ์—ฐ์‚ฐ์ž์™€ ํ•จ๊ป˜ ํ˜ธ์ถœํ•˜์ง€ ์•Š๋”๋ผ๋„ ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•œ๋‹ค. ์ „๋‹ฌ๋œ ์ธ์ˆ˜๊ฐ€ 2๊ฐœ ์ด์ƒ์ด๋ฉด ์ธ์ˆ˜๋ฅผ ์š”์†Œ๋กœ ๊ฐ–๋Š” ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•˜๋ฉฐ ์ „๋‹ฌ๋œ ์ธ์ˆ˜๊ฐ€ ์ˆซ์ž๊ฐ€ ์•„๋‹ˆ๋ฉด ํ•ด๋‹น ์ธ์ˆ˜๋ฅผ ์š”์†Œ๋กœ ๊ฐ–๋Š” ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•œ๋‹ค.

  • Array.of: Array ์ƒ์„ฑ์ž ํ•จ์ˆ˜์™€ ๋‹ค๋ฅด๊ฒŒ ์ „๋‹ฌ๋œ ์ธ์ˆ˜๊ฐ€ 1๊ฐœ์ด๊ณ  ์ˆซ์ž์ด๋”๋ผ๋„ ์ธ์ˆ˜๋ฅผ ์š”์†Œ๋กœ ๊ฐ–๋Š” ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•œ๋‹ค.

  • Array.from: ์œ ์‚ฌ ๋ฐฐ์—ด ๊ฐ์ฒด ๋˜๋Š” ์ดํ„ฐ๋Ÿฌ๋ธ” ๊ฐ์ฒด๋ฅผ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์•„ ๋ฐฐ์—ด๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

    • ์œ ์‚ฌ ๋ฐฐ์—ด ๊ฐ์ฒด๋Š” ๋งˆ์น˜ ๋ฐฐ์—ด์ฒ˜๋Ÿผ ์ธ๋ฑ์Šค๋กœ ํ”„๋กœํผํ‹ฐ ๊ฐ’์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ณ  length ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ–๋Š” ๊ฐ์ฒด๋ฅผ ๋งํ•œ๋‹ค. ์œ ์‚ฌ ๋ฐฐ์—ด ๊ฐ์ฒด๋Š” ๋งˆ์น˜ ๋ฐฐ์—ด์ฒ˜๋Ÿผ for๋ฌธ์œผ๋กœ ์ˆœํšŒํ•  ์ˆ˜๋„ ์žˆ๋‹ค.
const arr1 = [1, 2, 3];

const arr2 = new Array(10); // [ <10 empty items> ]
const arr3 = Array(1, 2, 3); // [1, 2, 3]

const arr4 = Array.of(1); // [1]

const arr5 = Array.from({ length: 2, 0: 'a', 1: 'b' }); // ['a', 'b']
const arr6 = Array.from('Hello'); // [ 'H', 'e', 'l', 'l', 'o' ]
const arr7 = Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]

๐ŸŒผ27.6 ๋ฐฐ์—ด ์š”์†Œ์˜ ์ถ”๊ฐ€์™€ ๊ฐฑ์‹ 

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

const arr = [];
// ๋ฐฐ์—ด ์š”์†Œ์˜ ์ถ”๊ฐ€
arr[0] = 1;
// ํ”„๋กœํผํ‹ฐ ์ถ”๊ฐ€
arr['foo'];
arr.bar = 4;

console.log(arr); // [1, foo: 3, bar: 4]

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

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

๋ฐฐ์—ด์€ ์‚ฌ์‹ค ๊ฐ์ฒด์ด๊ธฐ ๋•Œ๋ฌธ์— ๋ฐฐ์—ด์˜ ํŠน์ • ์š”์†Œ๋ฅผ ์‚ญ์ œํ•˜๊ธฐ ์œ„ํ•ด delete ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. delete ์—ฐ์‚ฐ์ž๋ฅผ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ์‚ญ์ œํ•˜๋Š”๋ฐ ์ด๋•Œ ๋ฐฐ์—ด์€ ํฌ์†Œ๋ฐฐ์—ด์ด ๋˜๋ฉฐ length ํ”„๋กœํผํ‹ฐ ๊ฐ’์€ ๋ณ€ํ•˜์ง€ ์•Š๋Š”๋‹ค.

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

๐ŸŒผ27.8 ๋ฐฐ์—ด ๋ฉ”์„œ๋“œ

๋ฐฐ์—ด ๋ฉ”์„œ๋“œ๋Š” ๊ฒฐ๊ณผ๋ฌผ์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ํŒจํ„ด์ด ๋‘ ๊ฐ€์ง€์ด๋ฏ€๋กœ ์ฃผ์˜๊ฐ€ ํ•„์š”ํ•˜๋‹ค. ๋ฐฐ์—ด์—๋Š” ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฉ”์„œ๋“œ(mutator method)์™€ ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š๊ณ  ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•˜๋Š” ๋ฉ”์„œ๋“œ(accessor method)๊ฐ€ ์žˆ๋‹ค. ES5๋ถ€ํ„ฐ ๋„์ž…๋œ ๋ฐฐ์—ด ๋ฉ”์„œ๋“œ๋Š” ๋Œ€๋ถ€๋ถ„ ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š์ง€๋งŒ ์ดˆ์ฐฝ๊ธฐ ๋ฐฐ์—ด ๋ฉ”์„œ๋“œ๋Š” ์ง์ ‘ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์–ด ๋ถ€์ˆ˜ ํšจ๊ณผ๊ฐ€ ์žˆ์œผ๋ฏ€๋กœ ์‚ฌ์šฉํ•  ๋•Œ ์ฃผ์˜ํ•ด์•ผ ํ•œ๋‹ค. ๋”ฐ๋ผ์„œ ๊ฐ€๊ธ‰์  ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํŽธ์ด ์ข‹๋‹ค.

  • ๋ฐฐ์—ด์— ํŠน์ • ์š”์†Œ๊ฐ€ ์กด์žฌํ•˜๋Š”์ง€ ํ™•์ธํ•  ๋•Œ๋Š” ๊ฐ€๋…์„ฑ ์ธก๋ฉด์—์„œ indexOf ๋ณด๋‹ค includes ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

  • ์›๋ณธ ๋ฐฐ์—ด ๋งˆ์ง€๋ง‰์— ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•  ๋•Œ๋Š” push ๋ฉ”์„œ๋“œ๋ณด๋‹ค length ํ”„๋กœํผํ‹ฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐฐ์—ด์˜ ๋งˆ์ง€๋ง‰์— ์š”์†Œ๋ฅผ ์ง์ ‘ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค. ๋˜ ์Šคํ”„๋ ˆ๋“œ ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋ฉด ์›๋ณธ ๋ฐฐ์—ด์˜ ์ˆ˜์ •์—†์ด ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์–ด ๋ถ€์ˆ˜ ํšจ๊ณผ๊ฐ€ ์—†๋‹ค.

const arr = [1, 2];
arr[arr.length] = 3; // push ๋Œ€์‹ 
  • push๋‚˜ unshift ๋ฉ”์„œ๋“œ๋ฅผ ๋Œ€์ฒดํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์œผ๋กœ concat ๋ฉ”์„œ๋“œ๊ฐ€ ์žˆ๋‹ค. ์›๋ณธ ๋ฐฐ์—ด์„ ํ•ด์ฒด์‹œ์ผœ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๊ตฌ์„ฑํ•œ๋‹ค.
const group1 = [1, 2];
const group2 = [3, 4];

const newGroup = group1.concat(group2); // [ 1, 2, 3, 4 ]
  • ๋ณ„๋„์˜ ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ES6์˜ ์Šคํ”„๋ ˆ๋“œ ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋ฉด push/unshift/concat ๋ฉ”์„œ๋“œ๋ฅผ ๋Œ€์ฒดํ•  ์ˆ˜ ์žˆ๋‹ค. ์ผ๊ด€์ ์œผ๋กœ ์Šคํ”„๋ ˆ๋“œ ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•  ๊ฒƒ์„ ๊ถŒ์žฅํ•œ๋‹ค. ์Šคํ”„๋ ˆ๋“œ ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋ฉด ์ดํ„ฐ๋Ÿฌ๋ธ” ๊ฐ์ฒด๋ฅผ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋ฐฐ์—ด๋กœ ๋ณ€๊ฒฝํ•  ์ˆ˜๋„ ์žˆ๋‹ค.
const originalArr = [1, 2, 3];
const arr1 = [...arr, 4]; // push ๋Œ€์‹ 
const arr2 = [0, ...arr]; // unshift ๋Œ€์‹ 
  • forEach ๋ฉ”์„œ๋“œ๋Š” ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํŒจ๋Ÿฌ๋‹ค์ž„์—์„œ for ๋ฐ˜๋ณต๋ฌธ์„ ๋Œ€์ฒดํ•  ์ˆ˜ ์žˆ๋Š” ๋ฉ”์„œ๋“œ๋กœ ๋ณต์žก์„ฑ์„ ๋‚ฎ์ถ”๊ณ  ๊ฐ€๋…์„ฑ์„ ๋†’ํ˜€์ค€๋‹ค. forEach ๋ฉ”์„œ๋“œ๋„ ๊ฒฐ๊ตญ์€ ๋‚ด๋ถ€์ ์œผ๋กœ for๋ฌธ์œผ๋กœ ๊ตฌํ˜„๋œ ๋กœ์ง์œผ๋กœ for๋ฌธ์— ๋น„ํ•ด ์„ฑ๋Šฅ์ด ์ข‹์ง€๋Š” ์•Š์ง€๋งŒ ์š”์†Œ๊ฐ€ ๋Œ€๋‹จํžˆ ๋งŽ์€ ๋ฐฐ์—ด์„ ์ˆœํšŒํ•˜๊ฑฐ๋‚˜ ์‹œ๊ฐ„์ด ๋งŽ์ด ๊ฑธ๋ฆฌ๋Š” ๋ณต์žกํ•œ ์ฝ”๋“œ ๋˜๋Š” ๋†’์€ ์„ฑ๋Šฅ์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ๊ฐ€ ์•„๋‹ˆ๋ผ๋ฉด forEach ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ๊ฒƒ์„ ๊ถŒ์žฅํ•œ๋‹ค.

์ถœ์ฒ˜: ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive-์ด์›…๋ชจ

profile
Turtle Never stop

0๊ฐœ์˜ ๋Œ“๊ธ€