[JS] Array method

메소드 동작 순서도
bblog tistory
dongmin님 medium

Array method 동작

콜백 함수를 통해 각 요소에 대한 정보를 주는 것이다. 배열의 요소의 개수에 따라 콜백함수가 호출된다.

---

map

• 요소들을 일괄적으로 변경한다.
• 콜백 함수의 리턴을 모아서 새로운 배열을 만드는 것이 목적이다.

let arr = [1, 2, 3, 4, 5];
arr.map(function(num) {
  return num * 2
});
console.log(arr) // [2, 4, 6, 8, 10]

let greeting = ['hi', 'hello', 'hola'];
let greeting2 = arr.map(function(str) {
  return str.length;
});

console.log(greeting2) // [2, 5, 4]

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
return arr.map((ele) => ele % 2 ? 'odd' : 'even');
//  숫자인 경우 결과값이 0이 아닌 경우 모두 true, 0이면 false가 됨

// ["odd", "even", "odd", "even", "odd", "even", "odd", "even", "odd", "even"]

// [reduce 를 이용하여 똑같은 기능 구현하기]
return arr.reduce((acc, curr) => {
	acc.push(curr % 2 ? 'odd' : 'even') 
	return acc;
	}, [])
// ["odd", "even", "odd", "even", "odd", "even", "odd", "even", "odd", "even"]

콜백 함수만 봐서는 이 콜백 함수가 하는 일을 모두 다 알 수 없다. map은 부모 스코프 영역을 건드리지 않고 콜백 함수만을 목적으로 달성한다.

---

filter

• 요소들을 조건에 맞게 걸러준다.
• 콜백 함수의 리턴은boolean을 가진다. 리턴이 true인 요소들만 모아서 새로운 배열을 만든다. 만족하는 요소가 없다면 빈배열을 반환한다.

< filter 로 5의 배수 거르기 >

let arr = [1,3,4,7,8,10,100,500];
let arr2 = arr.filter(function(el) {
    return el % 5 === 0
})
console.log(arr2) // [10, 100, 500]

<filter 로 빈 문자열 걸러내기 >

let arr = ['As', 'I', '', 'am'];
// [반복문]
  for(let el of arr) {
    if(el === ''){
      continue;
    }
    
// [filter]
  arr.filter((el) => el !== '')

---

find

• filter와 비슷하지만 단 하나의 요소만 리턴한다.
• 콜백 함수의 리턴이 true인 요소를 찾을 때까지 반복하다가 찾으면 바로 함수를 종료시킨다.

let arr = [1,3,4,7,8,10,100,500];
let arr2 = arr.find(function(el) {
    return el % 5 === 0
});
console.log(arr2) // 10

---

reduce

• 위의 메소드들을 다 대체할 수 있는 유연한 메소드이다.
• map, filter, find로 구현할 수 있다면, reduce로도 구현 가능하다.

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce(function(acc, curr) {
    return acc + curr;
});
console.log(sum) // 15

초기값을 설정하지 않았기 때문에 초기값은 arr[0]이 들어온다. 그러므로 콜백 함수가 호출된 2, 3, 4, 5에 대한 콜백 함수의 총 횟수는 4번이다.

< reduce로 각 요소에 2를 곱한 수로 이루어진 새 배열 만들기 >

let arr = [1, 2, 3, 4, 5]
let arr2 = arr.reduce(function(prev, curr) {
    prev.push(curr * 2);
    return prev;
}, [])
console.log(arr2) // [2, 4, 6, 8, 10]

< reduce로 5의 배수로 이루어진 새 배열 만들기 >

let five = [1, 3, 5, 7, 9, 10, 45, 50]
let collection = five.reduce(function(prev, curr) {
    if(curr % 5 === 0) {
        prev.push(curr);
    }
    return prev
});
console.log(collection) // [5, 10, 45, 50]

< reduce로 5의 배수인 요소 하나 찾기 >

let five = [1,3,5,7,10,15, 50, 45];
let findOne = five.reduce(function(prev, curr) {
    if(curr % 5 === 0 && typeof prev === 'undefined') {
        prev = curr;
    }
    return prev;
}, undefined);

console.log(findOne) // 5

< reduce로 요소의 반복 횟수 객체로 만들기 >

let arr = ['if','you','like','it', 'then', 'i','like', 'it']

return arr.reduce(function(frequency, word) {
    if(frequency[word] === undefined) {
        frequency[word] = 1;
    } else {
        frequency[word] += 1;
    }
    return frequency;
},{})

// {if: 1, you: 1, like: 2, it: 2, then: 1, i : 1}

<reduce 로 가장 긴 문자열 찾기>

let longest = arr.reduce(
    function (a, b) {
        return a.length > b.length ? a : b;
    }
);

<reduce 중간에 반환하는 방법 - splice !!>

const array = ['9', '91', '95', '96', '99'];
const x = array
.reduce((acc, curr, i, arr) => {
    if(i === 2) arr.splice(1);  // eject early
    return acc += curr;
  }, '');
console.log('x: ', x); 
// x:  99195