ํ‹ฐ์Šคํ† ๋ฆฌ ๋ทฐ

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

 

*์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฐฐ์—ด์— ๋Œ€ํ•œ ์„ค๋ช…์€ ์•„๋ž˜์˜ ํฌ์ŠคํŒ…์„ ์ฐธ๊ณ ํ•˜์„ธ์š”.

https://j-su2.tistory.com/79

 

[JavaScript] ๋ฐฐ์—ด

๋ฐฐ์—ด์ด๋ž€? ๋ฐฐ์—ด(array)๋Š” ์—ฌ๋Ÿฌ๊ฐœ์˜ ๊ฐ’์„ ์ˆœ์ฐจ์ ์œผ๋กœ ๋‚˜์—ดํ•œ ์ž๋ฃŒ๊ตฌ์กฐ์ž…๋‹ˆ๋‹ค. ์š”์†Œ(element) : ๋ฐฐ์—ด์ด ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๊ฐ’ ์ธ๋ฑ์Šค(index) : ๋ฐฐ์—ด์˜ ์š”์†Œ์—์„œ ์ž์‹ ์˜ ์œ„์น˜๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” 0 ์ด์ƒ์˜ ์ •์ˆ˜๋กœ ๋ฐฐ์—ด์—

j-su2.tistory.com


๋ฐฐ์—ด ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์ฃผ์˜ํ•  ์ 

Array ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋Š” ์ •์  ๋ฉ”์„œ๋“œ๋ฅผ ์ œ๊ณตํ•˜๊ณ  ๋ฐฐ์—ด ๊ฐ์ฒด ํ”„๋กœํ† ํƒ€์ž…์ธ Array.prototype์€ ํ”„๋กœํ† ํƒ€์ž… ๋ฉ”์„œ๋“œ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฐฐ์—ด ๋ฉ”์†Œ๋“œ์—๋Š” ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฉ”์„œ๋“œ์™€ ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š๊ณ  ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•˜๋Š” ๋ฉ”์„œ๋“œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

 

const arr = [1];

// push ๋ฉ”์„œ๋“œ๋Š” ์›๋ณธ ๋ฐฐ์—ด(arr)์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•œ๋‹ค.
arr.push(2);
console.log(arr); // [1, 2]

// concat ๋ฉ”์„œ๋“œ๋Š” ์›๋ณธ ๋ฐฐ์—ด(arr)์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š๊ณ  ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
const result = arr.concat(3);
console.log(arr);    // [1, 2]
console.log(result); // [1, 2, 3]

 

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

 


๋ฐฐ์—ด ๋ฉ”์„œ๋“œ

๋ฐฐ์—ด์ด ์ œ๊ณตํ•˜๋Š” ๋ฉ”์„œ๋“œ ์ค‘์—์„œ ์‚ฌ์šฉ ๋นˆ๋„๊ฐ€ ๋†’์€ ๋ฉ”์„œ๋“œ์— ๋Œ€ํ•ด ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

Array.of

์ „๋‹ฌ๋œ ์ธ์ˆ˜๋ฅผ ์š”์†Œ๋กœ ๊ฐ–๋Š” ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. 

 

// ์ „๋‹ฌ๋œ ์ธ์ˆ˜๊ฐ€ 1๊ฐœ์ด๊ณ  ์ˆซ์ž์ด๋”๋ผ๋„ ์ธ์ˆ˜๋ฅผ ์š”์†Œ๋กœ ๊ฐ–๋Š” ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•œ๋‹ค.
Array.of(1); // -> [1]

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

Array.of('string'); // -> ['string']

 

Array.from

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

 

// ์œ ์‚ฌ ๋ฐฐ์—ด ๊ฐ์ฒด๋ฅผ ๋ณ€ํ™˜ํ•˜์—ฌ ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•œ๋‹ค.
Array.from({ length: 2, 0: 'a', 1: 'b' }); // -> ['a', 'b']

// ์ดํ„ฐ๋Ÿฌ๋ธ”์„ ๋ณ€ํ™˜ํ•˜์—ฌ ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•œ๋‹ค. ๋ฌธ์ž์—ด์€ ์ดํ„ฐ๋Ÿฌ๋ธ”์ด๋‹ค.
Array.from('Hello'); // -> ['H', 'e', 'l', 'l', 'o']

// Array.from์— length๋งŒ ์กด์žฌํ•˜๋Š” ์œ ์‚ฌ ๋ฐฐ์—ด ๊ฐ์ฒด๋ฅผ ์ „๋‹ฌํ•˜๋ฉด undefined๋ฅผ ์š”์†Œ๋กœ ์ฑ„์šด๋‹ค.
Array.from({ length: 3 }); // -> [undefined, undefined, undefined]

// Array.from์€ ๋‘ ๋ฒˆ์งธ ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์œผ๋กœ ๊ตฌ์„ฑ๋œ ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
Array.from({ length: 3 }, (_, i) => i); // -> [0, 1, 2]

 

Array.isArray

์ „๋‹ฌ๋œ ์ธ์ˆ˜๊ฐ€ ๋ฐฐ์—ด์ด๋ฉด true, ๋ฐฐ์—ด์ด ์•„๋‹ˆ๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

 

// true
Array.isArray([]);
Array.isArray([1, 2]);
Array.isArray(new Array());

// false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(1);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray({ 0: 1, length: 1 })

 

Array.prototype.indexOf

์›๋ณธ ๋ฐฐ์—ด์—์„œ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋œ ์š”์†Œ๋ฅผ ๊ฒ€์ƒ‰ํ•˜์—ฌ ์ธ๋ฑ์Šค๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

 

const arr = [1, 2, 2, 3];

// ๋ฐฐ์—ด arr์—์„œ ์š”์†Œ 2๋ฅผ ๊ฒ€์ƒ‰ํ•˜์—ฌ ์ฒซ ๋ฒˆ์งธ๋กœ ๊ฒ€์ƒ‰๋œ ์š”์†Œ์˜ ์ธ๋ฑ์Šค๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
arr.indexOf(2);    // -> 1
// ๋ฐฐ์—ด arr์— ์š”์†Œ 4๊ฐ€ ์—†์œผ๋ฏ€๋กœ -1์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
arr.indexOf(4);    // -> -1
// ๋‘ ๋ฒˆ์งธ ์ธ์ˆ˜๋Š” ๊ฒ€์ƒ‰์„ ์‹œ์ž‘ํ•  ์ธ๋ฑ์Šค๋‹ค. ๋‘ ๋ฒˆ์งธ ์ธ์ˆ˜๋ฅผ ์ƒ๋žตํ•˜๋ฉด ์ฒ˜์Œ๋ถ€ํ„ฐ ๊ฒ€์ƒ‰ํ•œ๋‹ค.
arr.indexOf(2, 2); // -> 2

// ๋ฐฐ์—ด์— ํŠน์ • ์š”์†Œ๊ฐ€ ์กด์žฌํ•˜๋Š”์ง€ ํ™•์ธํ•  ๋•Œ ์œ ์šฉ
const foods = ['apple', 'banana', 'orange'];

// foods ๋ฐฐ์—ด์— 'orange' ์š”์†Œ๊ฐ€ ์กด์žฌํ•˜๋Š”์ง€ ํ™•์ธํ•œ๋‹ค.
if (foods.indexOf('orange') === -1) {
  // foods ๋ฐฐ์—ด์— 'orange' ์š”์†Œ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์œผ๋ฉด 'orange' ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค.
  foods.push('orange');
}

console.log(foods); // ["apple", "banana", "orange"]

 

Array.prototype.push

push๋Š” ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฉ”์„œ๋“œ๋กœ, ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๋ชจ๋“  ๊ฐ’์„ ์›๋ณธ ๋ฐฐ์—ด์˜ ๋งˆ์ง€๋ง‰ ์š”์†Œ๋กœ ์ถ”๊ฐ€ํ•˜๊ณ  ๋ณ€๊ฒฝ๋œ length ํ”„๋กœํผํ‹ฐ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

 

const arr = [1, 2];

// ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๋ชจ๋“  ๊ฐ’์„ ์›๋ณธ ๋ฐฐ์—ด arr์˜ ๋งˆ์ง€๋ง‰ ์š”์†Œ๋กœ ์ถ”๊ฐ€ํ•˜๊ณ  ๋ณ€๊ฒฝ๋œ length ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
let result = arr.push(3, 4);
console.log(result); // 4

// push ๋ฉ”์„œ๋“œ๋Š” ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•œ๋‹ค.
console.log(arr); // [1, 2, 3, 4]

 

Array.prototype.pop

pop ๋ฉ”์„œ๋“œ๋Š” ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฉ”์„œ๋“œ๋กœ, ์›๋ณธ ๋ฐฐ์—ด์—์„œ ๋งˆ์ง€๋ง‰ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ์ œ๊ฑฐํ•œ ์š”์†Œ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ๋งŒ์•ฝ, ์›๋ณธ ๋ฐฐ์—ด์ด ๋นˆ ๋ฐฐ์—ด์ด๋ฉด undefined๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

 

const arr = [1, 2];

// ์›๋ณธ ๋ฐฐ์—ด์—์„œ ๋งˆ์ง€๋ง‰ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ์ œ๊ฑฐํ•œ ์š”์†Œ๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
let result = arr.pop();
console.log(result); // 2

// pop ๋ฉ”์„œ๋“œ๋Š” ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•œ๋‹ค.
console.log(arr); // [1]

 

Array.prototype.unshift

