728x90
< 목차 >
[들어가며] 알아둬야 할 개념
0. TL;DR
1. 카피-온-라이트 리팩토링
2. 함수를 return 하는 함수
[들어가며] 알아둬야 할 개념
- 일급 함수: 함수가 다른 데이터 타입(숫자, 문자열 등)과 동일하게 취급되는 것
⇒ 함수를 변수에 할당하거나, 함수의 인자로 전달, 함수에서 반환할 수 있는 함수를 의미. 자바스크립트에서 함수는 일급 객체다. - 고차 함수: 함수를 인자로 받거나 함수를 반환하는 함수
[차이점] 일급은 인자로 ‘전달’할 수 있음. 고차는 함수가 다른 함수를 인자로 ‘받을’ 수 있음
0. TL;DR
- 고차 함수 사용 시, 장점
- 패턴 or 원칙을 코드로 만들 수 있음 ⇒ 중복된 많은 코드를 없애줌 (사용하지 않으면 일일이 수작업 해야 함)
- 함수를 리턴하는 함수를 만들 수 있음
- 단점: 가독성이 안 좋을 수 있음
1. 카피-온-라이트 리팩토링
카피-온-라이트 단계는 다음과 같다.
- 복사본 생성 ⇒ 👾 중복됨!
- 복사본 변경 ⇒ 달라지는 부분 (본문에 해당)
- 복사본 return ⇒ 👾 중복됨!
수정 전 코드
function arraySet (array, idx, value) {
let copy = array.slice(); // 중복돼서 따로 빼낼 부분
copy[idx] = value;
return copy;
}
function dropLast (array) {
let arrayCopy = array.slice();
arrayCopy.pop();
return arrayCopy;
}
function push (array, elem) {
let copy = array.slice();
copy.push(elem);
return copy;
}
function dropFirst (array) {
let arrayCopy = array.slice();
arrayCopy.shift();
return arrayCopy;
}
리팩토링 후
function arraySet (array, idx, value) {
return withArrayCopy(array, function (copy) {
copy[idx] = value; // 중복되지 않는 부분은 함수로 감쌈 (익명함수)
});
}
// 카피-온-라이트 원칙을 따르고 재사용 가능한 함수
function withArrayCopy (array, modify) {
let copy = array.slice(); // 중복되는 부분은 따로 빼냄
modify(copy);
return copy;
}
2. 함수를 return 하는 함수
중복된 try ~ catch 구문은 없앴지만, 여전히 모든 코드에서 withLogging()을 사용 중이다. withLogging()을 자동으로 적용해 보자.
수정 전 코드
try {
saveUserdata(user); // 다른 부분
} catch (error) {
logToSnapErrors(error);
}
try {
fetchProduct(productId); // 다른 부분
} catch (error) {
logToSnapErrors(error);
}
리팩토링 후
함수 본문을 콜백으로 바꾸는 방법을 사용하자. 콜백 인자를 추가하는 대신, 이 함수를 새로운 함수로 감싸면 된다.
// 1
function (arg) {
try {
saveUserDataNoLogging(arg);
} catch (error) {
logToSnapErrors(error);
}
}
// [2] return 값을 변수에 할당해, 이름 붙임
// 로그를 남기지 않는 함수를 반환하기 위해 wrapLogging() 함수 부름
let saveUserDataNoLogging = wrapLogging(saveUserDataNoLogging);
// 3
function wrapLogging (f) { // 함수를 인자로 받음
return function (arg) { // 함수로 감쌌기 때문에 나중에 실행됨
try {
f(arg);
} catch (error) {
logToSnapErrors(error);
}
}
}
728x90
'[Front-end] 개발자 공부' 카테고리의 다른 글
[개발 공부 98일차] 함수형 코딩 | 타임라인 다이어그램 (0) | 2024.09.21 |
---|---|
[개발 공부 94일차] 함수형 코딩 | 함수형 도구 체이닝 (10) | 2024.09.04 |
[개발 공부 88일차] 함수형 코딩 | 계층형 설계 II (0) | 2024.08.26 |
[프로그래머스 Lv.2] 피보나치 수 | 개념 및 풀이 (JS) (0) | 2024.08.20 |
[개발 공부 87일차] replace(), JWT, 유닛 테스트와 에러 모니터링 (0) | 2024.08.20 |