코드냄새 하나와 리팩터링 두개

• 함수 이름에 있는 암묵적 인자
• 리팩터링 1. : 암묵적 인자 드러내기
  • 함수 이름에 있는 암묵적 인자를 확인하여, 명시적인 인자로 바꾼다.
• 리팩터링 2. : 함수 본문을 콜백으로 바꾸기
  • 고차 함수로 바꾸고 함수를 인자로 받는다.

// 기존 함수
function arraySet(array, idx, value) {
  const copy = [...array]
  copy[idx] = value
  return copy
}

// 리팩토링
function arraySet(array, idx, value) {
  return withArrayCopy(array, (copyArray) => {
    copyArray[idx] = value
  })
}

// 카피 온 라이트에 대한 함수 재사용 가능함!!!!
function withArrayCopy(array, callBackFunc) {
  const copy = [...array]
  callBackFunc(copy)
  return copy
}

// 배열을 직접 변경하는 고성능 정렬함수
const sortedArray = withArrayCopy(array, (copyArray) => SuperSorter.sort(copyArray))

• withArrayCopy라는 함수는 재사용이 가능해 졌다!!!

함수를 return 하는 함수 (HOC)

• 함수를 return 하는 함수는 팩토리이다.
• 슈퍼 파워를 만들어 주는 함수.

// 기존 코드
try{
 saveUserData(user);
}catch(err){
	logToSnapErrors(err);
}

try{
	fetchProduct(productId);
}catch(err){
	logToSnapErrors(err);
}

• try - catch안에 실행하는 함수만 다른데 이렇게 try, catch를 계속 써줘야하는가?;;;
• 함수를 받게 고차함수를 만들고, 실제 함수를 넘긴다.

function withLogging(callBackFunc){
	try{
		callbackFunc()
	}catch(err){
		logToSnapErrors(err);
	}
}

withLogging(()=> saveUserData(user));

• 여전히 두가지 문제가 있다?!
  1. 어떤 부분에 로그를 남기는 것을 깜빡할 수 있다.
  2. 모든 코드에 수동으로 withLogging()함수를 적용해야한다.

function saveUserDataWithLogging(user){
	try {
	// 그냥 유저데이터를 저장하는 함수
	saveUserDataNoLogging(user);
} catch(error){
	logToSnapErrors(error);
	}
}

function fetchProductWithLogging(productId){
	try {
	// 그냥 유저데이터를 저장하는 함수
	fetchProductNoLogging(productId);
} catch(error){
	logToSnapErrors(error);
	}
}

function wrapLogging(callBackFunc){
 // 함수자체를 return 함으로써 슈퍼파워 함수가 되었다.
	return function(arg){
		try{
			callBackFunc(arg);
		} catch(error){
			logToSnapErrors(error);
		}
	}
}

const saveUserDataWithLogging = wrapLogging(saveUserDataNoLogging);

• 함수를 return 하는 고차함수는 상황에 맞게 써야한다.

<aside> 💡 데이터 파싱??? : 데이터를 원하는 형태는 작업.

</aside>

요점 정리