이번에는
Array메소드 중 자주, 흔히 쓰이는 친구들에 대해서 살펴보도록 하겠다.
Array.prototype.forEach()
const arr = ['사과', '오렌지', '딸기', '포도']; arr.forEach((item) => console.log(item)); /* 사과 오렌지 딸기 포도 */
-
forEach()메소드는 각 요소들을 인자로 받아와 콜백 함수 내부에서 주어진 함수를 배열 각각의 요소에 적용한다. -
배열 각각의 요소에 적용할 때
for loop,for..of등을 사용하는데forEach()를 사용하면 비교적 간결하게 코드를 작성할 수 있다.
Array.prototype.map()
const arr = [2, 4, 6, 8, 10, 12]; arr.map(num => num * 2) // [4, 8, 12, 16, 20, 24] 함수 적용 후 배열로 리턴
-
map()메소드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. -
배열의 요소들에게 콜백 함수 내 주어진 함수를 단순히 적용하는
forEach()와 달리,map()은 적용 후 같은arr.length을 가진 새로운 배열 생성한다.
Array.prototype.filter()
const arr = [100, 78, 66, 51, 99, 88, 65, 48]; arr.filter((num) => num >= 60 && num < 80); // [78, 66, 65] 조건에 만족하는 요소들만 배열로 리턴
filter()메소드는 배열 요소들 중, 콜백 함수에 주어지는 조건을 만족하는 요소들만 모아 새로운 배열로 생성한다. (boolean값으로 체크)
Array.prototype.sort()
const arr1 = ['다', '나', '사', '바', '마', '라', '가']; const arr2 = [5, 10, 4, 3, 9, 11, 6]; // const result = arr1.sort(); const result2 = arr2.sort((a, b) => a - b); // console.log(result); // ["가", "나", "다", "라", "마", "바", "사"] console.log(result2); // [3, 4, 5, 6, 9, 10, 11] 오름차순으로 정렬
-
sort()메소드는, 배열의 요소를 정렬한 후 해당 배열값을 반환한다. -
문자열의 경우, 비교 함수가 콜백 함수로 전달되지 않을 때 유니 코드 포인트 순서대로 정렬한다.
-
비교 함수에서
a - b의 경우 오름 차순,b - a의 경우 내림 차순으로 정렬된다. -
새로운 배열값으로 생성되는 것이 아닌, 기존의 배열을 정렬하여 수정하기 때문에 이점을 주의하자.
Array.prototype.reduce()
const arr = [1, 2, 3, 4, 5]; // const result = arr.reduce((acc, curr) => { return acc + curr; }, 0); // console.log(result); // 15
-
reduce()메소드는 배열의 값을 순회하면서 배열의 값을 특정 형태로 누적하는데 사용된다. -
인자로는
accumulator(누적값),currentValue(해당 요소),currentIndex(해당 요소의 index),array(배열)이 있으나currentIndex,array는 필수가 아니므로 생략해도 무방하다. -
일반적으로 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용하게 되지만, 제한적으로 사용되기 때문에 웬만해서 사용하는 것이 좋다. (배열 내 객체를 사용할 때 초기값을 제공하지 않을 시 오류가 발생할 수 있다.)
Reference