unshift๋Š” ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฉ”์„œ๋“œ๋กœ, ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๋ชจ๋“  ๊ฐ’์„ ์›๋ณธ ๋ฐฐ์—ด์˜ ์„ ๋‘์— ์š”์†Œ๋กœ ์ถ”๊ฐ€ํ•˜๊ณ  ๋ณ€๊ฒฝ๋œ length ํ”„๋กœํผํ‹ฐ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

 

const arr = [1, 2];

// ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๋ชจ๋“  ๊ฐ’์„ ์›๋ณธ ๋ฐฐ์—ด์˜ ์„ ๋‘์— ์š”์†Œ๋กœ ์ถ”๊ฐ€ํ•˜๊ณ  ๋ณ€๊ฒฝ๋œ length ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
let result = arr.unshift(3, 4);
console.log(result); // 4

// unshift ๋ฉ”์„œ๋“œ๋Š” ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•œ๋‹ค.
console.log(arr); // [3, 4, 1, 2]

 

Array.prototype.shift

shift๋Š” ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฉ”์„œ๋“œ๋กœ, ์›๋ณธ ๋ฐฐ์—ด์—์„œ ์ฒซ ๋ฒˆ์งธ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ์ œ๊ฑฐํ•œ ์š”์†Œ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ๋งŒ์•ฝ, ์›๋ณธ ๋ฐฐ์—ด์ด ๋นˆ ๋ฐฐ์—ด์ด๋ฉด undefined๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

 

const arr = [1, 2];

// ์›๋ณธ ๋ฐฐ์—ด์—์„œ ์ฒซ ๋ฒˆ์งธ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ์ œ๊ฑฐํ•œ ์š”์†Œ๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
let result = arr.shift();
console.log(result); // 1

// shift ๋ฉ”์„œ๋“œ๋Š” ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•œ๋‹ค.
console.log(arr); // [2]

 

Array.prototype.concat

์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋œ ๊ฐ’๋“ค(๋ฐฐ์—ด ๋˜๋Š” ์›์‹œ๊ฐ’)์„ ์›๋ณธ ๋ฐฐ์—ด์˜ ๋งˆ์ง€๋ง‰ ์š”์†Œ๋กœ ์ถ”๊ฐ€ํ•œ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์ด๋•Œ, ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•œ ๊ฐ’์ด ๋ฐฐ์—ด์ธ ๊ฒฝ์šฐ ๋ฐฐ์—ด์„ ํ•ด์ฒดํ•˜์—ฌ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์˜ ์š”์†Œ๋กœ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

 

const arr1 = [1, 2];
const arr2 = [3, 4];

// ๋ฐฐ์—ด arr2๋ฅผ ์›๋ณธ ๋ฐฐ์—ด arr1์˜ ๋งˆ์ง€๋ง‰ ์š”์†Œ๋กœ ์ถ”๊ฐ€ํ•œ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
// ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•œ ๊ฐ’์ด ๋ฐฐ์—ด์ธ ๊ฒฝ์šฐ ๋ฐฐ์—ด์„ ํ•ด์ฒดํ•˜์—ฌ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์˜ ์š”์†Œ๋กœ ์ถ”๊ฐ€ํ•œ๋‹ค.
let result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4]

// ์ˆซ์ž๋ฅผ ์›๋ณธ ๋ฐฐ์—ด arr1์˜ ๋งˆ์ง€๋ง‰ ์š”์†Œ๋กœ ์ถ”๊ฐ€ํ•œ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
result = arr1.concat(3);
console.log(result); // [1, 2, 3]

// ๋ฐฐ์—ด arr2์™€ ์ˆซ์ž๋ฅผ ์›๋ณธ ๋ฐฐ์—ด arr1์˜ ๋งˆ์ง€๋ง‰ ์š”์†Œ๋กœ ์ถ”๊ฐ€ํ•œ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
result = arr1.concat(arr2, 5);
console.log(result); // [1, 2, 3, 4, 5]

// ์›๋ณธ ๋ฐฐ์—ด์€ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š๋Š”๋‹ค.
console.log(arr1); // [1, 2]

 

Array.prototype.splice

์›๋ณธ ๋ฐฐ์—ด์˜ ์ค‘๊ฐ„์— ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ์ค‘๊ฐ„์— ์žˆ๋Š” ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๋Š” ๊ฒฝ์šฐ splice ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. splice ๋ฉ”์„œ๋“œ๋Š” 3๊ฐœ์˜ ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ์žˆ์œผ๋ฉฐ ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.

 

arr.splice(start, deleteCount, items)
  • start(ํ•„์ˆ˜)
    • ์›๋ณธ ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๊ธฐ ์‹œ์ž‘ํ•  ์ธ๋ฑ์Šค
    • start๋งŒ ์ง€์ •ํ•˜๋ฉด ์›๋ณธ ๋ฐฐ์—ด์˜ start๋ถ€ํ„ฐ ๋ชจ๋“  ์š”์†Œ๋ฅผ ์ œ๊ฑฐ
    • start๊ฐ€ ์Œ์ˆ˜์ธ ๊ฒฝ์šฐ ๋ฐฐ์—ด์˜ ๋์—์„œ์˜ ์ธ๋ฑ์Šค๋ฅผ ๋‚˜ํƒ€๋ƒ„
  • deleteCount(์˜ต์…˜)
    • ์›๋ณธ ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๊ธฐ ์‹œ์ž‘ํ•  ์ธ๋ฑ์Šค์ธ start๋ถ€ํ„ฐ ์ œ๊ฑฐํ•  ์š”์†Œ์˜ ๊ฐœ์ˆ˜
    • deleteCount๊ฐ€ 0์ธ ๊ฒฝ์šฐ ์•„๋ฌด๋Ÿฐ ์š”์†Œ๋„ ์ œ๊ฑฐ๋˜์ง€ ์•Š์Œ
  • items(์˜ต์…˜)
    • ์ œ๊ฑฐํ•œ ์œ„์น˜์— ์‚ฝ์ž…ํ•  ์š”์†Œ๋“ค์˜ ๋ชฉ๋ก
    • ์ƒ๋žตํ•  ๊ฒฝ์šฐ ์›๋ณธ ๋ฐฐ์—ด์—์„œ ์š”์†Œ๋“ค์„ ์ œ๊ฑฐํ•˜๊ธฐ๋งŒ ํ•จ
// 1. ๋ชจ๋“  ์˜ต์…˜ ์‚ฌ์šฉ : ์ œ๊ฑฐ ํ›„ ์‚ฝ์ž…
const arr = [1, 2, 3, 4];

// ์›๋ณธ ๋ฐฐ์—ด์˜ ์ธ๋ฑ์Šค 1๋ถ€ํ„ฐ 0๊ฐœ์˜ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ๊ทธ ์ž๋ฆฌ์— ์ƒˆ๋กœ์šด ์š”์†Œ 100์„ ์‚ฝ์ž…ํ•œ๋‹ค.
const result = arr.splice(1, 0, 100);
// ์›๋ณธ ๋ฐฐ์—ด์ด ๋ณ€๊ฒฝ๋œ๋‹ค.
console.log(arr); // [1, 100, 2, 3, 4]
// ์ œ๊ฑฐํ•œ ์š”์†Œ๊ฐ€ ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜๋œ๋‹ค.
console.log(result); // []


// 2. ์ œ๊ฑฐํ•  ์š”์†Œ๊ฐ€ 0์ธ ๊ฒฝ์šฐ
const arr = [1, 2, 3, 4];

// ์›๋ณธ ๋ฐฐ์—ด์˜ ์ธ๋ฑ์Šค 1๋ถ€ํ„ฐ 0๊ฐœ์˜ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ๊ทธ ์ž๋ฆฌ์— ์ƒˆ๋กœ์šด ์š”์†Œ 100์„ ์‚ฝ์ž…ํ•œ๋‹ค.
const result = arr.splice(1, 0, 100);
// ์›๋ณธ ๋ฐฐ์—ด์ด ๋ณ€๊ฒฝ๋œ๋‹ค.
console.log(arr); // [1, 100, 2, 3, 4]
// ์ œ๊ฑฐํ•œ ์š”์†Œ๊ฐ€ ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜๋œ๋‹ค.
console.log(result); // []


// 3. ์š”์†Œ ์ œ๊ฑฐ
const arr = [1, 2, 3, 4];

// ์›๋ณธ ๋ฐฐ์—ด์˜ ์ธ๋ฑ์Šค 1๋ถ€ํ„ฐ 2๊ฐœ์˜ ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•œ๋‹ค.
const result = arr.splice(1, 2);
// ์›๋ณธ ๋ฐฐ์—ด์ด ๋ณ€๊ฒฝ๋œ๋‹ค.
console.log(arr); // [1, 4]
// ์ œ๊ฑฐํ•œ ์š”์†Œ๊ฐ€ ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜๋œ๋‹ค.
console.log(result); // [2, 3]


const arr = [1, 2, 3, 4];

// ์›๋ณธ ๋ฐฐ์—ด์˜ ์ธ๋ฑ์Šค 1๋ถ€ํ„ฐ ๋ชจ๋“  ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•œ๋‹ค.
const result = arr.splice(1);
// ์›๋ณธ ๋ฐฐ์—ด์ด ๋ณ€๊ฒฝ๋œ๋‹ค.
console.log(arr); // [1]
// ์ œ๊ฑฐํ•œ ์š”์†Œ๊ฐ€ ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜๋œ๋‹ค.
console.log(result); // [2, 3, 4]

 

Array.prototype.slice

์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋œ ๋ฒ”์œ„์˜ ์š”์†Œ๋“ค์„ ๋ณต์‚ฌํ•˜์—ฌ ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. slice ๋ฉ”์„œ๋“œ๋Š” 2๊ฐœ์˜ ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ์žˆ์œผ๋ฉฐ ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

 

