후발대교육 2 - map,foreach,filter,reduce

배열에서 for in은 의미가 없다. for of만 존재할 뿐
다만 조금 더 쉽게 다루기 위해서 map을 이용해보자

• 우선 복습을 먼저 해보자

const testArr = [2, 10, 100, 7, 71, 30, 27, 1];

// 일반적인방법
// for (let i = 0; i < testArr.length; i++) {
//   console.log(testArr[i]);
// }

// for of를 이용한 방법
for (test of testArr) {
  console.log(test);
}

forEach를 해보자. 일반 for문과 똑같음. 하나씩 끄집어내는 것 > for + each
객체(배열)에는 속성과 메서드가 있다. 제일 중요하다. 속성(눈코입)도 메서드(행동)도 . 을 이용해서 접근을 하는데
forEach도 결국, array의 메서드다!
testArr.forEach(매개변수로 함수가 들어간다);

함수를 넣는 방법
함수를 변수에 담아서 넣는 방법

const testFunc = function () {
  console.log("hello");
};

// 이렇게 for Each에 바로 testFunc를 담을 수 있다.
testArr.forEach(testFunc);

• 8개가 출력됨, 즉 배열의 갯수만큼 돈다고 보면 됨

Map 함수

• foreach와 뭐가 다를까?

const testArr = [2, 10, 100, 7, 71, 30, 27, 1];
console.log("original 배열");
console.log(testArr);
// 보통 익명함수를 map, forEach의 매개변수로 넣는다.
// map 함수는 return 한 애들을 모아서 새로운 배열을 만든다.

const mappedArr = testArr.map(function (item) {
  return item * 2;
});

console.log("수정된 배열");
console.log(mappedArr);


original 배열
[
   2, 10, 100, 7,
  71, 30,  27, 1
]
수정된 배열
[
    4, 20, 200, 14,
  142, 60,  54,  2
]

화살표함수

// 화살표햠수
function(){
    return 1
}

() => 1 
둘은 같다.



testArr.forEach((item)=>{
console.log(item)
})
forEach도 이렇게 줄여서 사용이 가능하다.

const mappedArr = testArr.map(function (item) {
  return item * 2;
});
 

const mapedArr = testArr.map((item)=> item*2)

2개가 같음

Filter

map은 무조건 뭘 반환하는 놈임
Filter은 걸러진 값을 반환하는 것임. 따라서 항상 조건이 들어가야한다.

const filterArr = testArr.filter((item) => {
  if (item > 10) {
    return item;
  } else {
    return null;
  }
});

[ 100, 71, 30, 27 ]

const testArr = [2, 10, 100, 7, 71, 30, 27, 1];

// const mappedArr = testArr.map((item) => {});

// filter도 함수가 매개변수로 들어간다
const filterArr = testArr.filter((item) => {
  return item > 30 ? item : null;
    return item > 30 ?? item; 더 줄여보면 item까지 사용하면 됨
  
});

console.log(filterArr);
// 3항 연산자
// 조건 ? true 일 때 : false 일때

reduce

const testArr = [2, 10, 100, 7, 71, 30, 27, 1];
testArr.reduce((acc, cur, idx) => {
  console.log("acc", acc);
  console.log("cur", cur);
  console.log("idx", idx);
  return (acc = acc + cur);
}, 0);

reduce 조금 어려움 다시 살펴봐야 겠다.

reduce는 뭔가를 누적해서 어떤 작업을 한다.
항상 썸이라는게 존재해야한다.

그러면 어디다가 누적을 할거야? -> acc(첫번째 인자)
cur은 배열의 값 하나하나를 말한다.

foreach는 값1개를 사용하지만
reduce는 값 3개를 사용한다는 것
해당 순번에 무슨 값이 나오는지가 중요하다.

• 초기값이 있으면 7번만 돈다. 초기값이 없으면 8번 돈다.
• 초기값이 없으면 배열[0] 이 초기값이 되고, 배열.length -1 만큼만 돈다.
• 애초에 0에다가 2를 더한걸로 시작을 한다.