[Front-end] 개발자 공부

[개발 공부 89일차] 함수형 코딩 | 일급 함수 II

MOLLY_ 2024. 8. 28. 20:04
728x90

< 목차 >

[들어가며] 알아둬야 할 개념

0. TL;DR

1. 카피-온-라이트 리팩토링

2. 함수를 return 하는 함수

 

 

일급 함수에 대해 알아보자

 

[들어가며] 알아둬야 할 개념

  • 일급 함수: 함수가 다른 데이터 타입(숫자, 문자열 등)과 동일하게 취급되는 것
    ⇒ 함수를 변수에 할당하거나, 함수의 인자로 전달, 함수에서 반환할 수 있는 함수를 의미. 자바스크립트에서 함수는 일급 객체다.
  • 고차 함수: 함수를 인자로 받거나 함수를 반환하는 함수

[차이점] 일급은 인자로 ‘전달’할 수 있음. 고차는 함수가 다른 함수를 인자로 ‘받을’ 수 있음

 

 

0. TL;DR

  1. 고차 함수 사용 시, 장점
    • 패턴 or 원칙을 코드로 만들 수 있음중복된 많은 코드를 없애줌 (사용하지 않으면 일일이 수작업 해야 함)
    • 함수를 리턴하는 함수를 만들 수 있음
  2. 단점: 가독성이 안 좋을 수 있음

 

 

1. 카피-온-라이트 리팩토링

카피-온-라이트 단계는 다음과 같다.

  1. 복사본 생성 ⇒ 👾 중복됨!
  2. 복사본 변경 ⇒ 달라지는 부분 (본문에 해당)
  3. 복사본 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