프론트엔드 개발일지 #15 - 콜백과 배열02 (filter, some/every,Reduce)

filter

요소로 구성된 배열에서 필터링을 하거나 부분 집합을 모아 새 배열을 만드는데 사용한다.
원본 배열이 바뀌지 않는다.

const nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
const odds = nums.filter(n => {
  return n % 2 === 1;
})
//[9, 7, 3, 5, 1]

const smallNums = nums.filter(n => n < 5);
//[4, 3, 2, 1]
//콜백을 전달해서 이 콜백이 참이나 거짓을 반환해야 한다. 불리언 함수여야한다.
//그 콜백이 true를 반환하면 그 요소는 마지막에 만들어지는 필터링 된 배열에 추가된다.
// 아닌 경우에는 무시

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

numbers.filter(n => {
    return n < 10
})
//[1, 2, 3, 4, 5, 6, 7, 8, 9]

다른 예시를 보게되면,

const movies = [
    {
        title: 'Amadeus',
        score: 99,
        year: 1984
    },
    {
        title: 'Sharknado',
        score: 35,
        year: 2013
    },
    {
        title: '13 Going On 30',
        score: 70,
        year: 2004
    },
    {
        title: 'Stand By Me',
        score: 85,
        year: 1986
    },
    {
        title: 'Waterworld',
        score: 62,
        year: 1995
    },
    {
        title: 'Jingle All The Way',
        score: 71,
        year: 1996
    },
    {
        title: 'Parasite',
        score: 95,
        year: 2019
    },
    {
        title: 'Notting Hill',
        score: 77,
        year: 1999
    },
    {
        title: 'Alien',
        score: 90,
        year: 1979
    }
]
//평점이 높은 영화들로만 배열을 새로 만들어보자
const goodMovie = movies.filter(movie => {
  return movies.score > 80
})

//암묵전 변환
const goodMovie = movies.filter(m => m.score > 80)

// 평점이 낮은 영화들로만 배열을 새로 만들어보자
const badMovie = movies.filter(movie => {
  return movies.score < 70
})

//암묵적 변환
const badMovie = movies.filter(m => m.score < 70)

//최근 영화
const recentMovie = movies.filter(m => m.year > 2000)

원본에서 필터링하고 추려내는 것이라 원본에는 전혀 영향을 주지 않는다.

• map과 filter 결합

const goodMovie = movies.filter(m => m.score > 80)
const goodTitles = goodMovies.map(m > m.title)

//한번에 적어보자
movies 
  .filter(m => m.score > 80) 
  .map(m => m.title)
//한줄로 적어도 괜찮다.

filter 연습

filter 메서드를 사용하는 연습을 해 보겠습니다. 사용자 이름 배열(문자열)을 받는 validUserNames라는 이름의 함수를 작성하세요. 이 함수는 10자 미만의 사용자 이름만 포함하는 새 배열을 반환해야 합니다.

예:

validUserNames(['mark', 'staceysmom1978', 'q29832128238983', 'carrie98', 'MoanaFan']);
// => ["mark", "carrie98", "MoanaFan"]

function validUserNames(arr) {
  return arr.filter(name => name.length < 10);
}

some / every

• every

불리언 메서드라서 참이나 거짓 값을 반환한다. 테스트를 하는 방식.
배열내의 모든 요소가 every를 통해 테스트를 거치는데 일단 함수를 전달하고,
모든 요소가 해당 함수로 전달되어 참을 반환하면 호출된 전체 every함수가 반환된다.

const exams = [80, 98, 92, 78, 77, 90, 89, 84, 81, 77]

exams.every(score => score >= 75)
//모든 요소가 반환된다.

const exams = [80, 98, 92, 78, 70, 90, 89, 84, 81, 77]

exams.every(score => score >= 75)
//하나라도 이 콜백에서 거짓을 반환하면 every 전부가 거짓이된다
//false

• some

요소 중 하나나 일부가 테스트를 통과하는지 본다. 하나 이상의 여부만 확인한다.

const exams = [80, 98, 92, 78, 77, 90, 89, 84, 81, 77]

exams.some(score => score >= 75)
//75점보다 높은 점수가 하나 이상인지 확인한다
// true 반환

