forEach, map, filter_240423

Sseul·2024년 4월 23일

TIL

목록 보기

7/17

🎉 오늘 한 일

☑️ JS 문법 종합반 1주차 복습
☑️ JS 문법 종합반 2주차 수강
☑️ 튜터님과 과제관련 상담
☑️ 과제 뼈대잡기. UI 레퍼런스 서칭

💡 새로 알게 된 것

배열 종류 : forEach, map, filter

1) 매개 변수 자리에 함수를 넣는 것

ex) 5개의 요소가 있는데 작업을 명시하기 위해 함수를 만들어 준다.
여기서 함수 수행하기 위해 forEach 필요하다.

let numbers = [1, 2, 3, 4, 5];

numbers.forEach(매개변수 자리 : input.
여기에 어떤 값을 넣어주는데 함수를 넣어줌)

⇒ 함수형태 : function (){} 이렇게 된다.
즉, 매개 변수 자리에 함수를 넣는 것 : 콜백 함수라고 함!!!

⇒ foreach는 별도로 이 함수에서 리턴하거나 이런 값은 없음. 그냥 이 안이 실행되게 하는 역할을 함!

2) map : 항상 원본 배열의 길이만큼 return 된다

반드시 return문 가져야 함
why ? 기존에 있었던 이 배열을 가공해서 새로운 배열을 생산해 내는 역할을 하는게 map이 하는 역할이기 때문
map을 거치고 나면 반드시 새로운 배열이 튀어나옴!!

numbers.map(funtion (item) {
    return ;
});

그래서 새로운 배열을 받아야 함.
아래와 같이 let newNumbers로!!

let newNumbers = numbers.map(funtion (item) {
    return item * 2;
});

console.log(newNumbers);

⇒ 출력값 : 4,1,5,4,5인데 map으로 돌리면서 한개 한개 요소씩 곱하기 2를 한 값을 리턴을 해주니까 [8, 2, 10, 8, 10]이 된다.
그래서 newNumbers는 아이템에 각각 두 배를 한 값들이 리턴이 됐다라고 보면 됨!

⇒ 여기서 중요한건 map은 항상 원본 배열의 길이만큼 return이 된다.
만약 return이 없다면?

⇒ 출력값 :
[undefined,undefined,undefined,undefined,undefined]로 채워짐
리턴을 안하더라도 무조건 개수만큼은 리턴이 된다!

3) filter

map은 return에 가공한 값이 들어가지만 filter의 return은 조건이 들어간다!!

어떤 조건? 4, 1, 5, 4, 5 중에서 필터링 할 그 조건이 들어가게 됨!

numbers.filter(function () {
});

ex) 아이템이 5다 이런 조건들이 들어가게 되는데 여기서 5인것만을 뽑아내라
마찬가지로 새로운 배열을 리턴하기 때문에 filterNumbers로 다시 받게 된다면?
map은 무조건 원본 배열의 길이만큼 리턴했지만 filter는 이 조건에 해당되는 것만 리턴한다!

let numbers = [4, 1, 5, 4, 5];


let filterNumbers = numbers.filter(function (item) {
    return item === 5;
}); // [5, 5]

🤔 하루 돌아보기

아직 과제도 머릿속에 그려지지 않고, 강의만으로는 답이 떠오르지 않아 튜터님께 무작정 찾아갔다..
튜터님께서 먼저 뼈대부터 잡고, 레이아웃 잡고, 코드를 쳐나가는 방식으로 하는데 가장 중요한 포인트를 알려주셨다. 만약 문제가 봉착했을 때 일반 지식으로 가설을 세워서 실험을 하고 그런 과정을 경험해 본 후 설명까지 해야 실력이 늘 것이란 조언을 해주셨다.
좀 더 공부에 대한 방향성을 깨닫게 되는 하루였다.