27일차 - javascript (배열고차함수, reduce)

배열고차함수

forEach()

• 배열의 요소를 순회, for문과 동일
• 함수형 프로그래밍에 최적화 되어있다. (요즘 메타)

// for문
for (user of userList) {
   console.log(`내 이름은 ${user.userName}이구요~ ${user.address}에 살아요`);
// forEach문
// 한 user씩 꺼내서 그 user의 이름과 주소를 순회
userList.forEach(user => {
  console.log(`내 이름은 ${user.userName}이구요~ ${user.address}에 살아요`);
});
// }

• forEach()의 구조

function myForEach(array, callback) {
  for (const x of array) {
    callback(x);
  }
}

filter()

• 조건에 맞는 배열안의 요소를 필터링

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const filteredArray = numbers.filter(n => n % 3 === 0);
console.log(filteredArray);

map()

• 배열에서 특정 데이터들을 추출해서 새로운배열에 매핑

const mappedUsers = userList.map(user => `${user.age}세`);
console.log(mappedUsers);

filter와 map의 공통점

• b 부분에는 인덱스가 출력

traders
  .map((a, b) => {
    console.log(b);
  })

filter와 map의 차이점

• filter => 10개의 데이터를 필터링하면 10개 이하로 남음
  -> ex) 10명 중 서울사는애들 필터링! -> 3명만 남음
• map => 10개의 데이터를 매핑하면 항상 10개짜리 배열이 나옴
  -> ex) 10명의 회원정보 중 이름정보만 10개 가져와

filter, map 사용할 때 주의사항

• 회원목록에서 회원 이름과 회원의 나이와 회원의 주소를 추출할건데 이름의 키값을 nicknam, 나이는 old, 주소는 addr로 하고싶음
  -> 3가지를 묶어야하므로 객체 사용!
• 객체를 사용할 때 화살표함수를 사용한다면 {}로 묶는 것을 잊어서는 안됨! 그리고 꼭 중괄호를 return이나 ()로 묶어야한다!

const mappedUserList = userList.map(user => {
  return { // return 대신 () 가능
  nickname: user.userName,
  old: user.age,
  addr: user.adde
  }
});

find()

• 처음 발견된 것을 반환

some()

• 배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트

every()

• 배열의 모든 요소가 제공된 함수로 구현된 테스트를 통과하는지 테스트

---

배열고차함수 활용

• 함수형 프로그래밍식 계산 방법 (재사용되지 않는 건 변수에 저장 X)

const appleBasket = [{
  color: 'green',
  sweet: 13
},
{
  color: 'red',
  sweet: 14
},
{
  color: 'red',
  sweet: 11
},
{
  color: 'green',
  sweet: 6
},
{
  color: 'green',
  sweet: 7
},
{
  color: 'green',
  sweet: 9
},
];


/*
  사과중에 녹색이면서 당도가 9이상인 사과만 선별하여 // filtering
  "이 사과는 xx색이며 당도는 xxx입니다"              // mapping
  라는 문자열이 들어있는 배열을 만들어서
  콘솔에 반복출력해주세요.                           // forEach
*/




appleBasket
  .filter(apple => apple.color === 'green' && apple.sweet >= 9)
  .map(apple => {
  const convertedColor = apple.color === 'green' ? '초록' : '빨강';
  return `이 사과는 ${convertedColor}색이며 당도는 ${apple.sweet}입니다.`;
  })
  .forEach(apple => console.log(apple));


console.log('=======================');



const userList = [
  {
    account: "abc1234",
    userName: "대길이",
    job: "추노",
    address: "서울",
    hobbys: ["수영", "축구", "테니스"],
    salary: 5400000,
    age: 35,
  },
  {
    account: "banana",
    userName: "빠나나",
    job: "과일",
    address: "서울",
    hobbys: ["푸드파이팅", "테니스"],
    salary: 9700000,
    age: 18,
  },
  {
    account: "park1234",
    userName: "주차왕",
    job: "발렛파킹",
    address: "경기",
    hobbys: ["족구", "축구", "테니스", "영화감상"],
    salary: 3900000,
    age: 56,
  },
  {
    account: "fire",
    userName: "불꽃남자카리스마",
    job: "게이머",
    address: "서울",
    hobbys: ["독서", "테니스"],
    salary: 7900000,
    age: 42,
  },
];

/*
  회원목록에서 서울에 사는 회원들의
  두번째 취미만 추출하여             // filtering
  'xxx님의 2번째 취미는 xxx입니다'를 // mapping
  반복해서 출력하라                  // forEach
*/

userList
  .filter(user => user.address === '서울')
  // 이름도 뽑아야하므로 객체로
  .map(user => ({name: user.userName, second: user.hobbys[1]})) 
  // result에는 mapping한 name과 second가 들어감
  .forEach(result => console.log(`${result.name}님의 2번째 취미는 ${result.second}입니다.`));