πŸ“– λ°°μ—΄

cyd5538Β·2022λ…„ 7μ›” 3일
0

DeepDive

λͺ©λ‘ 보기
24/42
post-thumbnail

😁 λ°°μ—΄μ΄λž€?

배열은 μ—¬λŸ¬ 개의 값을 순차적으둜 λ‚˜μ—΄ν•œ μžλ£Œκ΅¬μ‘°λ‹€. 배열은 μ‚¬μš© λΉˆλ„κ°€ 맀우 높은 κ°€μž₯ 기본적인 μžλ£Œκ΅¬μ‘°λ‹€. 배열은 μ‚¬μš© λΉˆλ„κ°€ λ†’μœΌλ―€λ‘œ λŠ₯μˆ™ν•˜κ²Œ λ‹€λ£° 수 μžˆλ‹€λ©΄ 코딩에 맀우 도움이 λœλ‹€.

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

배열이 가지고 μžˆλŠ” 값을 μš”μ†ŒλΌκ³  λΆ€λ₯Έλ‹€. μ›μ‹œκ°’μ€ λ¬Όλ‘  객체, ν•¨μˆ˜, λ°°μ—΄ λ“± μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ κ°’μœΌλ‘œ μΈμ •ν•˜λŠ” λͺ¨λ“  것은 λ°°μ—΄μ˜ μš”μ†Œκ°€ 될 수 μžˆλ‹€.
λ°°μ—΄μ˜ μš”μ†Œμ—λŠ” λ°°μ—΄μ—μ„œ μžμ‹ μ˜ μœ„μΉ˜λ₯Ό λ‚˜νƒ€λ‚΄λŠ” 0 μ΄μƒμ˜ μ •μˆ˜μΈ 인덱슀λ₯Ό κ°–λŠ”λ‹€.
λ°°μ—΄μ˜ μš”μ†Œμ˜ 개수, λ°°μ—΄μ˜ 길이λ₯Ό λ‚˜νƒ€λ‚΄λŠ” lengthν”„λ‘œνΌν‹°λ₯Ό κ°–λŠ”λ‹€

arr.lenghth // 3

μžλ°”μŠ€ν¬λ¦½νŠΈμ— λ°°μ—΄μ΄λΌλŠ” νƒ€μž…μ€ μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ”λ° 배열은 객체 νƒ€μž…μ΄λ‹€.

ꡬ뢄객체배열
κ΅¬μ‘°ν”„λ‘œνΌν‹° 킀와 ν”„λ‘œνΌν‹° κ°’μΈλ±μŠ€μ™€ μš”μ‡Ό
κ°’μ˜ μ°Έμ‘°ν”„λ‘œνΌν‹° ν‚€μΈλ±μŠ€
κ°’μ˜ μˆœμ„œXO
length ν”„λ‘œνΌν‹°XO

일반 객체와 배열을 κ΅¬λΆ„ν•˜λŠ” κ°€μž₯ λͺ…ν™•ν•œ μ°¨μ΄λŠ” "κ°’μ˜ μˆœμ„œ"와 "lenghth ν”„λ‘œνΌν‹°"λ‹€

λ°°μ—΄μ˜ μž₯점
κ°’μ˜ μˆœμ„œμ™€ length ν”„λ‘œνΌν‹°λ₯Ό κ°–κΈ° λ•Œλ¬Έμ— κ°€λŠ₯

  • μ²˜μŒλΆ€ν„° 순차적으둜 μš”μ†Œμ— μ ‘κ·Όν•  수 μžˆλ‹€
  • λ§ˆμ§€λ§‰λΆ€ν„° μ—­μˆœμœΌλ‘œ μš”μ†Œμ— μ ‘κ·Όν•  μˆ˜λ„ μžˆλ‹€
  • νŠΉμ • μœ„μΉ˜λΆ€ν„° 순차적으둜 μš”μ†Œμ— μ ‘κ·Όν•  μˆ˜λ„ μžˆλ‹€

βœ”οΈ μžλ°”μŠ€ν¬λ¦½νŠΈ 배열은 배열이 μ•„λ‹ˆλ‹€

μžλ£Œκ΅¬μ‘°μ—μ„œ λ§ν•˜λŠ” 배열은 λ™μΌν•œ 크기의 λ©”λͺ¨λ¦¬ 곡간이 λΉˆν‹ˆμ—†μ΄ μ—°μ†μ μœΌλ‘œ λ‚˜μ—΄λœ 자료ꡬ쑰λ₯Ό λ§ν•œλ‹€. λ°°μ—΄μ˜ μš”μ†ŒλŠ” ν•˜λ‚˜μ˜ 데이터 νƒ€μž…μœΌλ‘œ ν†΅μΌλ˜μ–΄ 있으며 μ„œλ‘œ μ—°μ†μ μœΌλ‘œ 인접해 μžˆλ‹€. μ΄λŸ¬ν•œ 배열을 밀집 배열이라 ν•œλ‹€.
μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 배열은 일반적인 의미의 λ°°μ—΄κ³Ό λ‹€λ₯΄λ‹€. 즉, λ°°μ—΄μ˜ μš”μ†Œλ₯Ό μœ„ν•œ 각각의 λ©”λͺ¨λ¦¬ 곡간은 λ™μΌν•œ 크기λ₯Ό 갖지 μ•Šμ•„λ„ 되며, μ—°μ†μ μœΌλ‘œ 이어져 μžˆμ§€ μ•Šμ„ μˆ˜λ„ μžˆλ‹€. λ°°μ—΄μ˜ μš”μ†Œκ°€ μ—°μ†μ μœΌλ‘œ 이어져 μžˆμ§€ μ•ŠλŠ” 배열을 ν¬μ†Œ 배열이라 ν•œλ‹€.
μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 배열은 일반적인 λ°°μ—΄μ˜ λ™μž‘μ„ 흉내 λ‚Έ νŠΉμˆ˜ν•œ 객체닀.

✏️ 일반적인 λ°°μ—΄κ³Ό μžλ°”μŠ€ν¬λ¦½νŠΈ λ°°μ—΄μ˜ μž₯단점

  • 일반적인 배열은 인덱슀둜 μš”μ†Œμ— λΉ λ₯΄κ²Œ μ ‘κ·Όν•  수 μžˆλ‹€. ν•˜μ§€λ§Œ νŠΉμ • μš”μ†Œλ₯Ό κ²€μƒ‰ν•˜κ±°λ‚˜ μš”μ†Œλ₯Ό μ‚½μž… λ˜λŠ” μ‚­μ œν•˜λŠ” κ²½μš°μ—λŠ” νš¨μœ¨μ μ΄μ§€ μ•Šλ‹€.
  • μžλ°”μŠ€ν¬λ¦½νŠΈ 배열은 ν•΄μ‹œ ν…Œμ΄λΈ”λ‘œ κ΅¬ν˜„λœ κ°μ²΄μ΄λ―€λ‘œ 인덱슀둜 μš”μ†Œμ— μ ‘κ·Όν•˜λŠ” 경우 일반적인 배열보닀 μ„±λŠ₯적인 λ©΄μ—μ„œ 느릴 μˆ˜λ°–μ— μ—†λŠ” ꡬ쑰적인 단점이 μžˆλ‹€. but νŠΉμ • μš”μ†Œλ₯Ό κ²€μƒ‰ν•˜κ±°λ‚˜ μš”μ†Œλ₯Ό μ‚½μž… λ˜λŠ” μ‚­μ œν•˜λŠ” κ²½μš°μ—λŠ” 일반적인 배열보닀 λΉ λ₯Έ μ„±λŠ₯을 κΈ°λŒ€ν•¨.

βœ”οΈ length ν”„λ‘œνΌν‹°μ™€ ν¬μ†Œ λ°°μ—΄