다른 예시를 보자면,

const movies = [
    {
        title: 'Amadeus',
        score: 99,
        year: 1984
    },
    {
        title: 'Sharknado',
        score: 35,
        year: 2013
    },
    {
        title: '13 Going On 30',
        score: 70,
        year: 2004
    },
    {
        title: 'Stand By Me',
        score: 85,
        year: 1986
    },
    {
        title: 'Waterworld',
        score: 62,
        year: 1995
    },
    {
        title: 'Jingle All The Way',
        score: 71,
        year: 1996
    },
    {
        title: 'Parasite',
        score: 95,
        year: 2010
    },
    {
        title: 'Notting Hill',
        score: 77,
        year: 1999
    },
    {
        title: 'Alien',
        score: 90,
        year: 1979
    }
]

movies.some(movie => movie.year > 2015)
//true
//한 번 이상의 참이 반환되는지만 보면 됨

some / every 연습

숫자 배열을 단일 인수로 받는 allEvens라는 이름의 함수를 작성하세요. 배열에 포함된 숫자가 모두 짝수인 경우 true를 반환하세요. 그렇지 않으면 false를 반환하세요. 'some' 또는 'every' 메서드를 사용하면 도움이 됩니다. (여기에서 실제로 유용한 것은 둘 중에 하나 뿐입니다.)

allEvens([2,4,6,8]) //true
allEvens([1,4,6,8]) //false
allEvens([1,2,3]) //false

const allEvens = arr => arr.every(num => num % 2 === 0);

Reduce

배열을 가져다가 점차 줄여가면서 마지막에는 결국 하나만 남게 한다.

[3, 5, 7, 9, 11].reduce((accumulator, currentValue) => {
	return accumulator + currentValue;
});

첫번째 매개 변수는 총 합계, 각각의 숫자를 말하는 변수 총 두개의 매개변수를 사용하는데,
ccumulator + currentValue의 변환 값을 다음 값과 또 +해서 계속 변환값을 만들어 하나만 남게한다.

예를 들자면,

const prices = [9.99, 1.50, 19.99, 49.99, 30.50];

//reduce를 사용하지않으면,
for (let price of prices) {
  total += price
}
console.log(total);

//reduce를 사용하면
const total = prices.reduce((total, price) => {
  return total + price
})

//암시적 변환을 사용하면
const prices = prices.reduce((total, price) => total + price)

//더하기 말고도 어떤 연산이든 가능하다. 
//배열 내에서 최대값을 찾거나 최소값을 찾는 코드도 가능하다.

prices.reduce((min, price) => {
  if (price < min) {
    return price;
  }
  return min;
})

다른 예시를 보자면

const movies = [
    {
        title: 'Amadeus',
        score: 99,
        year: 1984
    },
    {
        title: 'Sharknado',
        score: 35,
        year: 2013
    },
    {
        title: '13 Going On 30',
        score: 70,
        year: 2004
    },
    {
        title: 'Stand By Me',
        score: 85,
        year: 1986
    },
    {
        title: 'Waterworld',
        score: 62,
        year: 1995
    },
    {
        title: 'Jingle All The Way',
        score: 71,
        year: 1996
    },
    {
        title: 'Parasite',
        score: 95,
        year: 2019
    },
    {
        title: 'Notting Hill',
        score: 77,
        year: 1999
    },
    {
        title: 'Alien',
        score: 90,
        year: 1979
    }
]

const highestRated= movies.reduce((bestMovie, currMovie) => {
  if (currMovie.score > bestMovie.score) {
    return currMovie;
  }
  return bestMovie;
})

무조건 연산을 통해 줄여나가다가 하나의 값만 남기는 것만이 아니다.여기처럼 비교를 하거나 또는 더하기나 곱하기를 통해 작동한다. 결국 줄여나가다가 하나를 남기는건 맞다.

accumulator 매개 변수에 대해서 시작하는 초기 포인트도 지정 할 수 있다.

const evens = [2, 4. 6, 8];
evens.reduce((sum, num) => sum + num, 100)

이렇게 120이 반환된다. 초기 값을 지정 할 수 있다.