[Javascript] Array Method(2) - forEach, map, filter

매개변수로 콜백함수가 들어가는 메서드

1) forEach

for문과 동일
(복습) for문을 이용해서 fruits의 모든 값을 console.log하는 방법

let fruits = ["사과", "바나나"];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);

• forEach는 배열의 메서드다.
• 이 배열 메서드는 input(매개변수)를 갖는다.
• 그 매개변수는 함수다(매개변수로 들어오는 함수를 = 콜백함수)
• 그 매개변수로 들어온 함수는 input(매개변수)를 갖는다.
• 그 매개변수에는 호출의 주체가 된 배열의 각 요소가 차례대로 할당된다.
  -> return값을 반환하지 않음.(map/filter 와의 차이점)

예제 1)

let fruits = ["사과", "바나나", "키위"];
fruits.forEach(function (아무이름) {
    console.log(아무이름); // 사과 바나나 키위 ; 배열 안 요소를 하나씩 보여줌
});
-> forEach의 매개변수로 들어간 함수가 배열 fruits의 요소개수만큼 실행됨

예제 2)

const testArr = [
    {
      name: "홍길동",
      age: 21,
    },
    {
      name: "홍길순",
      age: 23,
    },
    {
      name: "김가나",
      age: 40,
    },
  ];

이름만 출력하기

testArr.forEach(function (person) {
        console.log(person.name);
      });

나이가 30살 이상인 경우만 이름을 출력하기

 testArr.forEach(function (person) {
 	if (person.age >= 30) {
 		console.log(person.name);
    };
 });

2) map

: 기존 배열을 가공해서 새로운 배열을 생성함.

• ~값을 맵핑한다.
• 배열의 메서드이다.
• map의 매개변수로 콜백함수를 갖는다.
• return문 반드시 필요! (가공식을 return문에 씀)
• 항상 원본 배열의 길이만큼이 return된다.
  (return문을 쓰지 않으면 undefined가 배열의 개수만큼 return된다.)

(1) 원본배열이 가지고 있었던 길이만큼의 배열을 반환한다.

const 결과값 = testArr.map(function (item) {});
console.log(결과값); // [undefined, undefined, undefined]

(2) return 값에 따라 결과값 변화

const 결과값 = testArr.map(function (item) {
   return 1;
});
console.log(결과값); // [1, 1, 1]

예제 1) 원본 배열 testArr에서 요소의 10배 값의 배열을 나타내도록 표현하는 식을 쓰시오.

const testArr = [3, 1, 2];
const 결과값 = testArr.map(function (item) {
    return item*10;
});
console.log(결과값); // [30, 10, 20]>

예제 2) 나이가 20살 이상인 경우에는 사람의 성인여부 판별

const people = [
    {
      id: 1,
      name: "홍길동",
      age: 30,
    },
    {
      id: 2,
      name: "홍길순",
      age: 15,
    },
    {
      id: 3,
      name: "김가나",
      age: 16,
    },
  ];

const newPeople = people.map(function (person) {
    const newPerson = {
        id: person.id,
        name: person.name,
        age: person.age,
        isAdult: person.age >= 20,
    };
	return newPerson;
});

console.log(newPeople);
[
  { id: 1, name: '홍길동', age: 30, isAdult: true },
  { id: 2, name: '홍길순', age: 15, isAdult: false },
  { id: 3, name: '김가나', age: 16, isAdult: false }
]

예제 3) 배열 testArr의 요소가 name, job이 "tutor"인 객체의 배열로 나타내시오.

const testArr = ["홍길동", "홍길순", "김가나", "박다라"];

(1) 새로운객체 만들기
const newArr = testArr.map(function (이름) {
  const 새로운객체 = {
    name: 이름,
    job: "tutor",
  };
  return 새로운객체;
});
console.log(newArr);

(2) 새로운객체를 바로 return하기
const newArr = testArr.map(function (이름) {  
    return = {
        name: 이름,
        job: "tutor",
    };
  });
  console.log(newArr);

console.log(newArr);
[
  {
    name: "홍길동",
    job: "tutor",
  },
  {
    name: "홍길순",
    job: "tutor",
  },
  {
    name: "김가나",
    job: "tutor",
  },
  {
    name: "박다라",
    job: "tutor",
  },
];

3) filter

• 새로운 배열을 return(반환)하는 배열메서드.
• 원래 배열을 가공하진 못함.
• 특정 조건으로 filter해서 새로운 배열을 생성함.
• true/false 값을 나타낼 수 있는 특정 조건을 return문에 씀.

예제 1) 원본 배열 testArr로부터 10보다 크거나 같은 값을 뽑아내고 싶어요.

const testArr = [30, 10, 25, 7];
const newArr = testArr.filter(function (숫자) {
    return 숫자 >= 10;
});
console.log(newArr); // [30, 10, 25]

예제 2) 나이가 20살 이상인 경우에는 사람의 성인여부 판별

const tutors = [
    {
      name: "홍길동",
      job: "tutor",
    },
    {
      name: "홍길순",
      job: "developer",
    },
    {
      name: "김가나",
      job: "tutor",
    },
    {
      name: "박다라",
      job: "tutor",
    },
 ];

(1) if 조건문을 함수식에 쓰고 return 
const realTutors = tutors.filter(function (튜터) {
    if (튜터.job === "tutor") {
        return true;
    } else {
        return false;
    }
  });
  console.log(realTutors);

(2) return식에 바로 조건 쓰기
const realTutors = tutors.filter(function (튜터) {
    return 튜터.job === "tutor";
});
console.log(realTutors);

console.log(realTutors);
[
  { name: '홍길동', job: 'tutor' },
  { name: '김가나', job: 'tutor' },
  { name: '박다라', job: 'tutor' }
]