length ν”„λ‘œνΌν‹°λŠ” μš”μ†Œμ˜ 개수, 즉 λ°°μ—΄μ˜ 길이λ₯Ό λ‚˜νƒ€λ‚΄λŠ” 0 μ΄μƒμ˜ μ •μˆ˜λ₯Ό κ°’μœΌλ‘œ κ°–λŠ”λ‹€. length ν”„λ‘œνΌν‹°μ˜ 값은 배열일 경우 0이며, 빈 배열이 아닐 경우 κ°€μž₯ 큰 μΈλ±μŠ€μ— 1을 λ”ν•œ 것과 κ°™λ‹€.

λ°°μ—΄μ˜ μš”μ†Œκ°€ μ—°μ†μ μœΌλ‘œ μœ„μΉ˜ν•˜μ§€ μ•Šκ³  일뢀가 λΉ„μ–΄ μžˆλŠ” 배열을 ν¬μ†Œ 배열이라 ν•œλ‹€. ν¬μ†Œ 배열은 length와 λ°°μ—΄ μš”μ†Œμ˜ κ°œμˆ˜κ°€ μΌμΉ˜ν•˜μ§€ μ•ŠλŠ”λ‹€. ν¬μ†Œ λ°°μ—΄μ˜ lengthλŠ” ν¬μ†Œ λ°°μ—΄μ˜ μ‹€μ œ μš”μ†Œ κ°œμˆ˜λ³΄λ‹€ μ–Έμ œλ‚˜ 크닀. ν¬μ†Œ 배열은 μ‚¬μš©ν•˜μ§€ μ•ŠλŠ” 것이 μ’‹μŒ.
λ°°μ—΄μ—λŠ” 같은 νƒ€μž…μ˜ μš”μ†Œλ₯Ό μ—°μ†μ μœΌλ‘œ μœ„μΉ˜μ‹œν‚€λŠ” 것이 μ΅œμ„ μ΄λ‹€

βœ”οΈ λ°°μ—΄ 생성

✏️ λ°°μ—΄ λ¦¬ν„°λŸ΄

λ°°μ—΄ λ¦¬ν„°λŸ΄μ€ 0개 μ΄μƒμ˜ μš”μ†Œλ₯Ό μ‰Όν‘œλ‘œ κ΅¬λΆ„ν•˜μ—¬ λŒ€κ΄„ν˜Έ([])둜 λ¬ΆλŠ”λ‹€. λ°°μ—΄ λ¦¬ν„°λŸ΄μ€ 객체 λ¦¬ν„°λŸ΄κ³Ό 달리 ν”„λ‘œνΌν‹° ν‚€κ°€ μ—†κ³  κ°’λ§Œ 쑴재.

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

✏️ Array μƒμ„±μž ν•¨μˆ˜

Object μƒμ„±μž ν•¨μˆ˜λ₯Ό 톡해 객체λ₯Ό 생성할 수 μžˆλ“―μ΄ Array μƒμ„±μž ν•¨μˆ˜λ₯Ό 톡해 배열을 생성할 μˆ˜λ„ μžˆλ‹€. Array μƒμ„±μž ν•¨μˆ˜λŠ” μ „λ‹¬λœ 인수의 κ°œμˆ˜μ— 따라 λ‹€λ₯΄κ²Œ λ™μž‘ν•˜λ―€λ‘œ μ£Όμ˜κ°€ ν•„μš”

✏️ Array.of

ES6μ—μ„œ λ„μž…λœ Array.of λ©”μ„œλ“œλŠ” μ „λ‹¬λœ 인수λ₯Ό μš”μ†Œλ‘œ κ°–λŠ” 배열을 생성, Array μƒμ„±μž ν•¨μˆ˜μ™€ λ‹€λ₯΄κ²Œ μ „λ‹¬λœ μΈμˆ˜κ°€ 1개이고 μˆ«μžμ΄λ”λΌλ„ 인수λ₯Ό μš”μ†Œλ‘œ κ°–λŠ” 배열을 생성

// μ „λ‹¬λœ μΈμˆ˜κ°€ 1개이고 μˆ«μžμ΄λ”λΌλ„ 인수λ₯Ό μš”μ†Œλ‘œ κ°–λŠ” 배열을 생성
Array.of(1); // [1]
Array.of(1,2,3); // [1,2,3]
Array.of('string'); // ['string']

✏️ Array.from

ES6μ—μ„œ λ„μž…λœ Array.from λ©”μ„œλ“œλŠ” μœ μ‚¬ λ°°μ—΄ 객체 λ˜λŠ” μ΄ν„°λŸ¬λΈ” 객체λ₯Ό 인수둜 전달받아 λ°°μ—΄λ‘œ λ°˜ν™˜ν•˜μ—¬ λ°˜ν™˜

// μœ μ‚¬ λ°°μ—΄ 객체λ₯Ό λ³€ν™˜ν•˜μ—¬ 배열을 μƒμ„±ν•œλ‹€.
Array.from({length: 2, 0: 'a', 1: 'b'}); // ['a','b']

// μ΄ν„°λŸ¬λΈ”μ„ λ³€ν™˜ν•˜μ—¬ 배열을 μƒμ„±ν•œλ‹€. λ¬Έμžμ—΄μ€ μ΄ν„°λŸ¬λΈ”μ΄λ‹€.
Array.from('Hello'); // ['H','e','l','l','o']

πŸ“‹ μœ μ‚¬ λ°°μ—΄ 객체와 μ΄ν„°λŸ¬λΈ” 객체
μœ μ‚¬ λ°°μ—΄ κ°μ²΄λŠ” 마치 λ°°μ—΄μ²˜λŸΌ 인덱슀둜 ν”„λ‘œνΌν‹° 값에 μ ‘κ·Όν•  수 있고 length ν”„λ‘œνΌν‹°λ₯Ό κ°–λŠ” 객체λ₯Ό λ§ν•œλ‹€. μœ μ‚¬ λ°°μ—΄ κ°μ²΄λŠ” 마치 λ°°μ—΄μ²˜λŸΌ for 문으둜 μˆœνšŒν•  μˆ˜λ„ μžˆλ‹€.
μ΄ν„°λŸ¬λΈ” κ°μ²΄λŠ” Symbol.iterator λ©”μ„œλ“œλ₯Ό κ΅¬ν˜„ν•˜μ—¬ for...of 문으둜 μˆœνšŒν•  수 있으며, μŠ€ν”„λ ˆλ“œ 문법과 λ°°μ—΄ λ””μŠ€νŠΈλŸ­μ²˜λ§ ν• λ‹Ήμ˜ λŒ€μƒμœΌλ‘œ μ‚¬μš©ν•  수 μžˆλŠ” 객체λ₯Ό λ§ν•œλ‹€.

βœ”οΈ λ°°μ—΄ μš”μ†Œμ˜ μ°Έμ‘°

λ°°μ—΄μ˜ μš”μ†Œλ₯Ό μ°Έμ‘°ν•  λ•Œμ—λŠ” λŒ€κ΄„ν˜Έ([]) ν‘œκΈ°λ²•μ„ μ‚¬μš©ν•œλ‹€. λŒ€κ΄„ν˜Έ μ•ˆμ—λŠ” μΈλ±μŠ€κ°€ 와야 ν•œλ‹€. μ •μˆ˜λ‘œ ν‰κ°€λ˜λŠ” ν‘œν˜„μ‹μ΄λΌλ©΄ 인덱슀 λŒ€μ‹  μ‚¬μš©ν•  수 μžˆλ‹€. μΈλ±μŠ€λŠ” 값을 μ°Έμ‘°ν•  수 μžˆλ‹€λŠ” μ˜λ―Έμ—μ„œ 객체의 ν”„λ‘œνΌν‹° 킀와 같은 역할을 함
μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ” μš”μ†Œμ— μ ‘κ·Όν•˜λ©΄ undefinedκ°€ λ°˜ν™˜

βœ”οΈ λ°°μ—΄ μš”μ†Œμ˜ 좔가와 κ°±μ‹ 