arr.slice(start, end)
  • start
    • ๋ณต์‚ฌ๋ฅผ ์‹œ์ž‘ํ•  ์ธ๋ฑ์Šค
    • ์Œ์ˆ˜์ธ ๊ฒฝ์šฐ ๋ฐฐ์—ด์˜ ๋์—์„œ์˜ ์ธ๋ฑ์Šค๋ฅผ ๋‚˜ํƒ€๋ƒ„
  • end
    • ๋ณต์‚ฌ๋ฅผ ์ข…๋ฃŒํ•  ์ธ๋ฑ์Šค(๋ณต์‚ฌ ํฌํ•จX)
    • end๋Š” ์ƒ๋žต ๊ฐ€๋Šฅํ•˜๋ฉฐ ์ƒ๋žต์‹œ ๊ธฐ๋ณธ๊ฐ’์€ length ํ”„๋กœํผํ‹ฐ ๊ฐ’์ž„
const arr = [1, 2, 3];

// arr[0]๋ถ€ํ„ฐ arr[1] ์ด์ „(arr[1] ๋ฏธํฌํ•จ)๊นŒ์ง€ ๋ณต์‚ฌํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
arr.slice(0, 1); // -> [1]

// arr[1]๋ถ€ํ„ฐ arr[2] ์ด์ „(arr[2] ๋ฏธํฌํ•จ)๊นŒ์ง€ ๋ณต์‚ฌํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
arr.slice(1, 2); // -> [2]

// ์›๋ณธ์€ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š๋Š”๋‹ค.
console.log(arr); // [1, 2, 3]

// arr[1]๋ถ€ํ„ฐ ์ดํ›„์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ๋ณต์‚ฌํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
arr.slice(1); // -> [2, 3]

// ๋ฐฐ์—ด์˜ ๋์—์„œ๋ถ€ํ„ฐ ์š”์†Œ๋ฅผ ํ•œ ๊ฐœ ๋ณต์‚ฌํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
arr.slice(-1); // -> [3]

// ๋ฐฐ์—ด์˜ ๋์—์„œ๋ถ€ํ„ฐ ์š”์†Œ๋ฅผ ๋‘ ๊ฐœ ๋ณต์‚ฌํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
arr.slice(-2); // -> [2, 3]

// ์ธ์ˆ˜๋ฅผ ๋ชจ๋‘ ์ƒ๋žตํ•˜๋ฉด ์›๋ณธ ๋ฐฐ์—ด์˜ ๋ณต์‚ฌ๋ณธ์„ ์ƒ์„ฑํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•œ๋‹ค. (์–‰์€ ๋ณต์‚ฌ)
const copy = arr.slice();
console.log(copy); // [1, 2, 3]
console.log(copy === arr); // false

 

Array.prototype.join

์›๋ณธ ๋ฐฐ์—ด์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•œ ํ›„, ๊ตฌ๋ถ„์ž(์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๋ฌธ์ž์—ด)๋กœ ์—ฐ๊ฒฐํ•œ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

 

const arr = [1, 2, 3, 4];

// ๊ธฐ๋ณธ ๊ตฌ๋ถ„์ž๋Š” ','์ด๋‹ค.
// ์›๋ณธ ๋ฐฐ์—ด arr์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•œ ํ›„, ๊ธฐ๋ณธ ๊ตฌ๋ถ„์ž ','๋กœ ์—ฐ๊ฒฐํ•œ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
arr.join(); // -> '1,2,3,4';

// ์›๋ณธ ๋ฐฐ์—ด arr์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•œ ํ›„, ๋นˆ๋ฌธ์ž์—ด๋กœ ์—ฐ๊ฒฐํ•œ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
arr.join(''); // -> '1234'

// ์›๋ณธ ๋ฐฐ์—ด arr์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•œ ํ›„, ๊ตฌ๋ถ„์ž ':'๋กœ ์—ฐ๊ฒฐํ•œ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.ใ„ด
arr.join(':'); // -> '1:2:3:4'

 

Array.prototype.reverse

์›๋ณธ ๋ฐฐ์—ด์˜ ์ˆœ์„œ๋ฅผ ๋ฐ˜๋Œ€๋กœ ๋’ค์ง‘์–ด์„œ ๋ณ€๊ฒฝ๋œ ์›๋ณธ ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

 

const arr = [1, 2, 3];
const result = arr.reverse();

// reverse ๋ฉ”์„œ๋“œ๋Š” ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•œ๋‹ค.
console.log(arr); // [3, 2, 1]
// ๋ฐ˜ํ™˜๊ฐ’์€ ๋ณ€๊ฒฝ๋œ ๋ฐฐ์—ด์ด๋‹ค.
console.log(result); // [3, 2, 1]

 

Array.prototype.fill

ES6์—์„œ ๋„์ž…๋œ ๋ฉ”์„œ๋“œ๋กœ ์ธ์ˆ˜๋ฅผ ์ „๋‹ฌ๋ฐ›์€ ๊ฐ’์„ ๋ฐฐ์—ด์˜ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ์š”์†Œ๋กœ ์ฑ„์›๋‹ˆ๋‹ค. ์ด๋•Œ ์›๋ณธ ๋ฐฐ์—ด์ด ๋ณ€๊ฒฝ๋ฉ๋‹ˆ๋‹ค.

 

// 1. ์ธ์ˆ˜๊ฐ€ 2๊ฐœ
const arr = [1, 2, 3];
// ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๊ฐ’ 0์„ ๋ฐฐ์—ด์˜ ์ธ๋ฑ์Šค 1๋ถ€ํ„ฐ ๋๊นŒ์ง€ ์š”์†Œ๋กœ ์ฑ„์šด๋‹ค.
arr.fill(0, 1);
// fill ๋ฉ”์„œ๋“œ๋Š” ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•œ๋‹ค.
console.log(arr); // [1, 0, 0]


// 2. ์ธ์ˆ˜๊ฐ€ 3๊ฐœ
const arr = [1, 2, 3, 4, 5];
// ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๊ฐ’ 0์„ ๋ฐฐ์—ด์˜ ์ธ๋ฑ์Šค 1๋ถ€ํ„ฐ 3 ์ด์ „(์ธ๋ฑ์Šค 3 ๋ฏธํฌํ•จ)๊นŒ์ง€ ์š”์†Œ๋กœ ์ฑ„์šด๋‹ค.
arr.fill(0, 1, 3);
// fill ๋ฉ”์„œ๋“œ๋Š” ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•œ๋‹ค.
console.log(arr); // [1, 0, 0, 4, 5]


// 3.๋ฐฐ์—ด์„ ์ƒ์„ฑํ•˜๋ฉฐ ํŠน์ • ๊ฐ’์œผ๋กœ ์š”์†Œ ์ฑ„์šฐ๊ธฐ
const arr = new Array(3);
console.log(arr); // [empty × 3]
// ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๊ฐ’ 1์„ ๋ฐฐ์—ด์˜ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ์š”์†Œ๋กœ ์ฑ„์šด๋‹ค.
const result = arr.fill(1);
// fill ๋ฉ”์„œ๋“œ๋Š” ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•œ๋‹ค.
console.log(arr); // [1, 1, 1]
// fill ๋ฉ”์„œ๋“œ๋Š” ๋ณ€๊ฒฝ๋œ ์›๋ณธ ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
console.log(result); // [1, 1, 1]


// 4. ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ์ •์ˆ˜๋งŒํผ ์š”์†Œ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  0๋ถ€ํ„ฐ 1์”ฉ ์ฆ๊ฐ€ํ•˜๋ฉด์„œ ์š”์†Œ๋ฅผ ์ฑ„์šฐ๊ธฐ
const sequences = (length = 0) => Array.from({ length }, (_, i) => i);
// const sequences = (length = 0) => Array.from(new Array(length), (_, i) => i);
console.log(sequences(3)); // [0, 1, 2]

 

Array.prototype.includes

ES7์—์„œ ๋„์ž…๋œ ๋ฉ”์„œ๋“œ๋กœ, ๋ฐฐ์—ด ๋‚ด์— ํŠน์ • ์š”์†Œ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ๋Š”์ง€ ํ™•์ธํ•˜์—ฌ true/false๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

  • ์ฒซ ๋ฒˆ์งธ ์ธ์ˆ˜ : ๊ฒ€์ƒ‰ํ•  ๋Œ€์ƒ์„ ์ง€์ •
  • ๋‘ ๋ฒˆ์งธ ์ธ์ˆ˜ : ๊ฒ€์ƒ‰์„ ์‹œ์ž‘ํ•  ์ธ๋ฑ์Šค๋ฅผ ์ง€์ • (์ƒ๋žต์‹œ ๊ธฐ๋ณธ๊ฐ’ 0)
// 1. ์ฒซ ๋ฒˆ์งธ ์ธ์ˆ˜๋งŒ ์ „๋‹ฌ
const arr = [1, 2, 3];

// ๋ฐฐ์—ด์— ์š”์†Œ 2๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ๋Š”์ง€ ํ™•์ธํ•œ๋‹ค.
arr.includes(2); // -> true

// ๋ฐฐ์—ด์— ์š”์†Œ 100์ด ํฌํ•จ๋˜์–ด ์žˆ๋Š”์ง€ ํ™•์ธํ•œ๋‹ค.
arr.includes(100); // -> false


// 2. ๋‘ ๋ฒˆ์งธ ์ธ์ˆ˜๋„ ์ „๋‹ฌ
const arr = [1, 2, 3];

// ๋ฐฐ์—ด์— ์š”์†Œ 1์ด ํฌํ•จ๋˜์–ด ์žˆ๋Š”์ง€ ์ธ๋ฑ์Šค 1๋ถ€ํ„ฐ ํ™•์ธํ•œ๋‹ค.
arr.includes(1, 1); // -> false

// ๋ฐฐ์—ด์— ์š”์†Œ 3์ด ํฌํ•จ๋˜์–ด ์žˆ๋Š”์ง€ ์ธ๋ฑ์Šค 2(arr.length - 1)๋ถ€ํ„ฐ ํ™•์ธํ•œ๋‹ค.
arr.includes(3, -1); // -> true

 

Array.prototype.flat

ES10์—์„œ ๋„์ž…๋œ ๋ฉ”์„œ๋“œ๋กœ, ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•œ ๊นŠ์ด๋งŒํผ ์žฌ๊ท€์ ์œผ๋กœ ๋ฐฐ์—ด์„ ํ‰ํƒ„ํ™”ํ•ฉ๋‹ˆ๋‹ค.

  • ์ค‘์ฒฉ ๋ฐฐ์—ด์„ ํ‰ํƒ„ํ™”ํ•  ๊นŠ์ด๋ฅผ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ
  • ์ธ์ˆ˜๋ฅผ ์ƒ๋žตํ•  ๊ฒฝ์šฐ ๊ธฐ๋ณธ๊ฐ’์€ 1
  • ์ธ์ˆ˜๋กœ Infinity๋ฅผ ์ „๋‹ฌํ•˜๋ฉด ์ค‘์ฒฉ ๋ฐฐ์—ด ๋ชจ๋‘ ํ‰ํƒ„ํ™”
[1, [2, 3, 4, 5]].flat(); // -> [1, 2, 3, 4, 5]

// ์ค‘์ฒฉ ๋ฐฐ์—ด์„ ํ‰ํƒ„ํ™”ํ•˜๊ธฐ ์œ„ํ•œ ๊นŠ์ด ๊ฐ’์˜ ๊ธฐ๋ณธ๊ฐ’์€ 1์ด๋‹ค.
[1, [2, [3, [4]]]].flat();  // -> [1, 2, [3, [4]]]
[1, [2, [3, [4]]]].flat(1); // -> [1, 2, [3, [4]]]

// ์ค‘์ฒฉ ๋ฐฐ์—ด์„ ํ‰ํƒ„ํ™”ํ•˜๊ธฐ ์œ„ํ•œ ๊นŠ์ด ๊ฐ’์„ 2๋กœ ์ง€์ •ํ•˜์—ฌ 2๋‹จ๊ณ„ ๊นŠ์ด๊นŒ์ง€ ํ‰ํƒ„ํ™”ํ•œ๋‹ค.
[1, [2, [3, [4]]]].flat(2); // -> [1, 2, 3, [4]]
// 2๋ฒˆ ํ‰ํƒ„ํ™”ํ•œ ๊ฒƒ๊ณผ ๋™์ผํ•˜๋‹ค.
[1, [2, [3, [4]]]].flat().flat(); // -> [1, 2, 3, [4]]

// ์ค‘์ฒฉ ๋ฐฐ์—ด์„ ํ‰ํƒ„ํ™”ํ•˜๊ธฐ ์œ„ํ•œ ๊นŠ์ด ๊ฐ’์„ Infinity๋กœ ์ง€์ •ํ•˜์—ฌ ์ค‘์ฒฉ ๋ฐฐ์—ด ๋ชจ๋‘๋ฅผ ํ‰ํƒ„ํ™”ํ•œ๋‹ค.
[1, [2, [3, [4]]]].flat(Infinity); // -> [1, 2, 3, 4]

๋ฐฐ์—ด ๊ณ ์ฐจ ํ•จ์ˆ˜

๊ณ ์ฐจํ•จ์ˆ˜๋Š” ํ•จ์ˆ˜๋ฅผ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›๊ฑฐ๋‚˜ ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๋งํ•ฉ๋‹ˆ๋‹ค.

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

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋‹ค์ˆ˜์˜ ๊ณ ์ฐจ ํ•จ์ˆ˜๋ฅผ ์ง€์›ํ•˜๋Š”๋ฐ, ํŠนํžˆ ํ™œ์šฉ๋„๊ฐ€ ๋†’์€ ๋ฐฐ์—ด ๊ณ ์ฐจ ํ•จ์ˆ˜๋ฅผ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

 

Array.prototype.sort

sort ๋ฉ”์„œ๋“œ๋Š” ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜๋ฉฐ ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ์ •๋ ฌํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

 

// 1. ๊ธฐ๋ณธ ์ •๋ ฌ
const fruits = ['Banana', 'Orange', 'Apple']

// ์˜ค๋ฆ„์ฐจ์ˆœ(ascending) ์ •๋ ฌ
fruits.sort();

// sort ๋ฉ”์„œ๋“œ๋Š” ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•œ๋‹ค.
console.log(fruits); // ['Apple', 'Banana', 'Orange']

// ๋‚ด๋ฆผ์ฐจ์ˆœ(descending) ์ •๋ ฌ
fruits.reverse();

// reverse ๋ฉ”์„œ๋“œ๋„ ์›๋ณธ ๋ฐฐ์—ด์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•œ๋‹ค.
console.log(fruits); // ['Orange', 'Banana', 'Apple']


// 2. ์ˆซ์ž ์ •๋ ฌ
const points = [40, 100, 1, 5, 2, 25, 10];

points.sort();

// ์ˆซ์ž ์š”์†Œ๋“ค๋กœ ์ด๋ฃจ์–ด์ง„ ๋ฐฐ์—ด์€ ์˜๋„ํ•œ ๋Œ€๋กœ ์ •๋ ฌ๋˜์ง€ ์•Š๋Š”๋‹ค.
console.log(points); // [1, 10, 100, 2, 25, 40, 5]

// ์ˆซ์ž ๋ฐฐ์—ด์˜ ์˜ค๋ฆ„์ฐจ์ˆœ ์ •๋ ฌ. ๋น„๊ต ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์ด 0๋ณด๋‹ค ์ž‘์œผ๋ฉด a๋ฅผ ์šฐ์„ ํ•˜์—ฌ ์ •๋ ฌํ•œ๋‹ค.
points.sort((a, b) => a - b);
console.log(points); // [1, 2, 5, 10, 25, 40, 100]

// ์ˆซ์ž ๋ฐฐ์—ด์—์„œ ์ตœ์†Œ/์ตœ๋Œ€๊ฐ’ ์ทจ๋“
console.log(points[0], points[points.length]); // 1

// ์ˆซ์ž ๋ฐฐ์—ด์˜ ๋‚ด๋ฆผ์ฐจ์ˆœ ์ •๋ ฌ. ๋น„๊ต ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์ด 0๋ณด๋‹ค ์ž‘์œผ๋ฉด b๋ฅผ ์šฐ์„ ํ•˜์—ฌ ์ •๋ ฌํ•œ๋‹ค.
points.sort((a, b) => b - a);
console.log(points); // [100, 40, 25, 10, 5, 2, 1]

// ์ˆซ์ž ๋ฐฐ์—ด์—์„œ ์ตœ๋Œ€๊ฐ’ ์ทจ๋“
console.log(points[0]); // 100


// 3. ๊ฐ์ฒด ์ •๋ ฌ
const todos = [
  { id: 4, content: 'JavaScript' },
  { id: 1, content: 'HTML' },
  { id: 2, content: 'CSS' }
];

// ๋น„๊ต ํ•จ์ˆ˜. ๋งค๊ฐœ๋ณ€์ˆ˜ key๋Š” ํ”„๋กœํผํ‹ฐ ํ‚ค๋‹ค.
function compare(key) {
  // ํ”„๋กœํผํ‹ฐ ๊ฐ’์ด ๋ฌธ์ž์—ด์ธ ๊ฒฝ์šฐ - ์‚ฐ์ˆ  ์—ฐ์‚ฐ์œผ๋กœ ๋น„๊ตํ•˜๋ฉด NaN์ด ๋‚˜์˜ค๋ฏ€๋กœ ๋น„๊ต ์—ฐ์‚ฐ์„ ์‚ฌ์šฉํ•œ๋‹ค.
  // ๋น„๊ต ํ•จ์ˆ˜๋Š” ์–‘์ˆ˜/์Œ์ˆ˜/0์„ ๋ฐ˜ํ™˜ํ•˜๋ฉด ๋˜๋ฏ€๋กœ - ์‚ฐ์ˆ  ์—ฐ์‚ฐ ๋Œ€์‹  ๋น„๊ต ์—ฐ์‚ฐ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
  return (a, b) => (a[key] > b[key] ? 1 : (a[key] < b[key] ? -1 : 0));
}

// id๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์˜ค๋ฆ„์ฐจ์ˆœ ์ •๋ ฌ
todos.sort(compare('id'));
console.log(todos);
/*
[
  { id: 1, content: 'HTML' },
  { id: 2, content: 'CSS' },
  { id: 4, content: 'JavaScript' }
]
*/

// content๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์˜ค๋ฆ„์ฐจ์ˆœ ์ •๋ ฌ
todos.sort(compare('content'));
console.log(todos);
/*
[
  { id: 2, content: 'CSS' },
  { id: 1, content: 'HTML' },
  { id: 4, content: 'JavaScript' }
]
*/
  • ๊ธฐ๋ณธ์ ์œผ๋กœ ์˜ค๋ฆ„์ฐจ์ˆœ ์ •๋ ฌ
  • ๊ธฐ๋ณธ์ ์œผ๋กœ ์œ ๋‹ˆ์ฝ”๋“œ ์ฝ”๋“œ ํฌ์ธํŠธ์˜ ์ˆœ์„œ๋ฅผ ๋”ฐ๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ์ˆซ์ž๋ฅผ ์ •๋ ฌํ•  ๋•Œ๋Š” ์ •๋ ฌ ์ˆœ์„œ๋ฅผ ์ •์˜ํ•˜๋Š” ๋น„๊ต ํ•จ์ˆ˜๋ฅผ ์ธ์ž๋กœ ์ „๋‹ฌํ•ด์•ผํ•จ

