wldnswldnswl / IknowJS

You Don't Know JS 스터디
1 stars 1 forks source link

[쏙쏙] 14장. 중첩된 데이터에 함수형 도구 사용하기 #177

Closed wldnswldnswl closed 10 months ago

wldnswldnswl commented 10 months ago

14장에서 다루는 내용

함수의 동작을 빼서 리팩토링

ex) 함수에 동작명명이 있고, +,-,*,/ 같은 동작을 제외하고는 중복된 코드이다.

image

update 도출하기

공통인 앞부분,뒷부분을 공통으로 빼고, 동작만 콜백으로 넘겨준다.

image

-> 이제 특정 필드를 바꾸는 함수가 아니기 때문에 일반적인 이름으로 바꾼다.

image

update는 객체에 있는 값을 바꾼다. 바꾸려는 객체와 키, 바꾸는 동작을 함수로 넘기면 된다.

ex) 객체(해시맵)의 값 바꾸기

image

*원본을 바꾸는게 아니고, 카피-온-라이트 원칙으로 해시맵의 복사본을 변경해서 리턴한다.

중첩된 데이터(객체안의 객체)에서의 update 동작

image

중첩된 값을 조회, 변경하기 위해 2번의 조회, 2번의 설정(update를 위해 객체의 값을 변경하는것이라고 이해) 이루어진다. -> 복사본이 2개 생김

리팩토링

2) 2번 리팩토링

image

-> 조회, 변경(update메서드), 설정이 남아있으므로 한번더 메서드로 리팩토링. 콜백함수안에서 update메서드를 호출한다. -> 객체가 중첩된만큼 update를 부른다!

리팩토링 요소: 암묵적인자

increment, size 둘다 함수 이름에 있다.

image

여전히 'options'라는 키값이 함수의 이름에서 사용되고 있다.(update'Option')

update2 도출

image

함수명을 일반적으로 바꿨다. -> update2에서 2는 2번 중첩되었다는 의미이고, key도 2개 필요하다.

[결과]

image

데이터가 2번보다 더 중첩된 구조라면?

ex) 장바구니안에 셔츠가 있다.

image

[일반적인(재사용가능한)메서드로 만들기 위한 시도들]

image

아래로 갈수록 더 리팩토링 요소가 있는 일반적인 메서드이지만.. 어쨌뜬 key값이 바뀌거나, depth가 추가되면 수정해야하는 요소들이 있다.

update3 도출

image

-> update안에 update2를 중첩한 형태.

nestedUpdate(도출)

updateX인경우, 상위에서 update메서드 호출& 콜백으로 updateX-1을 호출하는 형태 X-1을 명시적 인자로 바꾸기 위해 depth라는 인자를 추가한다.

image image

*modify는 마지막 depth까지 내려왔을때 적용한다. update0은 재귀호출은 없고 key값을 '변경'하는 행위만 있다.

image

-> 메서드명을 nestedUpdate로 변경하면 더 일반적

안전한 재귀 사용법

  1. 종료조건을 명시
  2. 재귀 함수는 최소 하나의 재귀 호출이 있어야한다.
  3. 종료 조건에 다가가기. 재귀가 한단계 진행될수록 종료조건에 가까워져야한다. 그렇지 않으면 무한루프에 빠질가능성이 있다. ex) 종료조건이 빈 배열이라면, 각 단계에서 배열 항목을 없애야 한다.

중첩된 데이터 구조 처리에 재귀 함수가 적합한 이유

깊이 중첩된 구조를 설계할때 주의할점

p386처럼 긴 키 경로를 받는것은 API에 대한 이해가 있어야한다. 최대한 메서드로 나누어서 메서드를 사용하기 위해 기억야할것/알아야할것을 줄이고, 명확한 메서드 이름을 사용해 데이터/API 구조를 메서드명만으로 알수있도록 한다. (p387 예시)

배운 고차함수들 정리

  1. forEach(), map(), filter(), reduce(): 배열을 반복할때 for반복문대신 활용
  2. nestedUpdate(): 중첩된 데이터는 재귀로 다루기
  3. withObjectCopy(): 카피-온-라이트 원칙 적용하기
  4. wrapLogging(): 에러가 발생하면 잡아서 로그를 남기는 함수. try-catch 로깅 규칙을 코드화.