객체에 ν”„λ‘œνΌν‹°λ₯Ό λ™μ μœΌλ‘œ μΆ”κ°€ν•  수 μžˆλŠ” κ²ƒμ²˜λŸΌ 배열에도 μš”μ†Œλ₯Ό λ™μ μœΌλ‘œ μΆ”κ°€ν•  수 μžˆλ‹€. μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ” 인덱슀λ₯Ό μ‚¬μš©ν•΄ 값을 ν• λ‹Ήν•˜λ©΄ μƒˆλ‘œμš΄ μš”μ†Œκ°€ μΆ”κ°€. μ΄λ•Œ length ν”„λ‘œνΌν‹° 값은 μžλ™ κ°±μ‹ 

const arr = [0];

// λ°°μ—΄ μš”μ†Œμ˜ μΆ”κ°€
arr[1] = 1;

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

βœ”οΈ λ°°μ—΄ μš”μ†Œμ˜ μ‚­μ œ

배열은 사싀 객체이기 λ•Œλ¬Έμ— λ°°μ—΄μ˜ νŠΉμ • μš”μ†Œλ₯Ό μ‚­μ œν•˜κΈ° μœ„ν•΄ delete μ—°μ‚°μžλ₯Ό μ‚¬μš©ν•  수 μžˆλ‹€. ν¬μ†Œ 배열을 λ§Œλ“œλŠ” delete μ—°μ‚°μžλŠ” μ‚¬μš©ν•˜μ§€ μ•ŠλŠ” 것이 μ’‹λ‹€.

β˜‘οΈ Array.prototype.splice λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•œλ‹€.

const arr = [1, 2, 3];

// Array.prototype.splice(μ‚­μ œλ₯Ό μ‹œμž‘ν•  인덱슀, μ‚­μ œν•  μš”μ†Œ 수)
// arr[1]λΆ€ν„° 1개의 μš”μ†Œλ₯Ό 제거
arr.splice(1,1);
console.log(arr); // [1,3]

// length ν”„λ‘œνΌν‹°κ°€ μžλ™ κ°±μ‹ λœλ‹€.
console.log(arr.length); // 2

βœ”οΈ λ°°μ—΄ λ©”μ„œλ“œ

배열은 μ‚¬μš© λΉˆλ„κ°€ 높은 μžλ£Œκ΅¬μ‘°μ΄λ―€λ‘œ λ°°μ—΄ λ©”μ„œλ“œμ˜ μ‚¬μš©λ²•μ„ 잘 μ•Œμ•„λ‘μž!
λ°°μ—΄ λ©”μ„œλ“œλŠ” 결과물을 λ°˜ν™˜ν•˜λŠ” νŒ¨ν„΄μ΄ 두 가지이닀
1. λ°°μ—΄μ—λŠ” 원본 λ°°μ—΄(λ°°μ—΄ λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•œ λ°°μ—΄, 즉 λ°°μ—΄ λ©”μ„œλ“œμ˜ κ΅¬ν˜„μ²΄ λ‚΄λΆ€μ—μ„œ thisκ°€ κ°€λ¦¬ν‚€λŠ” 객체)을 직접 λ³€κ²½ν•˜λŠ” λ©”μ„œλ“œ
2. 원본 배열을 직접 λ³€κ²½ν•˜μ§€γ…£ μ•Šκ³  μƒˆλ‘œμš΄ 배열을 μƒμ„±ν•˜μ—¬ λ°˜ν™˜ν•˜λŠ” λ©”μ„œλ“œκ°€ μžˆλ‹€
.

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]

πŸ”‘ 가급적 원본 배열을 직접 λ³€κ²½ν•˜μ§€ μ•ŠλŠ” λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜λŠ” 편이 μ’‹λ‹€.

✏️ Array.isArray

Array.isArray λ©”μ„œλ“œλŠ” μ „λ‹¬λœ μΈμˆ˜κ°€ 배열이면 true, 배열이 μ•„λ‹ˆλ©΄ falseλ₯Ό λ°˜ν™˜ν•œλ‹€.

✏️ Array.prototype.indexOf

indexOf λ©”μ„œλ“œλŠ” 원본 λ°°μ—΄μ—μ„œ 인수둜 μ „λ‹¬λœ μš”μ†Œλ₯Ό κ²€μƒ‰ν•˜μ—¬ 인덱슀λ₯Ό λ°˜ν™˜

  • 원본 배열에 인수둜 μ „λ‹¬ν•œ μš”μ†Œμ™€ μ€‘λ³΅λ˜λŠ” μš”μ†Œκ°€ μ—¬λŸ¬ 개 μžˆλ‹€λ©΄ 첫 번쨰둜 κ²€μƒ‰λœ μš”μ†Œμ˜ 인덱슀λ₯Ό λ°˜ν™˜
  • 원본 배열에 인수둜 μ „λ‹¬ν•œ μš”μ†Œκ°€ μ‘΄μž¬ν•˜μ§€ μ•ŠμœΌλ©΄ -1을 λ°˜ν™˜
const arr = [1,2,2,4];

// λ°°μ—΄ arrμ—μ„œ μš”μ†Œ 2λ₯Ό κ²€μƒ‰ν•˜μ—¬ 첫 번쟀둜 κ²€μƒ‰λœ μš”μ†Œμ˜ 인데슀λ₯Ό λ°˜ν™˜
arr.indexOf(2); // 1

indexOf λ©”μ„œλ“œλŠ” 배열에 νŠΉμ • μš”μ†Œκ°€ μ‘΄μž¬ν•˜λŠ”μ§€ 확인할 λ•Œ μœ μš©ν•˜μ§€λ§Œ ES7μ—μ„œ λ„μž…λœ Array.prototype.includes λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜λ©΄ 가독성이 더 μ’‹λ‹€.

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

// food 배열에 'orange' μš”μ†Œκ°€ μ‘΄μž¬ν•˜λŠ”μ§€ 확인
if(!foods.includes('orange')) {
  // foods 배열에 'orange' μš”μ†Œκ°€ μ‘΄μž¬ν•˜μ§€ μ•ŠμœΌλ©΄ 'orange' μš”μ†Œλ₯Ό μΆ”κ°€
  foods.push('orange')
}

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

✏️ Array.prototype.push

push λ©”μ„œλ“œλŠ” 인수둜 전달받은 λͺ¨λ“  값을 원본 λ°°μ—΄μ˜ λ§ˆμ§€λ§‰ μš”μ†Œλ‘œ μΆ”κ°€ν•˜κ³  λ³€κ²½λœ length ν”„λ‘œνΌν‹° 값을 λ°˜ν™˜. push λ©”μ„œλ“œλŠ” 원본 배열을 직접 λ³€κ²½

const arr = [1,2] ;

// 인수둜 전달받은 λͺ¨λ“  값을 원본 λ°°μ—΄ arr의 λ§ˆμ§€λ§‰ μš”μ†Œλ‘œ μΆ”κ°€ν•˜κ³  λ³€κ²½λœ length 값을 λ°˜ν™˜ν•œλ‹€.
let result = arr.push(3,4);
console.log(result); 4

// push λ©”μ„œλ“œλŠ” 원본 배열을 직접 λ³€κ²½
console.log(arr); // [1,2,3,4]

push λ©”μ„œλ“œλŠ” μ„±λŠ₯ λ©΄μ—μ„œ 쒋지 μ•Šλ‹€. λ§ˆμ§€λ§‰ μš”μ†Œλ‘œ μΆ”κ°€ν•  μš”μ†Œκ°€ ν•˜λ‚˜λΏμ΄λΌλ©΄ push λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜μ§€ μ•Šκ³  length ν”„λ‘œνΌν‹°λ₯Ό μ‚¬μš©ν•˜μ—¬ λ°°μ—΄μ˜ λ§ˆμ§€λ§‰μ— μš”μ†Œλ‘€ 직접 μΆ”κ°€ν•  μˆ˜λ„ μžˆλ‹€.

const arr = [1,2];

// arr.push(3)κ³Ό λ™μΌν•œ 처리λ₯Ό ν•œλ‹€. 이 방법이 push λ©”μ„œλ“œλ³΄λ‹€ λΉ λ₯΄λ‹€
arr[arr.length] = 3;
console.log(arr); // [1,2,3]