* sort ๋ฉ”์„œ๋“œ ์ •๋ ฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜์€ quicksort ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ์‚ฌ์šฉํ–ˆ์—ˆ์ง€๋งŒ ํ˜„์žฌ๋Š” timsort๋ฅผ ์‚ฌ์šฉ

 

Array.prototype.forEach

forEach ๋ฉ”์„œ๋“œ๋Š” for๋ฌธ์„ ๋Œ€์ฒดํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐ˜๋ณต๋ฌธ์„ ์ถ”์ƒํ™”ํ•œ ๊ณ ์ฐจ ํ•จ์ˆ˜๋กœ์„œ ๋‚ด๋ถ€์—์„œ ๋ฐ˜๋ณต๋ฌธ์„ ํ†ตํ•ด ์ž์‹ ์„ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์„ ์ˆœํšŒํ•˜๋ฉด์„œ ์ˆ˜ํ–‰ํ•ด์•ผ ํ•  ์ฒ˜๋ฆฌ๋ฅผ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์•„ ๋ฐ˜๋ณต ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค.

 

// forEach ๋ฉ”์„œ๋“œ๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด์„œ 3๊ฐœ(์š”์†Œ๊ฐ’, ์ธ๋ฑ์Šค, this)์˜ ์ธ์ˆ˜๋ฅผ ์ „๋‹ฌํ•œ๋‹ค.
[1, 2, 3].forEach((item, index, arr) => {
  console.log(`์š”์†Œ๊ฐ’: ${item}, ์ธ๋ฑ์Šค: ${index}, this: ${JSON.stringify(arr)}`);
});
/*
์š”์†Œ๊ฐ’: 1, ์ธ๋ฑ์Šค: 0, this: [1,2,3]
์š”์†Œ๊ฐ’: 2, ์ธ๋ฑ์Šค: 1, this: [1,2,3]
์š”์†Œ๊ฐ’: 3, ์ธ๋ฑ์Šค: 2, this: [1,2,3]
*/

 

์ด์ฒ˜๋Ÿผ forEach ๋ฉ”์„œ๋“œ์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” forEach๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์˜ ์š”์†Œ๊ฐ’๊ณผ ์ธ๋ฑ์Šค, forEach ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด(this)์„ ์ˆœ์ฐจ์ ์œผ๋กœ ์ธ์ˆ˜๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

forEach ๋ฉ”์„œ๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. 

 

// 1. ์›๋ณธ ๋ฐฐ์—ด์„ ๋ณ€๊ฒฝ X
const numbers = [1, 2, 3];

// forEach ๋ฉ”์„œ๋“œ๋Š” ์›๋ณธ ๋ฐฐ์—ด์„ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š์ง€๋งŒ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ์›๋ณธ ๋ฐฐ์—ด์„ ๋ณ€๊ฒฝํ•  ์ˆ˜๋Š” ์žˆ๋‹ค.
// ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ์„ธ ๋ฒˆ์งธ ๋งค๊ฐœ๋ณ€์ˆ˜ arr์€ ์›๋ณธ ๋ฐฐ์—ด numbers๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.
// ๋”ฐ๋ผ์„œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ์„ธ ๋ฒˆ์งธ ๋งค๊ฐœ๋ณ€์ˆ˜ arr์„ ์ง์ ‘ ๋ณ€๊ฒฝํ•˜๋ฉด ์›๋ณธ ๋ฐฐ์—ด numbers๊ฐ€ ๋ณ€๊ฒฝ๋œ๋‹ค.
numbers.forEach((item, index, arr) => { arr[index] = item ** 2; });
console.log(numbers); // [1, 4, 9]

// 2. ๋ฐ˜ํ™˜๊ฐ’์€ ํ•ญ์ƒ undefined
const result = [1, 2, 3].forEach(console.log);
console.log(result); // undefined

//  3. ๋‚ด๋ถ€์—์„œ break, continue๋ฌธ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Œ
[1, 2, 3].forEach(item => {
  console.log(item);
  if (item > 1) break; // SyntaxError: Illegal break statement
});

[1, 2, 3].forEach(item => {
  console.log(item);
  if (item > 1) continue;
  // SyntaxError: Illegal continue statement: no surrounding iteration statement
});

// 4. ํฌ์†Œ ๋ฐฐ์—ด์˜ ๊ฒฝ์šฐ ์กด์žฌํ•˜์ง€ ์•Š๋Š” ์š”์†Œ๋Š” ์ˆœํšŒ ๋Œ€์ƒ์—์„œ ์ œ์™ธ
const arr = [1, , 3];

// for ๋ฌธ์œผ๋กœ ํฌ์†Œ ๋ฐฐ์—ด์„ ์ˆœํšŒ
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]); // 1, undefined, 3
}

// forEach ๋ฉ”์„œ๋“œ๋Š” ํฌ์†Œ ๋ฐฐ์—ด์˜ ์กด์žฌํ•˜์ง€ ์•Š๋Š” ์š”์†Œ๋ฅผ ์ˆœํšŒ ๋Œ€์ƒ์—์„œ ์ œ์™ธํ•œ๋‹ค.
arr.forEach(v => console.log(v)); // 1, 3
  • ์›๋ณธ ๋ฐฐ์—ด์„ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š์ง€๋งŒ, ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ์›๋ณธ ๋ฐฐ์—ด์„ ๋ณ€๊ฒฝํ•  ์ˆ˜๋Š” ์žˆ์Œ
  • forEach ๋ฉ”์„œ๋“œ์˜ ๋ฐ˜ํ™˜๊ฐ’์€ ์–ธ์ œ๋‚˜ undefined
  • ๋ฐฐ์—ด์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ๋น ์ง์—†์ด ๋ชจ๋‘ ์ˆœํšŒํ•˜๊ธฐ ๋•Œ๋ฌธ์— for๋ฌธ๊ณผ ๋‹ฌ๋ฆฌ break, continue์™€ ๊ฐ™์€ ์ค‘๋‹จ๋ฌธ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Œ
  • ํฌ์†Œ ๋ฐฐ์—ด์˜ ๊ฒฝ์šฐ ์กด์žฌํ•˜์ง€ ์•Š๋Š” ์š”์†Œ๋Š” ์ˆœํšŒ ๋Œ€์ƒ์—์„œ ์ œ์™ธ๋จ

 

Array.prototype.map

map ๋ฉ”์„œ๋“œ๋Š” ์ž์‹ ์„ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ์ˆœํšŒํ•˜๋ฉด์„œ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ๋ฐ˜๋ณต ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’๋“ค๋กœ ๊ตฌ์„ฑ๋œ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•˜๋ฉฐ ์ด๋•Œ ์›๋ณธ ๋ฐฐ์—ด์€ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

 

// map ๋ฉ”์„œ๋“œ๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด์„œ 3๊ฐœ(์š”์†Œ๊ฐ’, ์ธ๋ฑ์Šค, this)์˜ ์ธ์ˆ˜๋ฅผ ์ „๋‹ฌํ•œ๋‹ค.
[1, 2, 3].map((item, index, arr) => {
  console.log(`์š”์†Œ๊ฐ’: ${item}, ์ธ๋ฑ์Šค: ${index}, this: ${JSON.stringify(arr)}`);
  return item;
});
/*
์š”์†Œ๊ฐ’: 1, ์ธ๋ฑ์Šค: 0, this: [1,2,3]
์š”์†Œ๊ฐ’: 2, ์ธ๋ฑ์Šค: 1, this: [1,2,3]
์š”์†Œ๊ฐ’: 3, ์ธ๋ฑ์Šค: 2, this: [1,2,3]
*/

 

forEach ๋ฉ”์„œ๋“œ์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ map ๋ฉ”์„œ๋“œ์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” map ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์˜ ์š”์†Œ๊ฐ’๊ณผ ์ธ๋ฑ์Šค, map ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด ์ž์ฒด์ธ this๋ฅผ ์ˆœ์ฐจ์ ์œผ๋กœ ์ „๋‹ฌ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋‹จ์ˆœํžˆ ๋ฐ˜๋ณต๋ฌธ์„ ๋Œ€์ฒดํ•˜๊ธฐ ์œ„ํ•œ ๊ณ ์ฐจ ํ•จ์ˆ˜์ธ forEach์™€ ๋‹ฌ๋ฆฌ map์€ ์š”์†Œ๊ฐ’์„ ๋‹ค๋ฅธ ๊ฐ’์œผ๋กœ ๋งคํ•‘ํ•œ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•˜๊ธฐ ์œ„ํ•œ ๊ณ ์ฐจํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค.

 

const numbers = [1, 4, 9];

// map ๋ฉ”์„œ๋“œ๋Š” numbers ๋ฐฐ์—ด์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ์ˆœํšŒํ•˜๋ฉด์„œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ๋ฐ˜๋ณต ํ˜ธ์ถœํ•œ๋‹ค.
// ๊ทธ๋ฆฌ๊ณ  ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’๋“ค๋กœ ๊ตฌ์„ฑ๋œ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
const roots = numbers.map(item => Math.sqrt(item));

// ์œ„ ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.
// const roots = numbers.map(Math.sqrt);

// map ๋ฉ”์„œ๋“œ๋Š” ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค
console.log(roots);   // [ 1, 2, 3 ]
// map ๋ฉ”์„œ๋“œ๋Š” ์›๋ณธ ๋ฐฐ์—ด์„ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š๋Š”๋‹ค
console.log(numbers); // [ 1, 4, 9 ]

  • map์ด ์ƒ์„ฑํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•˜๋Š” ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์˜ length ํ”„๋กœํผํ‹ฐ ๊ฐ’์€ map ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์˜ length์™€ ๋ฐ˜๋“œ์‹œ ์ผ์น˜
  • map ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด๊ณผ map ๋ฉ”์„œ๋“œ๊ฐ€ ์ƒ์„ฑํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•œ ๋ฐฐ์—ด์€ 1:1 ๋งคํ•‘

 

Array.prototype.filter

filter ๋ฉ”์„œ๋“œ๋Š” ์ž์‹ ์„ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ์ˆœํšŒํ•˜๋ฉด์„œ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ๋ฐ˜๋ณต ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์ด true์ธ ์š”์†Œ๋กœ๋งŒ ๊ตฌ์„ฑ๋œ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•˜๋ฉฐ ์ด๋•Œ ์›๋ณธ ๋ฐฐ์—ด์€ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

 

// filter ๋ฉ”์„œ๋“œ๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด์„œ 3๊ฐœ(์š”์†Œ๊ฐ’, ์ธ๋ฑ์Šค, this)์˜ ์ธ์ˆ˜๋ฅผ ์ „๋‹ฌํ•œ๋‹ค.
[1, 2, 3].filter((item, index, arr) => {
  console.log(`์š”์†Œ๊ฐ’: ${item}, ์ธ๋ฑ์Šค: ${index}, this: ${JSON.stringify(arr)}`);
  return item % 2;
});
/*
์š”์†Œ๊ฐ’: 1, ์ธ๋ฑ์Šค: 0, this: [1,2,3]
์š”์†Œ๊ฐ’: 2, ์ธ๋ฑ์Šค: 1, this: [1,2,3]
์š”์†Œ๊ฐ’: 3, ์ธ๋ฑ์Šค: 2, this: [1,2,3]
*/

 

forEach, map ๋ฉ”์„œ๋“œ์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ filter ๋ฉ”์„œ๋“œ์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” filter ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์˜ ์š”์†Œ๊ฐ’๊ณผ ์ธ๋ฑ์Šค, filter ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด ์ž์ฒด์ธ this๋ฅผ ์ˆœ์ฐจ์ ์œผ๋กœ ์ „๋‹ฌ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ forEach, map๊ณผ ๋‹ฌ๋ฆฌ filter ๋ฉ”์„œ๋“œ๋Š” ์ž์‹ ์„ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์—์„œ ํ•„ํ„ฐ๋ง์„ ๋งŒ์กฑํ•˜๋Š” ํŠน์ • ์š”์†Œ๋งŒ ์ถ”์ถœํ•˜์—ฌ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋งŒ๋“ค๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. 

 

const numbers = [1, 2, 3, 4, 5];

// filter ๋ฉ”์„œ๋“œ๋Š” numbers ๋ฐฐ์—ด์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ์ˆœํšŒํ•˜๋ฉด์„œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ๋ฐ˜๋ณต ํ˜ธ์ถœํ•œ๋‹ค.
// ๊ทธ๋ฆฌ๊ณ  ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์ด true์ธ ์š”์†Œ๋กœ๋งŒ ๊ตฌ์„ฑ๋œ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
// ๋‹ค์Œ์˜ ๊ฒฝ์šฐ numbers ๋ฐฐ์—ด์—์„œ ํ™€์ˆ˜์ธ ์š”์†Œ๋งŒ์„ ํ•„ํ„ฐ๋งํ•œ๋‹ค(1์€ true๋กœ ํ‰๊ฐ€๋œ๋‹ค).
const odds = numbers.filter(item => item % 2);
console.log(odds); // [1, 3, 5]

  • filter ๋ฉ”์„œ๋“œ์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” ์š”์†Œ๊ฐ’์„ 2๋กœ ๋‚˜๋ˆˆ ๋‚˜๋จธ์ง€๋ฅผ ๋ฐ˜ํ™˜
  • ์ด๋•Œ ๋ฐ˜ํ™˜๊ฐ’์ด true, ์ฆ‰ ํ™€์ˆ˜์ธ ์š”์†Œ๋งŒ ์ถ”์ถœํ•˜์—ฌ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜
  • filter ๋ฐ˜ํ™˜ํ•œ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์˜ length ํ”„๋กœํผํ‹ฐ ๊ฐ’์€ filter๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์˜ length ํ”„๋กœํผํ‹ฐ ๊ฐ’๊ณผ ๊ฐ™๊ฑฐ๋‚˜ ์ž‘์Œ

 

Array.prototype.reduce

reduce ๋ฉ”์„œ๋“œ๋Š” ์ž์‹ ์„ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ์ˆœํšŒํ•˜๋ฉฐ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ๋ฐ˜๋ณต ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์„ ๋‹ค์Œ ์ˆœํšŒ ์‹œ์— ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ์ฒซ ๋ฒˆ์งธ ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•˜๋ฉด์„œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ํ•˜๋‚˜์˜ ๊ฒฐ๊ณผ๊ฐ’์„ ๋งŒ๋“ค์–ด ๋ฐ˜ํ™˜ํ•˜๋ฉฐ ์ด๋•Œ ์›๋ณธ ๋ฐฐ์—ด์€ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

 

reduce ๋ฉ”์„œ๋“œ์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” 4๊ฐœ์˜ ์ธ์ˆ˜, ์ดˆ๊ธฐ๊ฐ’ ๋˜๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ์ด์ „ ๋ฐ˜ํ™˜๊ฐ’, reduce ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์˜ ์š”์†Œ๊ฐ’๊ณผ ์ธ๋ฑ์Šค, reduce๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด ์ž์ฒด(this)๊ฐ€ ์ „๋‹ฌ๋ฉ๋‹ˆ๋‹ค.

 

// [1, 2, 3, 4]์˜ ๋ชจ๋“  ์š”์†Œ์˜ ๋ˆ„์ ์„ ๊ตฌํ•œ๋‹ค.
const sum = [1, 2, 3, 4].reduce((accumulator, currentValue, index, array) => accumulator + currentValue, 0);

console.log(sum); // 10

 

์œ„์˜ ์˜ˆ์ œ๋ฅผ ์‚ดํŽด๋ณด๋ฉด reduce ๋ฉ”์„œ๋“œ๋Š” 2๊ฐœ์˜ ์ธ์ˆ˜, ์ฆ‰ ์ฝœ๋ฐฑ ํ•จ์ˆ˜์™€ ์ดˆ๊ธฐ๊ฐ’ 0์„ ์ „๋‹ฌ๋ฐ›์•„ ์ž์‹ ์„ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ๋ˆ„์ ํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

 

๊ตฌ๋ถ„ ์ฝœ๋ฐฑ ํ•จ์ˆ˜์— ์ „๋‹ฌ๋˜๋Š” ์ธ์ˆ˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’
accumulator currentValue index array
์ฒซ ๋ฒˆ์งธ ์ˆœํšŒ 0 (์ดˆ๊ธฐ๊ฐ’) 1 0 [1,2,3,4] 1 (accumulator + currentValue)
๋‘ ๋ฒˆ์งธ ์ˆœํšŒ 1 2 1 [1,2,3,4] 3 (accumulator + currentValue)
์„ธ ๋ฒˆ์งธ ์ˆœํšŒ 3 3 2 [1,2,3,4] 6 (accumulator + currentValue)
๋„ค ๋ฒˆ์งธ ์ˆœํšŒ 6 4 3 [1,2,3,4] 10 (accumulator + currentValue)

 

 

์ด์ฒ˜๋Ÿผ reduce ๋ฉ”์„œ๋“œ๋Š” ์ž์‹ ์„ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ์ˆœํšŒํ•˜๋ฉฐ ํ•˜๋‚˜์˜ ๊ฒฐ๊ณผ๊ฐ’์„ ๊ตฌํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ์— ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

ํ‰๊ท  ๊ตฌํ•˜๊ธฐ

 

const values = [1, 2, 3, 4, 5, 6];

const average = values.reduce((acc, cur, i, { length }) => {
  // ๋งˆ์ง€๋ง‰ ์ˆœํšŒ๊ฐ€ ์•„๋‹ˆ๋ฉด ๋ˆ„์ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜๊ณ  ๋งˆ์ง€๋ง‰ ์ˆœํšŒ๋ฉด ๋ˆ„์ ๊ฐ’์œผ๋กœ ํ‰๊ท ์„ ๊ตฌํ•ด ๋ฐ˜ํ™˜ํ•œ๋‹ค.
  return i === length - 1 ? (acc + cur) / length : acc + cur;
}, 0);

console.log(average); // 3.5

 

 

์ตœ๋Œ€๊ฐ’ ๊ตฌํ•˜๊ธฐ

 

const values = [1, 2, 3, 4, 5];

const max = values.reduce((acc, cur) => (acc > cur ? acc : cur), 0);
console.log(max); // 5

 

*์ตœ๋Œ€๊ฐ’์„ ๊ตฌํ•  ๋•Œ๋Š” Math.max ๋ฉ”์„œ๋“œ๋ฅผ ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ๋” ์ง๊ด€์ 

 

 

์š”์†Œ์˜ ์ค‘๋ณต ํšŸ์ˆ˜ ๊ตฌํ•˜๊ธฐ

 

const fruits = ['banana', 'apple', 'orange', 'orange', 'apple'];

