TIL_230616 | 복습하는 날

오늘은 뭔가 사우나를 가서 피로를 풀고싶은 날..

---

 

오늘 공부한 키워드 (스쳐도 공부..한거다)

---

# Array.reduce()

 

  

 

기억하고 싶은 내용

---

❤️  Array.reduce(callback(acc, cur))

※  기본형태

arr.reduce(callback(accumulator, currentValue, index, array), initialValue)

---

🧩  arr
       ◦  순회하고자 하는 배열

🧩  accumulator
       ◦  누적되는 값
       ◦  callback함수의 반환값을 누적
       ◦  initialValue를 설정한 경우 callback의 최초 호출시 initialValue로 값 초기화
           (ㄴ currentValue로 arr의 0번째 index값부터 시작)
       ◦  initialValue가 없을 경우 arr의 0번째 index값으로 초기화
           (ㄴ currentValue로 arr의 1번째 index값부터 시작)

🧩  currentValue
       ◦  현재 배열의 요소

🧩  index(생략 가능) ??
       ◦  현재 배열 요소의 index ??

🧩  array(생략 가능)
       ◦  reduce함수를 호출한 배열(원본 배열)

🧩  initialValue(생략 가능)
       ◦  callback의 최초 호출시 accumulator 초기값

 

※ Array.reduce() 메서드를 다양한 곳에 활용할 수 있다 !!!

📌  filter  +  map  조합을 reduce 하나로 구현

[4,7,9,12,18]
    .filter(val => val % 2 === 0)
    .map(val => val * 10);  // [40, 120, 180]
    
 // 루프 한 번에 filter, map 완료
[4,7,9,12,18].reduce((acc, val) => {
    if (val % 2 === 0) {
    	acc.push(val * 10)	
    } 
    return acc;
}, []);​

reduce 초기값을 빈 배열로 주고, 콜백함수에 '조건문with push()' 을 사용하여 filter한 것과 같은 효과를 줬다! 오!

📌  ㄴ 아래 reference 인파님 블로그에 좋은 활용예시 많아서 !! 꼭 다시 가서 공부하기

📌  아래 reference zeroxho에 비동기 프로그래밍할 때도 유용한 경우를 예시로 들어주고 있다!

 

 

※  reference

인파 | "[JS] reduce 고차함수"
DevStory | "[JS] reduce함수 사용 방법"
teo_ryu  |  "[JS] reduce함수와 싸우기"
zeroxho  |  "map, reduce 활용하기"

miiingo  |  "[JS] | Array.reduce() 사용방법 정리"    <= reduce() 쉽게 잘 설명되어있는듯! (기본개념)

 

 

 

학우분이 만든 todoList로 코드 보며 공부하기

---

[첫번째 학우분  :  진철님 --> github todolist repo ]

🧡   로컬스토리지 사용방법 구경하기        --- ing

Local Stroage는 개발자도구 → Application탭 → Storage 에서 볼 수 있다!

아하 로컬스토리지라는 거 네이버에서도 사용하고 있구나? 그럼 공부해놓아야겠당..

선발대 숙제가 로컬 스토리지 활용해보는 거라고 해서 한번 구경해보는데

개발자 도구는 다양한 걸 보여준다는 걸.... 다시 한번 깨닫는다

네이버 로컬스토리지

 

 

🧡   id값 설정방법 

기존에 내가 id를 부여해주었던 방법은 '정보 list 배열 길이의 마지막번호 + 1'과 같은 방식으로 부여를 해주고 있었다. 근데 이 방법을 썼더니 'card 3개 생성 -> 중간card 삭제 -> 새 card 생성 -> 중간 card삭제'시 두번재, 세번째 id가 동일하게 되어 둘다 함께 삭제되는 문제가 발생해서. new Date로 id 값을 주었는데, 진철님 id 설정한 걸 보니 일반 숫자로 되었고, 순차적으로 번호가 매겨지는 것을 확인할 수 있었다. 어떤 방법을..썼는지 보러 가본다

 

 

 

[두번째 학우분  : ]

 

 

 

 

 

느낀점

코드리뷰를 떵으로 했다... 주말에 연습해서 떵이 되지 말쟈... 힝