push보닀 ES6의 μŠ€ν”„λ ˆλ“œ 문법을 μ‚¬μš©ν•˜λŠ” 편이 μ’‹λ‹€.

✏️ Array.prototype.pop

pop λ©”μ„œλ“œλŠ” 원본 λ°°μ—΄μ—μ„œ λ§ˆμ§€λ§‰ μš”μ†Œλ₯Ό μ œκ±°ν•˜κ³  μ œκ±°ν•œ μš”μ†Œλ₯Ό λ°˜ν™˜ν•œλ‹€. 배열이 λΉ„μ–΄μžˆμœΌλ©΄ undefinedλ₯Ό λ°˜ν™˜. popλ©”μ„œλ“œλŠ” 배열을 직접 λ³€κ²½

const arr = [1.2];

// 원본 λ°°μ—΄μ—μ„œ λ§ˆμ§€λ§‰ μš”μ†Œλ₯Ό μ œκ±°ν•˜κ³  μ œκ±°ν•œ μš”μ†Œλ₯Ό λ°˜ν™˜ν•œλ‹€.
let result = arr.pop();
console.log(result); //2

// pop λ©”μ„œλ“œλŠ” 원본 배열을 직접 λ³€κ²½ν•œλ‹€.
console.log(arr); // [1]

πŸ”‘ μŠ€ν…μ€ 데이터λ₯Ό λ§ˆμ§€λ§‰μ— λ°€μ–΄ λ„£κ³ , λ§ˆμ§€λ§‰μ— λ°€μ–΄ 넣은 데이터λ₯Ό λ¨Όμ € κΊΌλ‚΄λŠ” ν›„μž… μ„ μΆœ λ°©μ‹μ˜ μžλ£Œκ΅¬μ‘°λ‹€.
μŠ€νƒμ€ μ–Έμ œλ‚˜ κ°€μž₯ λ§ˆμ§€λ§‰μ— λ°€μ–΄ 넣은 μ΅œμ‹  데이터λ₯Ό λ¨Όμ € μ·¨λ“ν•œλ‹€. μŠ€νƒμ— 데이터λ₯Ό λ°€μ–΄ λ„£λŠ” 것을 ν‘Έμ‹œλΌν•˜κ³  κΊΌλ‚΄λŠ” 것을 팝이라고 ν•œλ‹€.

✏️ Array.prototype.unshift

unshift λ©”μ„œλ“œλŠ” 인수둜 전달받은 λͺ¨λ“  값을 원본 λ°°μ—΄μ˜ 선두에 μš”μ†Œλ‘œ μΆ”κ°€ν•˜κ³  λ³€κ²½λœ length ν”„λ‘œνΌν‹° 값을 λ°˜ν™˜, unshift λ©”μ„œλ“œλŠ” 원본 배열을 직접 λ³€κ²½

const arr = [1,2]

// 인수둜 전달받은 λͺ¨λ“  값을 원본 λ°°μ—΄μ˜ 선두에 μš”μ†Œλ‘œ μΆ”κ°€ν•˜κ³  λ³€κ²½λœ length 값을 λ°˜ν™˜ν•œλ‹€
let result = arr.unshift(3,4);
console.log(result); // 4

// unshift λ©”μ„œλ“œλŠ” 원본 배열을 직접 λ³€κ²½
console.log(arr); // [1,2,3,4]

unshift λ©”μ„œλ“œλŠ” 원본 배열을 직접 λ³€κ²½ν•˜λŠ” λΆ€μˆ˜ νš¨κ³Όκ°€ μžˆλ‹€ λ”°λΌμ„œ ES6의 μŠ€ν”„λ ˆλ“œ 문법을 μ‚¬μš©ν•˜μž.

✏️ Array.prototype.shift

shift λ©”μ„œλ“œλŠ” 원본 λ°°μ—΄μ—μ„œ 첫 번째 μš”μ†Œλ₯Ό μ œκ±°ν•˜κ³  μ œκ±°ν•œ μš”μ†Œλ₯Ό λ°˜ν™˜ν•œλ‹€. 원본 배열이 빈 배열이면 undefinedλ₯Ό λ°˜ν™˜ν•œλ‹€. shift λ©”μ„œλ“œλŠ” 원본 배열을 직접 λ³€κ²½

const arr = [1,2]

// 원본 λ°°μ—΄μ—μ„œ 첫 번쨰 μš”μ†Œλ₯Ό μ œκ±°ν•˜κ³  μ œκ±°ν•œ μš”μ†Œλ₯Ό λ°˜ν™˜ν•œλ‹€.
let result = arr.shift();
console.log(result); // 1

// shift λ©”μ„œλ“œλŠ” 원본 배열을 직접 λ³€κ²½
console.log(arr); // [2]

shift λ©”μ„œλ“œμ™€ push λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜λ©΄ 큐λ₯Ό μ‰½κ²Œ κ΅¬ν˜„ν•  수 μžˆλ‹€.

πŸ”‘ νλŠ” 데이터λ₯Ό λ§ˆμ§€λ§‰μ— λ°€μ–΄ λ„£κ³ , 처음 데이터, 즉 κ°€μž₯ λ¨Όμ € λ°€μ–΄ 넣은 데이터λ₯Ό λ¨Όμ € κΊΌλ‚΄λŠ” μ„ μž… μ„ μΆœλ°©μ‹μ˜ μžλ£Œκ΅¬μ‘°λ‹€. μŠ€νƒμ€ μ–Έμ œλ‚˜ λ§ˆμ§€λ§‰μ— λ°€μ–΄ 넣은 μ΅œμ‹  데이터λ₯Ό μ·¨λ“ν•˜μ§€λ§Œ νλŠ” μ–Έμ œλ‚˜ 데이터λ₯Ό λ°€μ–΄ 넣은 μˆœμ„œλŒ€λ‘œ 취득함.

✏️ Array.prototype.concat

concat λ©”μ„œλ“œλŠ” 인수둜 μ „λ‹¬λœ 값듀을 원본 λ°°μ—΄μ˜ λ§ˆμ§€λ§‰ μš”μ†Œλ‘œ μΆ”κ°€ν•œ μƒˆλ‘œμš΄ 배열을 λ°˜ν™˜ 인수둜 μ „λ‹¬ν•œ 값이 배열인 경우 배열을 ν•΄μ²΄ν•˜μ—¬ μƒˆλ‘œμš΄ λ°°μ—΄μ˜ μš”μ†Œλ‘œ μΆ”κ°€ν•œλ‹€. 원본 배열은 λ³€κ²½X

const arr1 = [1,2];
const arr2 = [3.4];

// λ°°μ—΄ arrλ₯Ό 원본 λ°°μ—΄ 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]

⭐️⭐️⭐️그λƒ₯ ES6의 슀페λ₯΄λ“œ 문법을 일관성 있게 μ‚¬μš©ν•˜μž.

✏️ Array.prototype.splice

원본 λ°°μ—΄μ˜ 쀑간에 μš”μ†Œλ₯Ό μΆ”κ°€ν•˜κ±°λ‚˜ 쀑간에 μžˆλŠ” μš”μ†Œλ₯Ό μ œκ±°ν•˜λŠ” 경우 splice λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•œλ‹€. 3개의 λ§€κ°œλ³€μˆ˜κ°€ 있으며 원본 배열을 직접 λ³€κ²½

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

// 원본 λ°°μ—΄μ˜ 인덱슀 1λΆ€ν„° 2개의 μš”μ†Œλ₯Ό μ œκ±°ν•˜κ³  κ·Έ μžλ¦¬μ— μƒˆλ‘œμš΄ μš”μ†Œ 20, 30을 μ‚½μž…ν•œλ‹€.
const result = arr.splice(1,2,20,30);

// μ œκ±°ν•œ μš”μ†Œκ°€ λ°°μ—΄λ‘œ λ°˜ν™˜λœλ‹€.
console.log(result); // [2,3]
// splice λ©”μ„œλ“œλŠ” 원본 배열을 직접 λ³€κ²½ν•œλ‹€.
console.log(arr); // [1,20,30,4]