const count = fruits.reduce((acc, cur) => {
  // ์ฒซ ๋ฒˆ์งธ ์ˆœํšŒ ์‹œ acc๋Š” ์ดˆ๊ธฐ๊ฐ’์ธ {}์ด๊ณ  cur์€ ์ฒซ ๋ฒˆ์งธ ์š”์†Œ์ธ 'banana'๋‹ค.
  // ์ดˆ๊ธฐ๊ฐ’์œผ๋กœ ์ „๋‹ฌ๋ฐ›์€ ๋นˆ ๊ฐ์ฒด์— ์š”์†Œ๊ฐ’์ธ cur์„ ํ”„๋กœํผํ‹ฐ ํ‚ค๋กœ, ์š”์†Œ์˜ ๊ฐœ์ˆ˜๋ฅผ ํ”„๋กœํผํ‹ฐ ๊ฐ’์œผ๋กœ
  // ํ• ๋‹นํ•œ๋‹ค. ๋งŒ์•ฝ ํ”„๋กœํผํ‹ฐ ๊ฐ’์ด undefined(์ฒ˜์Œ ๋“ฑ์žฅํ•˜๋Š” ์š”์†Œ)์ด๋ฉด ํ”„๋กœํผํ‹ฐ ๊ฐ’์„ 1๋กœ ์ดˆ๊ธฐํ™”ํ•œ๋‹ค.
  acc[cur] = (acc[cur] || 0) + 1;
  return acc;
}, {});

// ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” ์ด 5๋ฒˆ ํ˜ธ์ถœ๋˜๊ณ  ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ฒฐ๊ณผ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
/*
{banana: 1} => {banana: 1, apple: 1} => {banana: 1, apple: 1, orange: 1}
=> {banana: 1, apple: 1, orange: 2} => {banana: 1, apple: 2, orange: 2}
*/

console.log(count); // { banana: 1, apple: 2, orange: 2 }

 

 

 

์ค‘์ฒฉ ๋ฐฐ์—ด ํ‰ํƒ„ํ™”

 

const values = [1, [2, 3], 4, [5, 6]];

const flatten = values.reduce((acc, cur) => acc.concat(cur), []);
// [1] => [1, 2, 3] => [1, 2, 3, 4] => [1, 2, 3, 4, 5, 6]

console.log(flatten); // [1, 2, 3, 4, 5, 6]

 

*์ค‘์ฒฉ ๋ฐฐ์—ด์„ ํ‰ํƒ„ํ™” ํ• ๋•Œ๋Š” Array.prototype.flat ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ๋” ์ง๊ด€์ 

 

 

์ค‘๋ณต ์š”์†Œ ์ œ๊ฑฐ

 

const values = [1, 2, 1, 3, 5, 4, 5, 3, 4, 4];

const result = values.reduce(
  (unique, val, i, _values) =>
    // ํ˜„์žฌ ์ˆœํšŒ ์ค‘์ธ ์š”์†Œ์˜ ์ธ๋ฑ์Šค i๊ฐ€ val์˜ ์ธ๋ฑ์Šค์™€ ๊ฐ™๋‹ค๋ฉด val์€ ์ฒ˜์Œ ์ˆœํšŒํ•˜๋Š” ์š”์†Œ๋‹ค.
    // ํ˜„์žฌ ์ˆœํšŒ ์ค‘์ธ ์š”์†Œ์˜ ์ธ๋ฑ์Šค i๊ฐ€ val์˜ ์ธ๋ฑ์Šค์™€ ๋‹ค๋ฅด๋‹ค๋ฉด val์€ ์ค‘๋ณต๋œ ์š”์†Œ๋‹ค.
    // ์ฒ˜์Œ ์ˆœํšŒํ•˜๋Š” ์š”์†Œ๋งŒ ์ดˆ๊ธฐ๊ฐ’ []๊ฐ€ ์ „๋‹ฌ๋œ unique ๋ฐฐ์—ด์— ๋‹ด์•„ ๋ฐ˜ํ™˜ํ•˜๋ฉด ์ค‘๋ณต๋œ ์š”์†Œ๋Š” ์ œ๊ฑฐ๋œ๋‹ค.
    _values.indexOf(val) === i ? [...unique, val] : unique,
  []
);

console.log(result); // [1, 2, 3, 5, 4]

 

*์ค‘๋ณต ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•  ๋•Œ๋Š” filter ๋ฉ”์„œ๋“œ๋‚˜ Set์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋” ์ง๊ด€์ 

 

์ด์ฒ˜๋Ÿผ map, filter, some, every, find ๊ฐ™์€ ๋ชจ๋“  ๋ฐฐ์—ด์˜ ๊ณ ์ฐจ ํ•จ์ˆ˜๋Š” reduce ๋ฉ”์„œ๋“œ๋กœ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์•ž์„œ ์‚ดํŽด๋ณด์•˜๋“ฏ์ด reduce ๋ฉ”์„œ๋“œ๋Š” ๋‘ ๋ฒˆ์งธ ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•˜๋Š” ์ดˆ๊ธฐ๊ฐ’์„ ์ƒ๋žตํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ์–ธ์ œ๋‚˜ ์ดˆ๊ธฐ๊ฐ’์„ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์ด ์•ˆ์ „ํ•ฉ๋‹ˆ๋‹ค.

 

Array.prototype.some

some ๋ฉ”์„œ๋“œ๋Š” ์ž์‹ ์ด ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ์ˆœํšŒํ•˜๋ฉด์„œ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. ์ด๋•Œ some ๋ฉ”์„œ๋“œ๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์ด ๋‹จ ํ•œ๋ฒˆ์ด๋ผ๋„ ์ฐธ์ด๋ฉด true, ๋ชจ๋‘ ๊ฑฐ์ง“์ด๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

 

forEach, map, filter ๋ฉ”์„œ๋“œ์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ some ๋ฉ”์„œ๋“œ์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” some ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์˜ ์š”์†Œ๊ฐ’๊ณผ ์ธ๋ฑ์Šค, some ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด ์ž์ฒด์ธ this๋ฅผ ์ˆœ์ฐจ์ ์œผ๋กœ ์ „๋‹ฌ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 

 

// ๋ฐฐ์—ด์˜ ์š”์†Œ ์ค‘์— 10๋ณด๋‹ค ํฐ ์š”์†Œ๊ฐ€ 1๊ฐœ ์ด์ƒ ์กด์žฌํ•˜๋Š”์ง€ ํ™•์ธ
[5, 10, 15].some(item => item > 10); // -> true

// ๋ฐฐ์—ด์˜ ์š”์†Œ ์ค‘์— 0๋ณด๋‹ค ์ž‘์€ ์š”์†Œ๊ฐ€ 1๊ฐœ ์ด์ƒ ์กด์žฌํ•˜๋Š”์ง€ ํ™•์ธ
[5, 10, 15].some(item => item < 0); // -> false

// ๋ฐฐ์—ด์˜ ์š”์†Œ ์ค‘์— 'banana'๊ฐ€ 1๊ฐœ ์ด์ƒ ์กด์žฌํ•˜๋Š”์ง€ ํ™•์ธ
['apple', 'banana', 'mango'].some(item => item === 'banana'); // -> true

// some ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์ด ๋นˆ ๋ฐฐ์—ด์ธ ๊ฒฝ์šฐ ์–ธ์ œ๋‚˜ false๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
[].some(item => item > 3); // -> false
  • ๋ฐฐ์—ด์˜ ์š”์†Œ ์ค‘์— ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ์ •์˜ํ•œ ์กฐ๊ฑด์„ ๋งŒ์กฑํ•˜๋Š” ์š”์†Œ๊ฐ€ 1๊ฐœ ์ด์ƒ ์กด์žฌํ•˜๋Š”์ง€ ํ™•์ธํ•˜์—ฌ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋ถˆ๋ฆฌ์–ธ ํƒ€์ž…์œผ๋กœ ๋ฐ˜ํ™˜
  • ๋นˆ ๋ฐฐ์—ด์ธ ๊ฒฝ์šฐ ์–ธ์ œ๋‚˜ false๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฒƒ์„ ์ฃผ์˜ํ•ด์•ผ ํ•จ

 

Array.prototype.every

every ๋ฉ”์„œ๋“œ๋Š” ์ž์‹ ์ด ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ์ˆœํšŒํ•˜๋ฉด์„œ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. ์ด๋•Œ every ๋ฉ”์„œ๋“œ๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์ด ๋ชจ๋‘ ์ฐธ์ด๋ฉด true, ๋‹จ ํ•œ๋ฒˆ์ด๋ผ๋„ ๊ฑฐ์ง“์ด๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

 

forEach, map, filter ๋ฉ”์„œ๋“œ์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ every ๋ฉ”์„œ๋“œ์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” every ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์˜ ์š”์†Œ๊ฐ’๊ณผ ์ธ๋ฑ์Šค, every ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด ์ž์ฒด์ธ this๋ฅผ ์ˆœ์ฐจ์ ์œผ๋กœ ์ „๋‹ฌ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 

 

// ๋ฐฐ์—ด์˜ ๋ชจ๋“  ์š”์†Œ๊ฐ€ 3๋ณด๋‹ค ํฐ์ง€ ํ™•์ธ
[5, 10, 15].every(item => item > 3); // -> true

// ๋ฐฐ์—ด์˜ ๋ชจ๋“  ์š”์†Œ๊ฐ€ 10๋ณด๋‹ค ํฐ์ง€ ํ™•์ธ
[5, 10, 15].every(item => item > 10); // -> false

