Chapter 02: 1급 함수(First Class Functions)
간단 복습
'함수가 1급(First Class)이다'라는 표현은 함수를 다른 데이터 타입과 동일하게 취급할 수 있음을 의미합니다. 함수를 배열에 저장하거나 파라미터로 전달하고, 변수에 할당하는 등 특별한 제약 없이 자유롭게 사용할 수 있습니다.
이는 자바스크립트 기본 개념이지만, GitHub 코드 검색 결과 집단적 회피 혹은 이 개념에 대한 광범위한 무지를 확인할 수 있습니다. 간단한 예시를 통해 알아보겠습니다.
const hi = name => `Hi ${name}`;
const greeting = name => hi(name);greeting 함수 내부의 hi 함수 래핑은 완전히 불필요합니다. 왜냐하면 자바스크립트에서 함수는 호출 가능한 객체입니다. ()가 붙으면 실행되고 값이 반환되며, 붙지 않으면 함수 자체가 반환됩니다. 직접 확인해 보시기 바랍니다:
hi; // name => `Hi ${name}`
hi("jonas"); // "Hi jonas"greeting은 단순히 hi를 동일 인자로 호출하므로 다음과 같이 작성 가능합니다:
const greeting = hi;
greeting("times"); // "Hi times"단일 인자를 받는 함수 hi를 왜 완전히 똑같은 빌어먹을 인자로 호출하는 또 다른 함수로 감쌀 필요가 있을까요? 이는 완전히 불필요한 작업입니다. 7월 한여름에 두꺼운 패딩을 입고 에어컨을 틀어대는 것과 마찬가지입니다.
평가 시점을 지연시키기 위해 함수를 또 다른 함수로 감싸는 것은 장황할 뿐만 아니라 유지보수에 악영향을 미칩니다(곧 설명할 추상화 누수 문제와 관련이 있습니다).
본 개념을 완전히 이해하기 위해 npm 패키지 라이브러리에서 발견한 추가 사례들을 살펴보겠습니다.
// ignorant
const getServerStuff = callback => ajaxCall(json => callback(json));
// enlightened
const getServerStuff = ajaxCall;다음은 흔히 볼 수 있는 AJAX 코드입니다. 다음 두 사례가 동등한 이유는 다음과 같습니다:
// this line
ajaxCall(json => callback(json));
// is the same as this line
ajaxCall(callback);
// so refactor getServerStuff
const getServerStuff = callback => ajaxCall(callback);
// ...which is equivalent to this
const getServerStuff = ajaxCall; // <-- look mum, no ()'s이것이 올바른 구현 방식입니다. 제가 왜 이토록 집요하게 설명하는지 다시 한번 이해해 봅시다.
const BlogController = {
index(posts) { return Views.index(posts); },
show(post) { return Views.show(post); },
create(attrs) { return Db.create(attrs); },
update(post, attrs) { return Db.update(post, attrs); },
destroy(post) { return Db.destroy(post); },
};이 BlogController는 99%가 불필요한 코드입니다. 다음과 같이 재작성할 수 있습니다:
const BlogController = {
index: Views.index,
show: Views.show,
create: Db.create,
update: Db.update,
destroy: Db.destroy,
};...혹은 View와 Db를 묶는 역할만 하는 이 컨트롤러를 완전히 제거할 수도 있습니다.
1급 함수 사용을 권장하는 이유
getServerStuff와 BlogController 예시에서 보았듯이, 추가 가치 없이 간접 계층을 도입하면 중복 코드 양만 증가시켜 유지보수와 검색을 어렵게 만듭니다.
또한 불필요하게 래핑된 함수를 수정해야 할 경우, 래퍼 함수도 동시에 수정해야 하는 부담이 생깁니다.
httpGet('/post/2', json => renderPost(json));httpGet이 err 전송 방식으로 변경되면, 우리는 이 '접착' 레이어도 함께 수정해야 합니다.
// go back to every httpGet call in the application and explicitly pass err along.
httpGet('/post/2', (json, err) => renderPost(json, err));1급 함수로 작성했다면 변경 범위가 훨씬 줄어듭니다:
// renderPost is called from within httpGet with however many arguments it wants
httpGet('/post/2', renderPost);불필요한 함수 제거 외에도 인자 명명과 참조 문제를 고려해야 합니다. 특히 코드베이스가 오래되고 요구사항이 변경될수록 잘못된 명명으로 인한 혼란이 발생하기 쉽습니다.
동일 개념에 대한 여러 이름 사용은 프로젝트 혼란의 주원인입니다. 다음 두 함수는 동일 기능을 수행하지만, 하나는 훨씬 일반적이고 재사용 가능한 형태입니다:
// specific to our current blog
const validArticles = articles =>
articles.filter(article => article !== null && article !== undefined),
// vastly more relevant for future projects
const compact = xs => xs.filter(x => x !== null && x !== undefined);특정 이름(articles)을 사용함으로써 우리는 특정 데이터에 종속되는 상황이 자주 발생하며, 이는 재발명(reinvention)의 원인이 됩니다.
객체지향 코드에서와 마찬가지로 this 컨텍스트 문제를 주의해야 합니다. 내부 함수가 this를 사용하는 경우 1급 함수로 호출하면 추상화 누수 문제에 노출될 수 있습니다.
const fs = require('fs');
// scary
fs.readFile('freaky_friday.txt', Db.save);
// less so
fs.readFile('freaky_friday.txt', Db.save.bind(Db));Db가 프로토타입의 불필요한 코드에 자유롭게 접근할 수 있습니다. 함수형 코드 작성 시 this 사용은 더러운 기저귀를 다루듯 피해야 합니다. 하지만 다른 라이브러리와 연동 시 이러한 방식을 수용해야 할 수도 있습니다.
성능 최적화를 위해 this가 필요하다 주장하는 이들도 있지만, 만약 극도의 최적화를 추구한다면 이 책을 덮어버리셔도 좋습니다. 환불이 불가능하다면 더 복잡한 내용의 서적으로 교환하시길 바랍니다.
이제 다음 주제로 넘어갈 준비가 되었습니다.