splice λ©”μ„œλ“œμ˜ 두 번째 인수, 즉 μ œκ±°ν•  μš”μ†Œμ˜ 개수λ₯Ό 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); // []

splice λ©”μ„œλ“œμ˜ μ„Έ 번쨰 인수, 즉 μ œκ±°ν•œ μœ„μΉ˜μ— μΆ”κ°€ν•  μš”μ†Œλ“€μ˜ λͺ©λ‘μ„ μ „λ‹¬ν•˜μ§€ μ•ŠμœΌλ©΄ 원본 λ°°μ—΄μ—μ„œ μ§€μ •λœ μš”μ†Œλ₯Ό μ œκ±°ν•˜κΈ°λ§Œ ν•œλ‹€.

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

// 원본 λ°°μ—΄μ˜ 인덱슀 1λΆ€ν„° 2개의 μš”μ†Œλ₯Ό μ œκ±°ν•œλ‹€.
const result = arr.splice(1,2);

// 원본 배열이 λ³€κ²½λœλ‹€.
console.log(arr); // [1,4]
// μ œκ±°ν•œ μš”μ†Œκ°€ λ°°μ—΄λ‘œ λ°˜ν™˜λœλ‹€.
console.log(result); // [2,3]

splice λ©”μ„œλ“œμ˜ 두 번째 인수, 즉 μ œκ±°ν•  μš”μ†Œμ˜ 개수λ₯Ό μƒλž΅ν•˜λ©΄ 첫 번쨰 인수둜 μ „λ‹¬λœ μ‹œμž‘ μΈλ±μŠ€λΆ€ν„° λͺ¨λ“  μš”μ†Œλ₯Ό μ œκ±°ν•œλ‹€.

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

// 원본 λ°°μ—΄μ˜ 인덱슀 1λΆ€ν„° λͺ¨λ“  μš”μ†Œλ₯Ό μ œκ±°ν•œλ‹€.
const result = arr.splice(1);

// 원본 배열이 λ³€κ²½λœλ‹€.
console.log(arr); // [1]
// μ œκ±°ν•œ μš”μ†Œκ°€ λ°°μ—΄λ‘œ λ°˜ν™˜λœλ‹€.
console.log(result); // [2,3,4]

λ°°μ—΄μ—μ„œ νŠΉμ • μš”μ†Œλ₯Ό μ œκ±°ν•˜λ €λ©΄ indexOf λ©”μ„œλ“œλ₯Ό 톡해 νŠΉμ • μš”μ†Œμ˜ 인덱슀λ₯Ό μ·¨λ“ν•œ λ‹€μŒ splice λ©”μ„œλ₯Ό μ‚¬μš©ν•œλ‹€.

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

// λ°°μ—΄ arrayμ—μ„œ item μš”μ†Œλ₯Ό μ œκ±°ν•œλ‹€. item μš”μ†Œκ°€ μ—¬λŸ¬ 개 μ‘΄μž¬ν•˜λ©΄ 첫 번째 μš”μ†Œλ§Œ μ œκ±°ν•œλ‹€.
function remove(array,item) {
  // μ œκ±°ν•  item μš”μ†Œμ˜ 인덱슀λ₯Ό μ·¨λ“ν•œλ‹€.
  const index = array.indexOf(item);
  
  // μ œκ±°ν•  item μš”μ†Œκ°€ μžˆλ‹€λ©΄ μ œκ±°ν•œλ‹€.
  if (index !== -1) array.splice(index,1);
  
  return array;
}
console.log(remove(arr,2)); // [1,3,1,2]
console.log(remove(arr,10)); // [1,3,1,2]

filter λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜μ—¬ νŠΉμ • μš”μ†Œλ₯Ό μ œκ±°ν•  μˆ˜λ„ μžˆλ‹€. ν•˜μ§€λ§Œ νŠΉμ • μš”μ†Œκ°€ μ€‘λ³΅λœ 경우 λͺ¨λ‘ 제거됨.

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

// λ°°μ—΄ arrayμ—μ„œ λͺ¨λ“  item μš”μ†Œλ₯Ό μ œκ±°ν•œλ‹€.
function removeAll(array,item) {
  return array.filter(v => v !== item);
}

console.log(removeAll(arr,2)); // [1,3,1]

✏️ Array.prototype.slice

slice λ©”μ„œλ“œλŠ” 인수둜 μ „λ‹¬λœ λ²”μœ„μ˜ μš”μ†Œλ“€μ„ λ³΅μ‚¬ν•˜μ—¬ λ°°μ—΄λ‘œ λ°˜ν™˜ν•œλ‹€. 원본 배열은 λ³€κ²½λ˜μ§€ μ•ŠλŠ”λ‹€. μœ μ‚¬ν•œ splice λ©”μ„œλ“œλŠ” 원본 배열을 λ³€κ²½ν•˜λ―€λ‘œ 주의

  • start : 볡사λ₯Ό μ‹œμž‘ν•œ μΈλ±μŠ€λ‹€. 음수인 경우 λ°°μ—΄μ˜ λμ—μ„œμ˜ 인덱슀λ₯Ό λ‚˜νƒ€λ‚Έλ‹€. 예λ₯Ό λ“€μ–΄ slice(-2)λŠ” λ°°μ—΄μ˜ λ§ˆμ§€λ§‰ 두 개의 μš”μ†Œλ₯Ό λ³΅μ†Œν•˜μ—¬ λ°°μ—΄λ‘œ λ°˜ν™˜ν•œλ‹€.
  • end: 볡사λ₯Ό μ’…λ£Œν•  μΈλ±μŠ€λ‹€. 이 μΈλ±μŠ€μ— ν•΄λ‹Ήν•˜λŠ” μš”μ†ŒλŠ” λ³΅μ‚¬λ˜μ§€ μ•ŠλŠ”λ‹€. 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]

slice λ©”μ„œλ“œλŠ” 첫 번쨰 인수둜 전달받은 μΈλ±μŠ€λΆ€ν„° 두 번쨰 인수둜 전달받은 인덱슀 μ΄μ „κΉŒμ§€ μš”μ†Œλ“€μ„ λ³΅μ‚¬ν•˜μ—¬ λ°°μ—΄λ‘œ λ°˜ν™˜ν•œλ‹€.

const arr = [1,2,3]

// arr[1]λΆ€ν„° μ΄ν›„μ˜ λͺ¨λ“  μš”μ†Œλ₯Ό λ³΅μ‚¬ν•˜μ—¬ λ°˜ν™˜ν•œλ‹€.
arr.slice(1); // [2,3]

slice λ©”μ„œλ“œμ˜ 첫 번쨰 μΈμˆ˜κ°€ 음수인 경우 λ°°μ—΄μ˜ λμ—μ„œλΆ€ν„° μš”μ†Œλ₯Ό λ³΅μ‚¬ν•˜μ—¬ λ°°μ—΄λ‘œ λ°˜ν™˜

const arr = [1,2,3]

// λ°°μ—΄μ˜ λμ—μ„œλΆ€ν„° μš”μ†Œλ₯Ό ν•œ 개 λ³΅μ‚¬ν•˜μ—¬ λ°˜ν™˜ν•œλ””.
arr.slice(-1); // [3]
// λ°°μ—΄μ˜ λμ—μ„œλΆ€ν„° μš”μ†Œλ₯Ό 두 개 λ³΅μ‚¬ν•˜μ—¬ λ°˜ν™˜ν•œλ‹€.
arr.slice(-2); // [2,3]'

slice λ©”μ„œλ“œμ˜ 인수λ₯Ό λͺ¨λ‘ μƒλž΅ν•˜λ©΄ 원본 λ°°μ—΄μ˜ 볡사본을 μƒμ„±ν•˜μ—¬ λ°˜ν™˜

const arr = [1,2,3];

// 인수λ₯Ό λͺ¨λ‘ μƒλž΅ν•˜λ©΄ 원본 λ°°μ—΄μ˜ 볡사본을 μƒμ„±ν•˜μ—¬ λ°˜ν™˜ν•œλ‹€.
const copy = arr.slice();
console.log(copy); // [1,2,3]
console.log(copy === arr); // false

