일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- 자바스크립트
- Adobe
- Sass
- tomcat
- html
- 이클립스
- error
- css
- ref
- Eclipse Bug
- CSS3
- 정적웹사이트
- Eclipse
- 보일러플레이트
- animation
- npm
- JavaScript
- VW
- React
- SSR
- Eclipse Compare View
- ref전달하기
- next.js
- gulp
- TaskRunner
- 이클립스 소스 비교 안보일 때
- frontend
- java
- Study
- 1분코딩
- Today
- Total
프론트 개발 블로그
IIFE, 재귀 함수, 중첩 함수, 콜백 함수, 고차 함수, 순수, 비 순수 함수 정리 본문
서적 [모던 자바스크립트 Deep Dive / 이웅모 지음] 정리
1. 즉시 실행 함수
2. 재귀 함수
3. 중첩 함수
4. 콜백 함수
5. 고차 함수
6. 순수 함수 / 비 순수 함수
1. 즉시 실행 함수
함수 정의와 동시에 즉시 호출되는 함수(IIFE, Immediately Invoked Function Expression)
- 즉시 실행 함수는 단 한번만 호출되며 다시 호출할 수 없다.
- 즉시 실행 함수는 ( ) 그룹 연산자로 감싸야 된다. → 그렇지 않으면 에러 발생
(function () {
// 즉시 실행 함수 IIFE
}());
- 그룹 연산자로 ( ) 로 묶은 이유는 먼저 함수 리터럴을 평가해서 함수 객체를 생성하기 위함.
즉, 함수 리터럴을 평가해서 함수 객체를 생성 후 함수를 실행 하는 방법
- 코드 충돌을 방지 하기 위해 즉시 실행 함수 안에 코드를 작성하는 방법을 많이 사용함
기명 즉시 실행 함수 : 함수 이름이 있는 기명 즉지 실행 함수도 사용이 가능하지만, ( ) 그룹 연산자로 인해 함수 선언문을 함수 리터럴로 평가되어서 함수 이름으로 재호출이 불가능 함. 그래서 익명 함수를 사용하는 것이 일반적
(function foo() {
var a = 3;
return a;
}());
foo(); // Error : 함수 리터럴로 평가되어 즉시 실행 함수를 다시 호출할 수 없음.
즉시 실행 함수도 일반 함수처럼 값을 반환하고, 인수를 전달할 수도 있다.
// 값 반환 가능
var iife1 = (function() {
var a = 3;
return a;
})();
console.log(iife1); // 3
// 인수 전달 가능
var iife2 = (function(a, b) {
return a + b;
})(3, 5);
console.log(iife2); // 8
2. 재귀 함수
함수가 자기 자신을 호출하는 것을 재귀 함수(recursive call)라고 함.
- 반복되는 처리를 할 때 반복문 대신에 사용할 수 있다.
- 재귀 함수는 자신을 무한으로 호출하기 때문에 호출을 멈출 수 있는 탈출 조건을 반드시 만들어야 함.
function countdown(n) {
if(n < 0) return;
console.log(n);
countdown(n - 1); // 재귀 호출
}
countdown(3);
// 3
// 2
// 1
3. 중첩 함수
함수 내부에 정의 된 함수를 중첩 함수(nested function) 또는 내부 함수(inner function)이라 함.
그리고 중첩 함수를 감싸고 있는 함수를 외부 함수(outer function) 이라고 부름.
- 중첩 함수는 외부 함수 내부에서만 호출할 수 있다.
- 일반적으로 중첩 함수는 자신을 포함하는 외부 함수를 돕는 헬프 함수(helper function) 역할을 함
function outer() {
var x = 1;
// 중첩 함수
function inner() {
var y = 2;
// 외부 함수의 변수를 참조 할 수 있음.
console.log(x + y); // 3
}
inner();
}
outer();
중요한 콜백 함수와 고차 함수를 알아보자.
일단 알아야 할 것, 자바스크립트 함수는 일급 객체이므로 함수의 매개변수를 통해 함수를 전달 할 수 있다.
// 외부에서 전달받은 f를 n만큼 반복 호출한다.
// 고차 함수
function repeat(n, f) {
for(var i = 0; i < n; i++) {
f(i); // i 를 전달하면서 f 를 호출
}
}
// 콜백 함수
var logAll = function(i) {
console.log(i);
}
// 반복 호출 할 함수를 인수로 전달한다.
repeat(5, logAll);
4. 콜백 함수
함수의 매개변수를 통해서 다른 함수의 내부로 전달되는 함수를 콜백 함수(callback function) 라고 부른다.
→ 예시 코드에서 logAll 함수가 콜백함수라고 할 수 있음.
5. 고차 함수
매개변수를 통해 함수의 외부에서 함수를 전달받거나 반환 값으로 함수를 반환하는 함수를 고차 함수(Higher-Order Function, HOF) 라고 한다.
→ 예시 코드에서 repeat 함수가 고차 함수라고 할 수 있음.
- 중첩 함수와 비교 했을 때 콜백 함수는 함수 외부에서 고차 함수 내부로 주입하기 때문에 자유롭게 교체할 수 있다는 장점이 있음.
- 고차 함수는 콜백 함수를 자신의 일부분으로 합성한다.
- 고차 함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한다.
- 콜백 함수는 고차 함수에 의해 호출되며 이때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.
- 따라서 고차 함수에 콜백 함수를 전달 할 때 콜백 함수를 호출하지 않고 함수 자체를 전달 해야 함.
- 콜백 함수를 익명 함수 리터럴로 정의할 경우, 고차 함수가 호출 될 때마다 평가되어 함수 객체를 생성함으로 비 효율적임
콜백 함수를 정의한 함수를 참조 하여 고차 함수에 전달 하는 편이 효율적이다.
// bad
// 익명 함수 리터럴을 콜백 함수로 고차 함수에 전달 할 경우,
// repeat 함수를 호출 할 때마다 함수 리터럴이 평가되어 함수 객체를 생성함으로 비효율적임
repeat(5, function(i) { ... });
// good
// 함수 '참조'를 고차 함수에 전달하는 것이 효율적임, 단 한번만 실행 됨
var logOdds = function(i) {
...
}
repeat(5, logOdds);
6. 순수 / 비 순수 함수
순수 함수
외부 상태에 의존하지 않고, 변경하지도 않는, 부수 효과가 없는 함수를 순수 함수(pure function) 라고 한다.
오직 매개변수를 통해 함수 내부로 전달 된 인수에게만 의존해 반환값을 만든다.
비 순수 함수
반대로 외부 상태에 의존하거나, 외부 상태를 변경하는, 부수 효과가 있는 함수를 비 순수 함수(impure function) 라고 한다.
함수가 외부 상태를 변경하면 상태 변화를 추적하기 어려워지므로, 순수 함수를 사용하는 것이 좋다.
결론
함수형 프로그래밍은 순수 함수 + 보조 함수의 조합을 통해 외부 상태를 변경하는 부수 효과를 최소화해서 불변성(Immutability)을 지향하는 프로그래밍 패러다임이다.
로직 내에 존재하는 조건문, 반복문을 제거해서 복잡성을 해결하며 변수 사용을 억제하거나 생명주기를 최소화해서 상태 변경을 피해 오류를 최소화 하는 것을 목표로 한다.
'Javascript' 카테고리의 다른 글
window.visualViewport.width, window.visualViewport.height (0) | 2022.01.11 |
---|---|
scroll 이벤트가 실행되지 않을 때 (0) | 2021.10.26 |
자바스크립트에서 타입을 체크하는 방법 typeof (0) | 2021.09.28 |
void 0; 이 뭐지? (3) | 2021.01.18 |
비동기처리 (0) | 2020.03.02 |