map()
배열 내에 있는 모든 요소들에 대해 함수를 호출한 후의 결과를 모아 새로운 배열 형태로 반환한다.
const numbers = [1, 2, 3, 4, 5, 6, 7];
const result = numbers.map(function(number) {
return number * 2;
});
console.log(result);
// 화살표함수로 변경
const result = numbers.map((number) => {
return number * 2;
});
// 단축형태
const result = numbers.map((number) => number * 2);numbers라는 배열에 1부터 7까지의 숫자를 담고, 이 배열을 map()을 통해 콜백함수에서 2배로 만들었다. 그리고 결과를 출력하면 기존의 numbers 배열의 요소들에서 2를 곱한 결과값이 출력된다.
class Student {
constructor(name, korean, english, math) {
this.name = name;
this.korean = korean;
this.english = english;
this.math = math;
}
}
const student1 = new Student('홍길동', 95, 87, 100);
const student2 = new Student('김길동', 96, 86, 75);
const student3 = new Student('박길동', 97, 85, 70);
const student4 = new Student('오길동', 98, 84, 68);
const students = [student1, student2, student3, student4];
console.log(
'영어점수',
students.map((student) => student.english)
);
console.log(
'학생이름',
students.map((student) => student.name)
);Student 클래스를 만들고 name, korean, english, math를 요소로 추가한다. 4명의 인스턴스를 만들고 각각 이름, 국어점수, 영어점수, 수학점수를 추가해 주고 이들을 students라는 배열에 담아준다. 그 후 students 배열을 map()을 사용해서 각 요소들의 영어 점수와 학생이름을 출력한다. map()을 통해 영어점수와 학생이름은 새로운 배열로 만들어지는 것을 확인할 수 있다.
some()
some() 메서드는 배열 안의 요소가 주어진 판별 함수를 통과하는지 여부를 테스트한다.
const fluits = ['사과', '딸기', '배', '참외', '딸기', '수박'];
console.log('과일 중에 배가 있나요?',
fluits.some((fluit) => {
return fluit === '배';
})
)위의 코드는 여러 과일들을 fluits 배열에 담은 후 some() 메서드를 통해 '배'라는 요소가 있는지 확인하는 코드이다. some() 메서드는 요소들을 한 번씩 순회를 하면서 한 번이라도 결괏값이 true가 되면 true를 반환한다.
const numbers = [1, 2, 3, 4, 5, 6, 7];
console.log('숫자 중에 7 이상인 숫자가 있나요?',
numbers.some((number) => number >= 7)
)1부터 7까지로 이루어진 numbers 배열의 요소를 확인해서 7 이상의 숫자가 있는지 확인하는 코드이다. 7이라는 숫자가 7 이상이 되기 때문에 true가 출력된다.
class Student {
constructor(name, korean, english, math) {
this.name = name;
this.korean = korean;
this.english = english;
this.math = math;
}
}
console.log('수학 점수가 100점인 학생이 있나요?',
students.some((student) => student.math === 100)
)
console.log('영어 점수가 50점 미만인 학생이 있나요?',
students.some((student) => student.english < 50)
)수학 점수가 100점인 학생과 영어 점수가 50점 미만인 학생을 출력하는 코드이다.
위의 코드들의 결과는 각각 true, true, true, false로 출력되는 것을 확인할 수 있다.
추가)
console.log('과일 중에 배가 있나요?',
fluits.some((fluit, index) => {
console.log('index :', index, 'fluit :', fluit);
return fluit === '배';
})
)some() 메서드의 두 번째 인자로는 index를 받을 수 있다. 위의 예시에서와 같이 '배'라는 데이터가 있으면 true를 출력하도록 했을 때
index가 2일 때까지만 요소들을 순회하는 것을 확인할 수 있다. 이는 some() 메서드를 통과할 때 하나라도 true가 되면 true를 반환하기 때문에 index 2에서 이미 true가 반환되어 더 이상 순회를 돌 필요가 없기 때문이다.
every()
every() 메서드는 some()과 달리 배열 안에 있는 모든 요소들이 판별 함수를 통과하는지 확인한다.
console.log('숫자가 모두 8 이하 인가요?',
numbers.every((number) => number <= 8) // true
)numbers 배열에 있는 숫자들이 모두 8 이하인지 확인하는 메서드이다. numbers 배열의 경우 1부터 7까지의 숫자로 이루어져 있기 때문에 true가 반환된다. 즉, 모든 요소가 true를 반환했기 때문에 true인 것이다. 만약 number <= 6으로 테스트했다면 7이라는 요소가 false가 되기 때문에 결과값은 false로 반환된다.
filter()
filter() 메서드는 테스트를 통과한 요소들을 모아 새로운 배열을 반환한다.
console.log('짝수만 출력',
numbers.filter((number) => number % 2 === 0) // [2, 4, 6]
)
console.log('홀수만 출력',
numbers.filter((number) => number % 2 === 1) // [1, 3, 5, 7]
)filter() 메서드를 이용해서 numbers 배열의 홀수, 짝수만 따로 출력하는 코드를 만들었다. 나머지가 0인 경우 짝수로, 1인 경우 홀수로 출력되도록 한 결과 새로운 배열이 만들어진 것을 확인할 수 있다.
reduce()
배열에 있는 각 요소들에 대해서 리듀서 함수를 실행한 후 하나의 결과값을 반환하는 메서드이다. 리듀서 함수는 누적값, 현재값, 현재 인덱스, 원본 배열의 매개변수를 가진다.
numbers.reduce((acc, cur, idx, src) => {
console.log('acc :', acc, 'cur :', cur, 'idx :', idx, 'src :', src);
return acc;
}, 0);위의 코드에서 매개변수는 각각 누적값, 현재값, 현재 인덱스, 원본 배열이다. 0을 초기값으로 준 상태이다.
코드 실행 결과 누적값은 0으로 초기화된 상태이고 현재값은 배열 안에 있는 요소들이 출력되는 것이고 인덱스는 배열의 인덱스를 출력하는 것이다. 누적값은 결과로 반환한 값을 다시 매개변수로 넣어주게 된다.
const result = numbers.reduce((acc, cur, idx, src) => {
console.log('acc :', acc, 'cur :', cur, 'idx :', idx, 'src :', src);
return acc + cur;
}, 0);
console.log(result);
이를 활용해서 1부터 7까지의 값을 더하는 코드를 작성하였다. 처음의 누적값은 0, 현재값은 1인 상태로 순회가 시작된다. 그 후 누적값이 1, 현재값이 2가 되고 순회를 한 번 더 돌게 되면 매개변수 acc로 1이 들어가게 되고 결과적으로 누적값이 1+2가 되면서 3이 된다. 이렇게 순회가 반복되면 1부터 7까지 더한 값이 결과값으로 출력된다.
추가) reduce()를 활용해 중복값 제거하기
console.log(fluits);
const result = fluits.reduce((acc, cur) => {
console.log('acc :', acc, 'cur :', cur);
if (acc.includes(cur) === false) {
acc.push(cur);
}
return acc;
}, []);
console.log(result);reduce()를 사용하면 배열에 있는 중복값을 제거할 수 있다.
fluits 배열은 원래 '딸기'라는 요소가 두 번 들어가 있었다. 이때, reduce()를 사용해서 누적값에 현재값이 있는 없는 경우에만 누적값으로 추가하고 있는 경우 누적값을 그대로 반환하는 코드를 작성했다. 그 결과 '딸기'의 경우 이미 존재하기 때문에 한 번 더 추가되지 않고 그대로 누적값이 반환되고 결과적으로는 '딸기' 요소가 하나 빠진 상태로 결과값이 정해진다.
첫 번째 누적값(acc)의 경우 초기값으로 지정한 배열([])이 된다. 그 후 현재값들이 계속해서 누적이 되고 '딸기'라는 값이 다시 현재값이 되었을 때 이를 건너뛰고 결과 배열이 만들어지는 것을 볼 수 있다.
댓글