μ΄λ•Œ μƒμ„±λœ 볡사본은 얕은 볡사λ₯Ό 톡해 생성

const todos = [
  { id: 1, content: 'HTML', completed: false},
  { id: 2, content: 'HTML', completed: false},
  { id: 3, content: 'HTML', completed: false}
];

// 얕은 볡사(shallow copy)
const _todos = todos.slice();
// const _todos = [...todos]

// _todo와 todosλŠ” 참쑰값이 λ‹€λ₯Έ λ³„κ°œμ˜ 객체닀.
console.log(_todos === todos); // false

// λ°°μ—΄ μš”μ†Œμ˜ 참쑰값이 κΈΈλ‹€. 즉, 얕은 λ³΅μ‚¬λ˜μ—ˆλ‹€.
console.log(_todos[0] === todos[0]); // true

Array.form λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜λ©΄ λ”μš± κ°„λ‹¨ν•˜κ²Œ μœ μ‚¬ λ°°μ—΄ 객체λ₯Ό λ°°μ—΄λ‘œ λ³€ν™˜ν•  수 μžˆλ‹€.

function sum() {
  const arr = Array.from(arguments);
  console.log(arr); // [1,2,3]
  
  return arr.reduce((pre, cur) => pre + cur, 0);
}

console.log(sum(1,2,3)); // 6

μ΄ν„°λŸ¬λΈ” κ°μ²΄λŠ” ES6의 μŠ€ν”„λ ˆλ“œ 문법을 μ‚¬μš©ν•˜μ—¬ κ°„λ‹¨ν•˜κ²Œ λ°°μ—΄λ‘œ λ³€ν™˜

