ํฐ์คํ ๋ฆฌ ๋ทฐ
[JavaScript] ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฐฐ์ด ๋ฉ์๋์ ๊ณ ์ฐจ ํจ์
๊ฐ๋ฐ๊ฐ๊ตด๐ธ 2022. 8. 1. 21:48์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ฐฐ์ด์ ๋ค๋ฃฐ ๋ ์ ์ฉํ ๋ค์ํ ๋นํธ์ธ ๋ฉ์๋๋ฅผ ์ ๊ณตํฉ๋๋ค. ๋ฐฐ์ด์ ์ฌ์ฉ ๋น๋๊ฐ ๋์ ์๋ฃ๊ตฌ์กฐ์ด๋ฏ๋ก ๋ฐฐ์ด ๋ฉ์๋์ ์ฌ์ฉ๋ฒ์ ์ ์์๋ ํ์๊ฐ ์์ต๋๋ค. ์ด๋ฌํ ๋ฐฐ์ด ๋ฉ์๋ ์ค์์ ์ฌ์ฉ ๋น๋๊ฐ ๋์ ๋ฉ์๋์ ์ถ๊ฐ๋ก ๋ฐฐ์ด ๊ณ ์ฐจ ํจ์์ ๋ํด์ ์์๋ณด๊ฒ ์ต๋๋ค.
*์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฐฐ์ด์ ๋ํ ์ค๋ช ์ ์๋์ ํฌ์คํ ์ ์ฐธ๊ณ ํ์ธ์.
๋ฐฐ์ด ๋ฉ์๋๋ฅผ ์ฌ์ฉํ ๋ ์ฃผ์ํ ์
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
'JavaScript > ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Dive' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[JavaScript] Math (0) | 2022.08.02 |
---|---|
[JavaScript] Number (0) | 2022.08.02 |
[JavaScript] ๋ฐฐ์ด (0) | 2022.07.31 |
[JavaScript] ES6 ํจ์์ ์ถ๊ฐ ๊ธฐ๋ฅ (0) | 2022.07.29 |
[JavaScript] ํด๋์ค (0) | 2022.07.28 |
- Total
- Today
- Yesterday
- ๋์์ธ ํจํด
- ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ
- ์นด์นด์ค ์ธํด
- ์๋ฐ์คํฌ๋ฆฝํธ
- ํ๋กํ ์ฝ
- ์ ์ญ ๋ณ์
- ์ฝ๋ฉํ ์คํธ
- ๋คํธ์ํฌ
- fp
- map
- ํ๋กํผํฐ
- ๋ฐฑ์ค node.js
- ํฌํฌ์ธํฐ
- ํ๋ก๊ทธ๋๋จธ์ค
- ์ด๋ถํ์
- ๋ ์์ปฌ ํ๊ฒฝ
- 2019 ์นด์นด์ค ๊ฐ๋ฐ์ ๊ฒจ์ธ ์ธํด
- ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ deep dive
- Baekjoon
- ํจ์ํ ํ๋ก๊ทธ๋๋ฐ
- git
- ์๋ฐ
- JavaScript
- TDD
- ๋ฐฑ์ค
- http
- ๋ค์ด๋๋ฏน ํ๋ก๊ทธ๋๋ฐ
- ๋ฐฑ์ค javascript
- ์ด์์ฒด์
- ์๊ณ ๋ฆฌ์ฆ
์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |