[wesbos30] 04. Array 메서드 활용 1

💡 Array 메서드를 배워보자 1탄

배워야 할 메서드 목록

1. array.filter()
2. array.map()
3. array.sort()
4. array.reduce()

---

주어진 배열

const inventors = [
  { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
  { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
  { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
  { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
  { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
  { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
  { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
  { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
  { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
  { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
  { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
  { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 },
]

const people = [
  'Bernhard, Sandra',
  'Bethea, Erin',
  'Becker, Carl',
  'Bentsen, Lloyd',
  'Beckett, Samuel',
  'Blake, William',
  'Berger, Ric',
  'Beddoes, Mick',
  'Beethoven, Ludwig',
  'Belloc, Hilaire',
  'Begin, Menachem',
  'Bellow, Saul',
  'Benchley, Robert',
  'Blair, Robert',
  'Benenson, Peter',
  'Benjamin, Walter',
  'Berlin, Irving',
  'Benn, Tony',
  'Benson, Leana',
  'Bent, Silas',
  'Berle, Milton',
  'Berry, Halle',
  'Biko, Steve',
  'Beck, Glenn',
  'Bergman, Ingmar',
  'Black, Elk',
  'Berio, Luciano',
  'Berne, Eric',
  'Berra, Yogi',
  'Berry, Wendell',
  'Bevan, Aneurin',
  'Ben-Gurion, David',
  'Bevel, Ken',
  'Biden, Joseph',
  'Bennington, Chester',
  'Bierce, Ambrose',
  'Billings, Josh',
  'Birrell, Augustine',
  'Blair, Tony',
  'Beecher, Henry',
  'Biondo, Frank',
]

1. filter()

const fifteen = inventors.filter(
  inventor => inventor.year >= 1500 && inventor.year < 1600,
)
// filter 안의 inventor는 그냥 의미에 맞춰서 쓴거고 아무 글자로 대체가능

console.table(fifteen)

주어진 조건으로 요소 하나하나에 테스트를 진행하여 그 테스트를 통과하는 요소들만 모아서 새로운 배열로 반환한다.

2. map()

const fullNames = inventors.map(
  inventor => `${inventor.first} ${inventor.last}`,
)
// inventor => `${inventor.first} ${inventor.last}`
// 이것과
// inventor => inventor.first + '' + inventor.last는 같다
console.log(fullNames)

const bornDead = inventors.map(life => `${life.year}~${life.passed}`)

console.log(bornDead)

배열 내의 모든 요소 각각에 대해 주어진 조건을 한번씩 순서대로 실행한 결과를 모아 새로운 배열을 반환한다.

3. sort()

const ordered = inventors.sort((a, b) => (a.year > b.year ? 1 : -1))

console.table(ordered)

배열의 요소를 정렬하여 반환하는 메서드이다. 함수로 정렬 순서를 판단하며, 함수가 주어지지 않으면 기본 정렬 순서를 따른다. 요소를 문자열로 변환 후, 유니코드 값 순서대로 정렬된다. 주의할 점은 숫자도 문자열로 변환되기 때문에 9보다 80이 앞에 온다.

4. reduce()

const totalYears = inventors.reduce((total, inventor) => {
  return total + (inventor.passed - inventor.year)
}, 0)

console.log(totalYears)

reduce()로 map(), filter() 등을 구현할 수 있어 가장 활용도가 높은 메서드이다. initialValue를 통해 반환 값을 자유롭게 지정할 수 있어 유연한 사용이 가능하다.

배열의 각 요소에 대해 callback을 실행해 하나의 결과값 (누적 계산 결과값)을 반환하여 reduce라고 이름 붙었다.

배열 요소들의 전체 합, 최대값, 개수 세기 등을 할 수 있다.