자바스크립트 - 메서드 (map / filter / reduce / repeat)

(0) 미리 알아두기 : 콜백함수(callback function)

- 밑에서 계속 콜백함수에 대한 내용이 나오므로 알아둘 것

- 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말함

- 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있음

- 즉 다른 함수의 인자로써 이용되는 함수 혹은 어떤 이벤트에 의해 호출되어지는 함수

 

(1) map

- 어떤 배열에 있는 모든 요소들의 값을 변경해서 만든 새로운 배열을 써야할 때 사용

- 배열의 값이 많을수록 편리하게 변경할 수 있음

- 콜백 함수를 이용해 각각의 요소에 호출해서 그 값을 변환할 수 있게 해줌

- 콜백 함수는 배열의 각 요소에 실행

- 사용 방법

array.map()

array.map(callbackFunction(value, index, array), this)

• array : 순회하고자 하는 배열
• value : 배열 내의 현재 값
• index : 배열 내 현재 값의 인덱스
• array : 현재 배열
• this : 콜백함수 내에서 this로 사용될 값

- 예시 1 (for문 사용으로 배열 반복 처리)

- [1,2,3,4] 라는 값을 가진 exam이라는 배열의 값을 변환할 때 for문으로 각각의 값 변환 가능

- 각각의 인덱스에 3씩 곱해주면 [3,6,9,12]로 배열의 값이 변경됨

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

for (let i = 0; i < arr.length; i++) {
 arr[i] = arr[i] * 3
}

console.log(arr) // [3,6,9,12]

- 예시 2 (array.map 사용)

- 예시 1번과 똑같은 내용이지만 메서드를 사용함

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

let exam = arr.map(function(element) {
 return element * 3
});

console.log(exam) // [3,6,9,12]

- 예시 3 (객체 타입 컨트롤)

- 아래와 같이 각각 id값과 이름을 가진 객체타입의 변수가 있을 때

let person = [
{id:1, name:"Kim"},
{id:2, name:"lee"},
{id:3, name:"pack"},
{id:4, name:"choi"},
];

- map 함수를 활용해서 이름만 추출할 수 있음

let namelist = person.map(person =>person.name);
console.log(namelist) // ["kim","lee","pack","choi"]

 

(2) filter

- 필터하여 걸러주는 역할을 하는 메서드

- 특정 조건을 만족하는 새로운 배열을 추출하기 위해서 사용

- 값이 존재하는 인덱스에 대해서만 호출되고 삭제 또는 값이 없는 배열을 실행 불가

- 콜백 함수 호출 전에 처리되는 범위가 결정되므로 콜백 함수 호출 후 추가해도 반영되지 않음

- 사용 방법

arr.filter(callback(element, index, array), this)

• array : 순회하고자 하는 배열
• element : 배열 내의 현재 값
• index : 배열 내 현재 값의 인덱스
• array : 현재 배열
• this : 콜백함수 내에서 this로 사용될 값

- 예시 1 (배열 요소에서 특정값 추출하여 반환)

- 3항 연산자를 사용하여 배열의 요소를 2로 나누었을 때 짝수면 true, 아니라면 false을 return

let arr = [1,2,3,4,5,6,7,8];

let exam = arr.filter(function(data) {
 return data % 2 == 0 ? true : false;
});

console.log(exam) // [2,4,6,8]

- 예시 2 (특정 조건을 가진 객체 추출)

- person 배열 내에는 각각의 데이터를 가진 목록이 존재

let person = [
{id:1, age:30, money:1000, name:"Kim"},
{id:2, age:45, money:3000, name:"lee"},
{id:3, age:67, money:8000, name:"pack"},
{id:4, age:21, money:5000, name:"choi"},
];

- 8000원 보다 많거나 같은 금액을 가진 사람을 찾을 때

let richguys = person.filter(guys => guys.money >= 8000)

console.log(richguys); // {id: 3, age: 67, money: 8000, name: 'pack'}

- 30살 이상인 사람을 추출하여 (filter) 이름을 나열하면 (map) 

let oldguys = person.filter(guys => guys.age > 30).map(guys =>guys.name)

console.log(oldguys); // ['lee','pack']

 

(3) reduce

- 배열의 각 요소를 순회하며 콜백 함수의 실행 값을 누적하여 하나의 결과값을 반환하는 것

- 사용 방법

arr.reduce(callback(accumulator, currentValue, index, array), initialValue)

• arr : 순회하고자 하는 배열
• accumulator : 누적되는 값, 콜백 함수의 반환값을 누적
•    initialValue 설정한 경우 : 콜백 함수 최초 호출 시 initialValue의 값으로 초기화
•    initialValue 설정하지 않은 경우 : arr의 0번째 인덱스 값으로 초기화
• currentValue : 현재 배열의 요소
• index : 현재 배열 요소의 인덱스, 생략 가능
• array : reduce 함수를 호출한 배열, 생략 가능
• initialValue : 콜백 함수의 최초 호출시 accumulator 초기값, 생략 가능

- 예시 1 (합 구하기)

- for문을 사용하지 않고 배열 원소들의 합을 구할 수 있음

let sum = [1,2,3,4,5].reduce((acc,curr) => acc + curr, 0);
console.log(sum) // 15

- 예시 2 (최대값 구하기)

let max = [1,2,3,4,5].reduce((max,curr) => Math.max(max,curr), -Infinity);
console.log(max) // 5

 

(4) repeat

- 배열이 아닌 문자열에 대해 지정한 횟수만큼 반복해서 붙인 새로운 문자열을 반환

- 반복 횟수를 소수로 입력해도 자동으로 내림 처리되어 에러 발생하지 않음

- 0보다 작은수 또는 양의 무한대로 지정하면 range error 발생

  - 사용 방법

문자열.repeat(횟수)

- 예시 

'반복 문자열'.repeat(0);    // ''
'반복 문자열'.repeat(1);    // '반복 문자열'
'반복 문자열'.repeat(2);    // '반복 문자열 반복 문자열'
'반복 문자열'.repeat(2.9);  // '반복 문자열 반복 문자열'

'반복 문자열'.repeat(-365);  // RangeError
'반복 문자열'.repeat(1 / 0); // RangeError