function sum() {
  // μ΄ν„°λŸ¬λΈ”μ„ λ°°μ—΄λ‘œ λ°˜ν™˜(ES6 μŠ€ν”„λ ˆλ“œ 문법)
  const arr = [...arguments];
  console.log(arr); // [1,2,3]
  
  return arr.reduce((pre,cur) => pre + cur, 0);
}
console.log((sum(1,2,3)); // 6

✏️ Array.prototype.join

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

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μ—μ„œ λ„μž…λœ fill λ©”μ„œλ“œλŠ” 인수둜 전달받은 값을 λ°°μ—΄μ˜ μ²˜μŒλΆ€ν„° λκΉŒμ§€ μš”μ†Œλ‘œ μ±„μš΄λ‹€. 원본 배열이 λ³€κ²½

const arr= [1,2,3]

// 인수둜 전달받은 κ°’ 0을 λ°°μ—΄μ˜ μ²˜μŒλΆ€ν„° λκΉŒμ§€ μš”μ†Œλ‘œ μ±„μš΄λ‹€.
arr.fill(0);

// fill λ©”μ„œλ“œλŠ” 원본 배열을 직접 λ³€κ²½ν•œλ‹€.
console.log(arr); // [0,0,0]

두 번째 인수둜 μš”μ†Œ μ±„μš°κΈ°λ₯Ό μ‹œμž‘ν•  인덱슀λ₯Ό 전달할 수 μžˆλ‹€.
μ„Έ 번째 인수둜 μš”μ†Œ μ±„μš°κΈ°λ₯Ό 멈좜 인덱슀λ₯Ό 전달할 수 μžˆλ‹€.
fill λ©”μ„œλ“œλ‘œ μš”μ†Œλ₯Ό μ±„μšΈ 경우 λͺ¨λ“  μš”μ†Œλ₯Ό ν•˜λ‚˜μ˜ κ°’λ§ŒμœΌλ‘œ μ±„μšΈ μˆ˜λ°–μ— μ—†λ‹€λŠ” 단점이 μžˆλ‹€.
Array.from λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜λ©΄ 두 번쨰 인수둜 μ „λ‹¬ν•œ 콜백 ν•¨μˆ˜λ₯Ό 톡해 μš”μ†Œκ°’μ„ λ§Œλ“€λ©΄μ„œ 배열을 μ±„μšΈ 수 μžˆλ‹€.
Array.from λ©”μ„œλ“œλŠ” `두 번쨰 인수둜 μ „λ‹¬ν•œ 콜백 ν•¨μˆ˜μ— 첫 번째 μΈμˆ˜μ— μ˜ν•΄ μƒμ„±λœ λ°°μ—΄μ˜ μš”μ†Œκ°’κ³Ό 인덱슀λ₯Ό 순차적으둜 μ „λ‹¬ν•˜λ©΄μ„œ ν˜ΈμΆœν•˜κ³ , 콜백 ν•¨μˆ˜μ˜ λ°˜ν™˜κ°’μœΌλ‘œ κ΅¬μ„±λœ 배열을 λ°˜ν™˜.

// 인수둜 전달받은 μ •μˆ˜λ§ŒνΌ μš”μ†Œλ₯Ό μƒμ„±ν•˜κ³  0λΆ€ν„° 1μ”© μ¦κ°€ν•˜λ©΄μ„œ μš”μ†Œλ₯Ό μ±„μš΄λ‹€.
const sequences = (length = 0) => Array.from({ length }. (_, 1) => i);
// const sequences = (length = 0) => Array.from(new Array(length), (_, i) => i);

console.log(sequences(3)); // [0,1,2]

✏️ Array.prototype.includes

ES7μ—μ„œ λ„μž…λœ includes λ©”μ„œλ“œλŠ” λ°°μ—΄ 내에 νŠΉμ • μš”μ†Œκ°€ ν¬ν•¨λ˜μ–΄ μžˆλŠ”μ§€ ν™•μΈν•˜μ—¬ true λ˜λŠ” falseλ₯Ό λ°˜ν™˜ 첫 번째 인수둜 검색할 λŒ€μƒμ„ 지정.

const arr = [1,2,3];

// 배열에 μš”μ†Œ 2κ°€ ν¬ν•¨λ˜μ–΄ μžˆλŠ”μ§€ ν™•μΈν•œλ‹€.
arr.includes(2); // true

// 배열에 μš”μ†Œ 100이 ν¬ν•¨λ˜μ–΄ μžˆλŠ”μ§€ ν™•μΈν•œλ‹€.
arr.includes(100); // false

두 번쨰 인수둜 검색을 μ‹œμž‘ν•  인덱슀λ₯Ό 전달할 수 μžˆλ‹€. 두 번쨰 인수λ₯Ό μƒλž΅ν•  경우 κΈ°λ³Έκ°’ 0이 μ„€μ •λœλ‹€. 두 번째 μΈμˆ˜μ— 음수λ₯Ό μ „λ‹¬ν•˜λ©΄ length ν”„λ‘œνΌν‹° κ°’κ³Ό 음수 인덱슀λ₯Ό ν•©μ‚°ν•˜μ—¬(length + index) κ²€μƒ‰μ‹œμž‘ 인덱슀λ₯Ό μ„€μ •ν•œλ‹€.

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μ—μ„œ λ„μž…λœ flat λ©”μ„œλ“œλŠ” 인수둜 μ „λ‹¬ν•œ 깊이만큼 μž¬κ·€μ μœΌλ‘œ 배열을 ν‰νƒ„ν™”ν•œλ‹€.

[1, [2,3,4,5]].flat(); // [1,2,3,4,5]

[1,[2,[3,[4]]]].flat(Infinity); // [1,2,3,4]

βœ”οΈ λ°°μ—΄ κ³ μ°¨ ν•¨μˆ˜

κ³ μ°¨ ν•¨μˆ˜λŠ” ν•¨μˆ˜λ₯Ό 인수둜 μ „λ‹¬λ°›κ±°λ‚˜ ν•¨μˆ˜λ₯Ό λ°˜ν™˜ν•˜λŠ” ν•¨μˆ˜λ₯Ό λ§ν•œλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ ν•¨μˆ˜λŠ” 일급 κ°μ²΄μ΄λ―€λ‘œ ν•¨μˆ˜λ₯Ό κ°’μ²˜λŸΌ 인수둜 전달할 수 있으며 λ°˜ν™˜ν•  μˆ˜λ„ μžˆλ‹€. κ³ μ°¨ν•¨μˆ˜λŠ” μ™ΈλΆ€ μƒνƒœμ˜ λ³€κ²½μ΄λ‚˜ 가변데이터λ₯Ό ν”Όν•˜κ³  λΆˆλ³€μ„±μ„ 지ν–₯ν•˜λŠ” ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°μ— κΈ°λ°˜μ„ 두고 μžˆλ‹€
ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°μ€ μˆœμˆ˜ν•¨μˆ˜μ™€ 보쑰 ν•¨μˆ˜μ˜ 쑰합을 톡해 둜직 내에 μ‘΄μž¬ν•˜λŠ” 쑰건문과 λ°˜λ³΅λ¬Έμ„ μ œκ±°ν•˜μ—¬ λ³΅μž‘μ„±μ„ ν•΄κ²°ν•˜κ³  λ³€μˆ˜μ˜ μ‚¬μš©μ„ μ–΅μ œν•˜μ—¬ μƒνƒœ 변경을 ν”Όν•˜λ €λŠ” ν”„λ‘œκ·Έλž˜λ° νŒ¨λŸ¬λ‹€μž„μ΄λ‹€.
ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°μ€ κ²°κ΅­ 순수 ν•¨μˆ˜λ₯Ό 톡해 λΆ€μˆ˜ 효과λ₯Ό μ΅œλŒ€ν•œ μ–΅μ œν•˜μ—¬ 였λ₯˜λ₯Ό ν”Όν•˜κ³  ν”„λ‘œκ·Έλž¨μ˜ μ•ˆμ •μ„±μ„ λ†’μ΄λ €λŠ” λ…Έλ ₯의 μΌν™˜μ΄λΌκ³ λ„ ν•  수 μžˆλ‹€.

✏️ Array.prototype.sort

sort λ©”μ„œλ“œλŠ” λ°°μ—΄μ˜ μš”μ†Œλ₯Ό μ •λ ¬. 원본 배열을 직접 λ³€κ²½ν•˜μ—¬ μ •λ ¬λœ 배열을 λ°˜ν™˜. sort λ©”μ„œλ“œλŠ” 기본적으둜 μ˜€λ¦„μ°¨μˆœμœΌλ‘œ μš”μ†Œλ₯Ό μ •λ ¬

const fruits = ['Banana', 'Orange', 'Apple']

// μ˜€λ¦„μ°¨μˆœ μ •λ ¬
fruits.sort();

// sort λ©”μ„œλ“œλŠ” 원본 배열을 직접 λ³€κ²½ν•œλ‹€.
console.log(fruits); // ['Apple', 'Banana', 'Orange']

ν•œκΈ€ λ¬Έμžμ—΄μΈ μš”μ†Œλ„ μ˜€λ¦„μ°¨μˆœμœΌλ‘œ μ •λ ¬
sort λ©”μ„œλ“œλŠ” 기본적으둜 μ˜€λ¦„μ°¨μˆœμœΌλ‘œ μš”μ†Œλ₯Ό μ •λ ¬ν•˜λ―€λ‘œ λ‚΄λ¦Όμ°¨μˆœμœΌλ‘œ μš”μ†Œλ₯Ό μ •λ ¬ν•˜λ €λ©΄ sortλ₯Ό μ‚¬μš©ν•œλ’€ revese λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜μž.

숫자 μš”μ†Œλ₯Ό μ •λ ¬ν•  λ–„λŠ” sort λ©”μ„œλ“œμ— μ •λ ¬ μˆœμ„œλ₯Ό μ •μ˜ν•˜λŠ” 비ꡐ ν•¨μˆ˜λ₯Ό 인수둜 전달
ν•΄μ•Ό ν•œλ‹€.

const points = [40,100,1,5,2,25,10];

// 숫자 λ°°μ—΄μ˜ μ˜€λ¦„μ°¨μˆœ μ •λ ¬, 비ꡐ ν•¨μˆ˜μ˜ λ°˜ν™˜κ°’μ΄ 0보닀 μž‘μœΌλ©΄ aλ₯Ό μš°μ„ ν•˜μ—¬ μ •λ ¬ν•œλ‹€
points.sort((a,b) => a - b);
console.log(points); // [1,2,4,10,25,40,100]

// 숫자 λ°°μ—΄μ—μ„œ μ΅œμ†Œ/μ΅œλŒ€κ°’ 취득
console.log(points[0], points[points.length - 1]); // 1, 100

// 숫자 λ°°μ—΄μ˜ λ‚΄λ¦Όμ°¨μˆœ μ •λ ¬, 비ꡐ ν•¨μˆ˜μ˜ λ°˜ν™˜κ°’μ΄ 0보닀 μž‘μœΌλ©΄ bλ₯Ό μš°μ„ ν•˜μ—¬ μ •λ ¬ν•œλ‹€.
points.sort((a,b) => b - a);
console.log(points); // [100,40,24,10,5,2,1]

객체λ₯Ό μš”μ†Œλ‘œ κ°–λŠ” 배열을 μ •λ ¬ν•˜λŠ” 예

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'));

// contentλ₯Ό κΈ°μ€€μœΌλ‘œ μ˜€λ¦„μ°¨μˆœ μ •λ ¬
  todos.sort(compare('content');y

✏️ Array.prototype.forEach

forEach λ©”μ„œλ“œλŠ” for 문을 λŒ€μ²΄ν•  수 μžˆλŠ” κ³ μ°¨ ν•¨μˆ˜λ‹€.

const numbers = [1,2,3];
const pows = [];

// forEach λ©”μ„œλ“œλŠ” numbers λ°°μ—΄μ˜ λͺ¨λ“  μš”μ†Œλ₯Ό μˆœνšŒν•˜λ©΄μ„œ 콜백 ν•¨μˆ˜λ₯Ό 반볡 ν˜ΈμΆœν•œλ‹€.
numbers.forEach(item => pows.push(item ** 2));
console.log(pows); // [1,4,9]

✏️ Array.prototype.map

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]

forEach λ©”μ„œλ“œλŠ” μ–Έμ œλ‚˜ undefinedλ₯Ό λ°˜ν™˜ν•˜κ³ , map λ©”μ„œλ“œλŠ” 콜백 ν•¨μˆ˜μ˜ λ°˜ν™˜κ°’λ“€λ‘œ κ΅¬μ„±λœ μƒˆλ‘œμš΄ 배열을 λ°˜ν™˜ν•˜λŠ” 차이가 μžˆλ‹€.
forEach λ©”μ„œλ“œλŠ” λ‹¨μˆœνžˆ λ°˜λ³΅λ¬Έμ„ λŒ€μ²΄ν•˜κΈ° μœ„ν•œ κ³ μ°¨ ν•¨μˆ˜μ΄κ³ , map λ©”μ„œλ“œλŠ” μš”μ†Œκ°’μ„ λ‹€λ₯Έ κ°’μœΌλ‘œ λ§€ν•‘ν•œ μƒˆλ‘œμš΄ 배열을 μƒμ„±ν•˜κΈ° μœ„ν•œ κ³ μ°¨ ν•¨μˆ˜λ‹€.
map λ§€μ„œλ“œκ°€ μƒμ„±ν•˜μ—¬ λ°˜ν™˜ν•˜λŠ” μƒˆλ‘œμš΄ λ°°μ—΄μ˜ length ν”„λ‘œνΌν‹° 값은 map λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•œ λ°°μ—΄μ˜ length ν”„λ‘œνΌν‹° κ°’κ³Ό λ°˜λ“œμ‹œ μΌμΉ˜ν•œλ‹€. 즉, map λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•œ λ°°μ—΄κ³Ό map λ©”μ„œλ“œκ°€ μƒμ„±ν•˜μ—¬ λ°˜ν™˜ν•œ 배열은 1:1 λ§€ν•‘ν•œλ‹€

✏️ Array.prototype.filter

filter λ©”μ„œλ“œλŠ” μžμ‹ μ„ ν˜ΈμΆœν•œ λ°°μ—΄μ˜ λͺ¨λ“  μš”μ†Œλ₯Ό μˆœνšŒν•˜λ©΄μ„œ 인수둜 전달받은 콜백 ν•¨μˆ˜λ₯Ό 반볡 ν˜ΈμΆœν•œλ‹€. 그리고 콜백 ν•¨μˆ˜μ˜ λ°˜ν™˜κ°’μ΄ true인 μš”μ†Œλ‘œλ§Œ κ΅¬μ„±λœ μƒˆλ‘œμš΄ 배열을 λ°˜ν™˜ν•œλ‹€.

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]

✏️ Array.prototype.reduce

reduce λ©”μ„œλ“œλŠ” μžμ‹ μ„ ν˜ΈμΆœν•œ 배열을 λͺ¨λ“  μš”μ†Œλ₯Ό μˆœνšŒν•˜λ©° 인수둜 전달받은 콜백 ν•¨μˆ˜λ₯Ό 반볡 ν˜ΈμΆœν•œλ‹€.그리고 콜백 ν•¨μˆ˜μ˜ λ°˜ν™˜κ°’μ„ λ‹€μŒ 순회 μ‹œμ— 콜백 ν•¨μˆ˜μ˜ 첫 번쨰 인수둜 μ „λ‹¬ν•˜λ©΄μ„œ 콜백 ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜μ—¬ ν•˜λ‚˜μ˜ 결과값을 λ§Œλ“€μ–΄ λ°˜ν™˜ν•œλ‹€. 원본 배열은 λ³€κ²½λ˜μ§€ μ•ŠλŠ”λ‹€.
reduce λ©”μ„œλ“œλŠ” 첫 번쨰 인수둜 콜백 ν•¨μˆ˜, 두 번쨰 인수둜 μ΄ˆκΈ°κ°’μ„ μ „λ‹¬λ°›λŠ”λ‹€. reduce λ©”μ„œλ“œμ˜ 콜백 ν•¨μˆ˜μ—”γ„΄ 4개의 인수, μ΄ˆκΈ°κ°’ λ˜λŠ” 콜백 ν•¨μˆ˜μ˜ 이전 λ°˜ν™˜κ°’, reduce λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•œ λ°°μ—΄μ˜ μš”μ†Œκ°’κ³Ό 인덱슀, reduce λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•œ λ°°μ—΄ 자체, 즉 thisκ°€ 전달

reduce λ©”μ„œλ“œλŠ” ν•˜λ‚˜μ˜ 결과값을 λ°˜ν™˜ν•œλ‹€.

✏️ 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

μ΅œλŒ€κ°’μ„ ꡬ할 λ–„λŠ” reduce λ©”μ„œλ“œλ³΄λ‹€ Math.max λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜λŠ” 방법이 더 직관적

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

const max = Math.max(...values);
// var max = Math.max.apply(null, values);
console.log(max); // 5

μš”μ†Œμ˜ 쀑볡 횟수 κ΅¬ν•˜κΈ°

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번 호좜되고 λ‹€μŒκ³Ό 같이 결과값을 λ°˜ν™˜ν•œλ‹€.
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), []);

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

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]

reduce보닀 filter λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜λŠ” 방법이 더 직관적
μ€‘λ³΅λ˜μ§€ μ•ŠλŠ” μœ μΌν•œ κ°’λ“€μ˜ 집합인 Set을 μ‚¬μš©ν•  μˆ˜λ„ μžˆλ‹€ 이 방법 μΆ”μ²œ

reduce λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•  λ–„λŠ” μ–Έμ œλ‚˜ μ΄ˆκΈ°κ°’μ„ μ „λ‹¬ν•˜λŠ” 것이 μ•ˆμ „ν•˜λ‹€.

✏️ Array.prototype.some

some λ©”μ„œλ“œλŠ” μžμ‹ μ„ ν˜ΈμΆœν•œ λ°°μ—΄μ˜ μš”μ†Œλ₯Ό μˆœνšŒν•˜λ©΄μ„œ 인수둜 μ „λ‹¬λœ 콜백 ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•œλ‹€. some λ©”μ„œλ“œλŠ” 콜백 ν•¨μˆ˜μ˜ λ°˜ν™˜κ°’μ΄ 단 ν•œ λ²ˆμ΄λΌλ„ 참이면 true, λͺ¨λ‘ 거짓이면 falseλ₯Ό λ°˜ν™˜ some λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•œ 배열이 빈 배열인 경우 μ–Έμ œλ‚˜ falseλ₯Ό λ°˜ν™˜ν•˜λ―€λ‘œ 주의!

// λ°°μ—΄μ˜ μš”μ†Œ 쀑 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

✏️ Array.prototype.every

every λ©”μ„œλ“œλŠ” μžμ‹ μ„ ν˜ΈμΆœν•œ λ°°μ—΄μ˜ μš”μ†Œλ₯Ό μˆœνšŒν•˜λ©΄μ„œ 인수둜 μ „λ‹¬λœ 콜백 ν•¨μˆ˜λ₯Ό 호좜. every λ©”μ„œλ“œλŠ” 콜백 ν•¨μˆ˜μ˜ λ°˜ν™˜κ°’μ΄ λͺ¨λ‘ 참이면 true, 단 ν•œ λ²ˆμ΄λΌλ„ 거짓이면 falseλ₯Ό λ°˜ν™˜ 빈 배열인 경우 μ–Έμ œλ‚˜ trueλ₯Ό λ°˜ν™˜!

// λ°°μ—΄μ˜ λͺ¨λ“  μš”μ†Œκ°€ 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

✏️ Array.prototype.find

ES6μ—μ„œ λ„μž…λœ find λ©”μ„œλ“œλŠ” μžμ‹ μ„ ν˜ΈμΆœν•œ λ°°μ—΄μ˜ μš”μ†Œλ₯Ό μˆœνšŒν•˜λ©΄μ„œ 인수둜 μ „λ‹¬λœ 콜백 ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜μ—¬ λ°˜ν™˜κ°’μ΄ true인 첫 번쨰 μš”μ†Œλ₯Ό λ°˜ν™˜. true인 μš”μ†Œκ°€ μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ”λ‹€λ©΄ undefinedλ₯Ό λ°˜ν™˜

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

// idκ°€ 2인 첫 번쨰 μš”μ†Œλ₯Ό λ°˜ν™˜ν•œγ„·. find λ©”μ„œλ“œλŠ” 배열이 μ•„λ‹ˆλΌ μš”μ†Œλ₯Ό λ°˜ν™˜ν•œλ‹€.
users.find(user => user.id === 2); {id: 2, name: 'Kim'}
  

✏️ Array.prototype.findIndex

ES6μ—μ„œ λ„μž…λœ findIndex λ©”μ„œλ“œλŠ” μžμ‹ μ„ ν˜ΈμΆœν•œ λ°°μ—΄μ˜ μš”μ†Œλ₯Ό μˆœνšŒν•˜λ©΄μ„œ 인수둜 μ „λ‹¬λœ 콜백 ν•¨μˆ˜λ₯Ό ν˜ΈμΆ”λž—μ—¬ λ°˜ν™˜κ°‘μ‹± true인 첫 번쨰 μš”μ†Œμ˜ 인덱슀λ₯Ό λ°˜ν™˜ν•œλ‹€. 콜백 ν•¨μˆ˜μ˜ λ°˜ν™˜κ°’μ΄ true인 μš”μ†Œκ°€ μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ”λ‹€λ©΄ -1을 λ°˜ν™˜

const users = [
  { id: 1, name : 'Lee'},
  { id: 2, name : 'Kim'},
  { id: 3, name : 'Choi'},
  { id: 4, 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.finedIndex(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λ‹¨κ³„λ§Œ ν‰νƒ„ν™”ν•œλ‹€.

profile
FrontEnd Developer

0개의 λŒ“κΈ€