공통점
배열의 요소를 하나씩 반복 작업을 하는 메소드
첫번째 아규먼트로 콜백 함수를 전달 받음
파라미터로는 배열의 요소, index, 메소드를 호출한 배열(index, 배열 생략 가능)
차이점
map은 첫번째 아규먼트로 전달하는 콜백 함수가 매번 리턴하는 값들을 모아서 새로운 배열을 만들어 리턴
const numbers = [1, 2, 3];
// forEach
numbers.forEach((element, index, array) => {
console.log(element); // 순서대로 콘솔에 1, 2, 3이 한 줄씩 출력됨.
});
// map
const twiceNumbers = numbers.map((element, index, array) => {
return element * 2;
});
console.log(twiceNumbers); // (3) [2, 4, 6]
filter: 콜백함수가 리턴하는 조건과 일치하는 요소만 모아서 새로운 배열을 리턴
find: 배열의 요소를 반복 중 조건과 일치하는 첫번째 요소를 리턴하고 반복을 종료
// filter
const apples = devices.filter((element, index, array) => {
return element.brand === 'Apple';
});
// 중괄호, 리턴문 없이 표현 가능
const apples = devices.filter((element, index, array) => element.brand === 'Apple');
// find
const myLaptop = devices.find((element, index, array) => {
console.log(index); // 콘솔에는 0, 1, 2까지만 출력됨.
return element.name === 'Gram';
});
some: 콜백 함수가 리턴하는 조건을 만족하는 요소가 1개 이상 있는지 확인
every: 배열의 모든 요소가 콜백 함수가 리턴하는 조건을 만족하는지
두 메소드 모두 조건(some: true, every: false)에 걸리면 값을 리턴하고 종료
// some: 조건을 만족하는 요소가 1개 이상 있는지
const someReturn = numbers.some((element, index, array) => {
console.log(index); // 콘솔에는 0, 1, 2, 3까지만 출력됨.
return element > 5;
});
// every: 조건을 만족하지 않는 요소가 1개 이상 있는지
const everyReturn = numbers.every((element, index, array) => {
console.log(index); // 콘솔에는 0까지만 출력됨.
return element > 5;
});
누적값을 계산할 때 사용하는 메소드
해당 메소드는 두 개의 파라미터를 활용(콜백 함수, 초기 accumulator 값)
이전의 메소드들에 들어가는 콜백 함수 파라미터 외에 accumulator가 첫번째 파라미터로 전달
accumulator: 실행되는 콜백 함수의 리턴값이 다음에 동작할 콜백 함수의 첫번째 파라미터로 전달
// reduce
const sumAll = numbers.reduce((accumulator, element, index, array) => {
return accumulator + element;
}, 0);
sort: 배열의 정렬에 사용
기본적으로 유니코드에 정의된 문자열 순서에 따라 정렬
reverse: 배열의 순서를 뒤집어 주는 메소드
두 메소드는 원본 배열의 요소를 재배치하는 것이기 때문에 주의
// sort
letters.sort();
numbers.sort();
console.log(letters); // (5) ["A", "B", "C", "D", "E"]
console.log(numbers); // (5) [1, 10, 21, 36000, 4]
// 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers); // (5) [1, 4, 10, 21, 36000]
// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // (5) [36000, 21, 10, 4, 1]
// reverse
letters.reverse();
numbers.reverse();
console.log(letters); // (3) ["b", "c", "a"]
console.log(numbers); // (3) [353, 721, 421]
Map: 객체와 비슷
Set: 배열과 비슷
일반적인 객체, 배열의 메소드를 사용하는 것이 아닌 독자적인 메소들 통해 값을 다루는 것이 특징
일반 객체는 문자열과 심볼값만 key로 사용할 수 있지만 Map은 다양한 자료형을 key로 활용 가능
Set은 개별값에 접근하는 방법이 없음, 반복문을 통해 전체요소를 한꺼번에 다루는 순간에만 접근 가능
중복값을 허용하지 않는 특징이 있어 중복값을 제거한 묶음을 만들 때 활용