이번에는
Array
메소드 중 자주, 흔히 쓰이는 친구들에 대해서 살펴보도록 하겠다.
const arr = ['사과', '오렌지', '딸기', '포도']; arr.forEach((item) => console.log(item)); /* 사과 오렌지 딸기 포도 */
forEach()
메소드는 각 요소들을 인자로 받아와 콜백 함수 내부에서 주어진 함수를 배열 각각의 요소에 적용한다.
배열 각각의 요소에 적용할 때 for loop
, for..of
등을 사용하는데 forEach()
를 사용하면 비교적 간결하게 코드를 작성할 수 있다.
const arr = [2, 4, 6, 8, 10, 12]; arr.map(num => num * 2) // [4, 8, 12, 16, 20, 24] 함수 적용 후 배열로 리턴
map()
메소드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
배열의 요소들에게 콜백 함수 내 주어진 함수를 단순히 적용하는 forEach()
와 달리, map()
은 적용 후 같은 arr.length
을 가진 새로운 배열 생성한다.
const arr = [100, 78, 66, 51, 99, 88, 65, 48]; arr.filter((num) => num >= 60 && num < 80); // [78, 66, 65] 조건에 만족하는 요소들만 배열로 리턴
filter()
메소드는 배열 요소들 중, 콜백 함수에 주어지는 조건을 만족하는 요소들만 모아 새로운 배열로 생성한다. (boolean
값으로 체크) 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
의 경우 내림 차순으로 정렬된다.
새로운 배열값으로 생성되는 것이 아닌, 기존의 배열을 정렬하여 수정하기 때문에 이점을 주의하자.
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
는 필수가 아니므로 생략해도 무방하다.
일반적으로 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용하게 되지만, 제한적으로 사용되기 때문에 웬만해서 사용하는 것이 좋다. (배열 내 객체를 사용할 때 초기값을 제공하지 않을 시 오류가 발생할 수 있다.)