// every ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์ด ๋นˆ ๋ฐฐ์—ด์ธ ๊ฒฝ์šฐ ์–ธ์ œ๋‚˜ true๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
[].every(item => item > 3); // -> true
  • ๋ฐฐ์—ด์˜ ์š”์†Œ ์ค‘์— ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ์ •์˜ํ•œ ์กฐ๊ฑด์„ ๋ชจ๋‘ ๋งŒ์กฑํ•˜๋Š”์ง€ ํ™•์ธํ•˜์—ฌ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋ถˆ๋ฆฌ์–ธ ํƒ€์ž…์œผ๋กœ ๋ฐ˜ํ™˜
  • ๋นˆ ๋ฐฐ์—ด์ธ ๊ฒฝ์šฐ ์–ธ์ œ๋‚˜ true๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฒƒ์„ ์ฃผ์˜ํ•ด์•ผ ํ•จ

 

Array.prototype.find

ES6์—์„œ ๋„์ž…๋œ find ๋ฉ”์„œ๋“œ๋Š” ์ž์‹ ์ด ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ์ˆœํšŒํ•˜๋ฉด์„œ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ๋ฐ˜ํ™˜๊ฐ’์ด true์ธ ์ฒซ ๋ฒˆ์งธ ์š”์†Œ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฉฐ ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์ด true์ธ ์š”์†Œ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด undefined๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

 

forEach, map, filter ๋ฉ”์„œ๋“œ์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ find ๋ฉ”์„œ๋“œ์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” find ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์˜ ์š”์†Œ๊ฐ’๊ณผ ์ธ๋ฑ์Šค, find ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด ์ž์ฒด์ธ this๋ฅผ ์ˆœ์ฐจ์ ์œผ๋กœ ์ „๋‹ฌ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 

 

const users = [
  { id: 1, name: 'Lee' },
  { id: 2, name: 'Kim' },
  { id: 2, name: 'Choi' },
  { id: 3, name: 'Park' }
];

// id๊ฐ€ 2์ธ ์ฒซ ๋ฒˆ์งธ ์š”์†Œ๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค. find ๋ฉ”์„œ๋“œ๋Š” ๋ฐฐ์—ด์ด ์•„๋‹ˆ๋ผ ์š”์†Œ๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
users.find(user => user.id === 2); // -> {id: 2, name: 'Kim'}

// Array#filter๋Š” ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
[1, 2, 2, 3].filter(item => item === 2); // -> [2, 2]

// Array#find๋Š” ์š”์†Œ๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
[1, 2, 2, 3].find(item => item === 2); // -> 2
  • filter ๋ฉ”์„œ๋“œ๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ํ˜ธ์ถœ ๊ฒฐ๊ณผ๊ฐ€ true์ธ ์š”์†Œ๋งŒ ์ถ”์ถœํ•ด์„œ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•˜์—ฌ ์–ธ์ œ๋‚˜ ๋ฐ˜ํ™˜๊ฐ’์ด ๋ฐฐ์—ด์ด์ง€๋งŒ, find ๋ฉ”์„œ๋“œ๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์ด true์ธ ์ฒซ ๋ฒˆ์งธ ์š”์†Œ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฐ˜ํ™˜๊ฐ’์€ ์–ธ์ œ๋‚˜ ํ•ด๋‹น ์š”์†Œ๊ฐ’

 

Array.prototype.findIndex

ES6์—์„œ ๋„์ž…๋œ findIndex ๋ฉ”์„œ๋“œ๋Š” ์ž์‹ ์ด ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ์ˆœํšŒํ•˜๋ฉด์„œ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ๋ฐ˜ํ™˜๊ฐ’์ด true์ธ ์ฒซ ๋ฒˆ์งธ ์š”์†Œ์˜ index๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฉฐ ์ฝœ๋ฐฑ ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์ด true์ธ ์š”์†Œ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด -1์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

 

forEach, map, filter ๋ฉ”์„œ๋“œ์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ findIndex ๋ฉ”์„œ๋“œ์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” findIndex ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์˜ ์š”์†Œ๊ฐ’๊ณผ ์ธ๋ฑ์Šค, findIndex ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด ์ž์ฒด์ธ this๋ฅผ ์ˆœ์ฐจ์ ์œผ๋กœ ์ „๋‹ฌ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 

 

const users = [
  { id: 1, name: 'Lee' },
  { id: 2, name: 'Kim' },
  { id: 2, name: 'Choi' },
  { id: 3, name: 'Park' }
];

// id๊ฐ€ 2์ธ ์š”์†Œ์˜ ์ธ๋ฑ์Šค๋ฅผ ๊ตฌํ•œ๋‹ค.
users.findIndex(user => user.id === 2); // -> 1

// name์ด 'Park'์ธ ์š”์†Œ์˜ ์ธ๋ฑ์Šค๋ฅผ ๊ตฌํ•œ๋‹ค.
users.findIndex(user => user.name === 'Park'); // -> 3

// ์œ„์™€ ๊ฐ™์ด ํ”„๋กœํผํ‹ฐ ํ‚ค์™€ ํ”„๋กœํผํ‹ฐ ๊ฐ’์œผ๋กœ ์š”์†Œ์˜ ์ธ๋ฑ์Šค๋ฅผ ๊ตฌํ•˜๋Š” ๊ฒฝ์šฐ
// ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ์ถ”์ƒํ™”ํ•  ์ˆ˜ ์žˆ๋‹ค.
function predicate(key, value) {
  // key์™€ value๋ฅผ ๊ธฐ์–ตํ•˜๋Š” ํด๋กœ์ €๋ฅผ ๋ฐ˜ํ™˜
  return item => item[key] === value;
}

// id๊ฐ€ 2์ธ ์š”์†Œ์˜ ์ธ๋ฑ์Šค๋ฅผ ๊ตฌํ•œ๋‹ค.
users.findIndex(predicate('id', 2)); // -> 1

// name์ด 'Park'์ธ ์š”์†Œ์˜ ์ธ๋ฑ์Šค๋ฅผ ๊ตฌํ•œ๋‹ค.
users.findIndex(predicate('name', 'Park')); // -> 3

 

Array.prototype.flatMap

ES10์—์„œ ๋„์ž…๋œ flatMap ๋ฉ”์„œ๋“œ๋Š” map ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด ์ƒ์„ฑ๋œ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ํ‰ํƒ„ํ™”ํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, map ๋ฉ”์„œ๋“œ์™€ flat ๋ฉ”์„œ๋“œ๋ฅผ ์ˆœ์ฐจ์ ์œผ๋กœ ์‹คํ–‰ํ•˜๋Š” ํšจ๊ณผ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

 

const arr = ['hello', 'world'];

// map๊ณผ flat์„ ์ˆœ์ฐจ์ ์œผ๋กœ ์‹คํ–‰
arr.map(x => x.split('')).flat();
// -> ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']

// flatMap์€ map์„ ํ†ตํ•ด ์ƒ์„ฑ๋œ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ํ‰ํƒ„ํ™”ํ•œ๋‹ค.
arr.flatMap(x => x.split(''));
// -> ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']

 

๋‹จ, flatMap ๋ฉ”์„œ๋“œ๋Š” flat ๋ฉ”์„œ๋“œ์ฒ˜๋Ÿผ ์ธ์ˆ˜๋ฅผ ์ „๋‹ฌํ•˜์—ฌ ํ‰ํƒ„ํ™” ๊นŠ์ด๋ฅผ ์ง€์ •ํ•  ์ˆ˜๋Š” ์—†๊ณ  1๋‹จ๊ณ„๋งŒ ํ‰ํƒ„ํ™”ํ•˜๊ธฐ ๋•Œ๋ฌธ์— map ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด ์ƒ์„ฑ๋œ ์ค‘์ฒฉ ๋ฐฐ์—ด์˜ ํ‰ํƒ„ํ™” ๊นŠ์ด๋ฅผ ์ง€์ •ํ•ด์•ผ ํ•œ๋‹ค๋ฉด map ๋ฉ”์„œ๋“œ์™€ flat ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ๊ฐ ํ˜ธ์ถœํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

 

const arr = ['hello', 'world'];

// flatMap์€ 1๋‹จ๊ณ„๋งŒ ํ‰ํƒ„ํ™”ํ•œ๋‹ค.
arr.flatMap((str, index) => [index, [str, str.length]]);
// -> [[0, ['hello', 5]], [1, ['world', 5]]] => [0, ['hello', 5], 1, ['world', 5]]

// ํ‰ํƒ„ํ™” ๊นŠ์ด๋ฅผ ์ง€์ •ํ•ด์•ผ ํ•˜๋ฉด flatMap ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ๋ง๊ณ  map ๋ฉ”์„œ๋“œ์™€ flat ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ๊ฐ ํ˜ธ์ถœํ•œ๋‹ค.
arr.map((str, index) => [index, [str, str.length]]).flat(2);
// -> [[0, ['hello', 5]], [1, ['world', 5]]] => [0, 'hello', 5, 1, 'world', 5]

[์ถœ์ฒ˜] ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive

https://wikibook.co.kr/mjs/

 

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive: ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ ๋™์ž‘ ์›๋ฆฌ

269๊ฐœ์˜ ๊ทธ๋ฆผ๊ณผ ์›๋ฆฌ๋ฅผ ํŒŒํ—ค์น˜๋Š” ์„ค๋ช…์œผ๋กœ ‘์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ ๋™์ž‘ ์›๋ฆฌ’๋ฅผ ์ดํ•ดํ•˜์ž! ์›นํŽ˜์ด์ง€์˜ ๋‹จ์ˆœํ•œ ๋ณด์กฐ ๊ธฐ๋Šฅ์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ ์ œํ•œ์ ์ธ ์šฉ๋„๋กœ ํƒœ์–ด๋‚œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๊ณผ๋„

wikibook.co.kr