12.1 함수란?
함수 : 프로그래밍 언어의 함수는 일련의 과정을 문 으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것.
자바스크립트에서 함수는 가장 중요한 핵심개념이다.
자바스크립트에서 핵심 개념인 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this, 프로토타입, 모듈화 등이 모두 함수와 깊은 관련이 있다.
함수 내부로 입력을 전달받는 변수를 매개변수 또는 인수 라고 하고,
출력을 반환값 이라함.
또한 함수는 값이며, 여러개 존재 할 수 있음. 특정 함수를 구별하기 위해 식별자인 함수 이름을 사용할 수 있음.
function add(x,y) { // add << 함수이름, x,y << 매개변수
return x + y; // x+y << 반환값
}
add(2, 5); // 2,5 << 인수값함수 호출 : 함수를 호출하면 코드 블록에 담긴 문들이 일괄적으로 실행이 된다.
즉 반환값을 반환 한다.
function add(x,y) {
return x+y;
}
var result = add(10, 100); // 함수호출
// 함수 add에 인수 10,100를 전달하며 반환값100 반환
console.log(result);
result :
11012.2 함수를 사용하는 이유
함수를 사용하지 않고 코드를 중복해서 사용하면 그 코드를 수정할 때 중복된 횟수만큼 코드를 수정해야한다.
그 결과 코드를 수정에 걸리는 시간도 증가하며 실수할 확률도 높아지게 된다.
따라서 함수는 중복을 억제하고 재사용성을 높이는 함수는 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높이는 효과가 있다.
또한 함수는 객체 타입의 값이므로 이름(식별자)를 붙일수 있음.
적절한 함수 이름으로 내부 코드를 이해하지 않고도 함수의 역할을 파악할 수 있게 도움을 준다. 이는 코드의 가독성을 향상시킨다.
함수를 사용함으로써 얻을수 있는 효과
- 중복을 억제
- 유지보수의 편의성
- 코드의 신뢰성
- 코드의 가독성
12.3 함수 리터럴
자바스크립트 함수는 객체 타입의 값이라고 하였다.
따라서 숫자 값을 숫자 리터럴로 생성하고,
객체를 객체 리터럴로 생성하는 것처럼,
함수도 함수 리터럴로 생성할 수 있다.
함수 리터럴은 function 키워드, 함수 이름, 매개 변수 목록, 함수 몸체로 구성 한다.
var f = function add(x,y) {
return x + y ;
};
console.log(f(100,10));
add <= 함수이름 :
함수이름은 식별자다. 식별자 네이밍 규칙을 준수해야함.
함수이름은 함수 몸체 내에서만 참조할 수 있는 식별자다.
함수 이름은 생략할 수 있음.
이름이 있는 함수를 기명 함수.
이름이 없는 함수를 무명/익명 함수라고 함.
add(x,y) <= x,y가 매개변수 :
0개 이상의 매개변수를 소괄호로 감싸고 쉼표로 구분.
각 매개변수에는 함수를 호출할 때 지정한 인수가 순서대로 할당하여 순서에 의미가 있음.
매개변수는 함수 몸체 내에서 변수와 동일하게 취급. 따라서 매개변수도 변수와 마찬가지로 식별자 네이밍 규칙을 준수해야함.
함수 몸체 :
함수가 호출되었을 때 일괄적으로 실행될 문들을 하나의 실행 단위로 정의한 코드 블록.
함수 몸체는 함수 호출에 의해 실행됨.12.4 함수 정의 ( feat, 함수를 만드는 4가지 방식 )
함수 정의 : 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 반환한 값을 지정하는 것을 말함.
정의된 함수는 자바스크립트 엔진에 의해 평가되어 함수 객체가됨.
함수를 정의하는 방법에는 4가지가 있다.
함수 선언문 :
function add(x,y) {
return x + y;
}
함수 표현식 :
var add = function (x,y) {
return x + y;
};
function 생성자 함수 :
var add = new function('x','y','return x+y');
화살표 함수(ES6) :
var add = (x,y) => x+y;
- 변수 선언과 함수 정의
변수는 선언한다고 했지만 함수는 정의한다고 표현했다.
함수 선언문이 평가되면 식별자가 암묵적으로 생성되고 함수 객체가 할당된다.
따라서 ESCMAScript 사양에서도 변수에는 선언, 함수에는 정의라고 표현한다.
12.4.1 함수 선언문
함수 선언문을 사용해 함수를 정의하는 방식 :
// 함수 선언문
function add(x,y) {
return x+y;
}
// 함수 참조
// cnosole.dir는 console.log와 달리 함수 객체의 프로퍼티까지 출력.
console.dir(add);
// 함수 호출
console.log(add(2,5)); // 7
함수 선언문은 함수 리터럴과 형태가 동일하다.
단 함수 리터럴은 함수 이름을 생략할 수 있지만,
함수 선언문은 함수 이름을 생략 할 수 없다.
// 함수 선언문은 함수 이름을 생략할 수 없다.
function (x,y) {
return x+y;
}
result :
SyntaxError: Function statements require a function name함수 선언문은 표현식이 아닌 문이다.
함수 선언문을 실행하면 완료 값 (undefined)이 출력이 된다.
만약 표현식이라면 완료 값 (undefined) 대신 표현식이 평가되어 생성된 함수가 출력되었어야 한다.
표현식 : 값으로 평가될 수 있는 문(statement)이다.
즉 표현식이 평가되면 새로운 값을 생성하거나 기존값을 참조함.
함수 선언문은 표현식이 아닌문이므로 변수에 할당할 수 없다.
그런데 ! 다음 예제를보면 함수 선언문이 변수에 할당되는 것처럼보인다.
var add = function add(x,y) {
return x+y;
}
console.log(add(2,5));
result :7함수 선언문은 변수에 할당이 되지 않는다고 했는데??
=> 저건 함수 리터럴 표현식이라서 올바른 문법이다.
그렇다면 JS가 동작할 때 표현식이 아닌문인 함수 선언문과
표현식문인 함수 리터럴 표현식으로 해석하는 구분을 어떻게 하는지??
=> 맞다. 문맥에 따른 해석에 달라진다.
예를들어, { } 은 블록문일수도 있고, 객체 리터럴일수 있다.
즉 { } 은 중의적인 표현임.
{ }이 단독으로 존재하면 자바스크립트 엔진은 { }을 블록문으로 해석하고,
{ }이 값으로 평가되어야 할 문맥 ( 할당 연산자의 우변 )에서 피연산자로 사용이 된다면 자바스크립트는 객체 리터럴로 해석을한다.
결론은 함수 리터럴도 중의적인 코드다.
코드의 문맥에 따라 해석이 달라지는 것이다.
자바스크립트 엔진은 함수 이름이 있는 함수 리터럴을 단독으로 사용하면
함수 선언문으로 해석하고,
함수 리터럴이 값으로 평가되어야 하는 문맥, 예를 들어 함수 리터럴을 변수에 할당하거나 피연산자로 사용하면 함수 리터럴 표현식으로 해석한다.
함수 리터럴 => 함수 선언문 or 함수 리터럴 표현식
function foo() {
console.log('foo');
}
foo(); // foo
// 함수 리터럴을 피연산자로 선언하면 함수 선언문이 아닌 함수 리터럴 표현식으로 해석을함.
// 함수 리터럴에는 함수 이름을 생략할 수 있음.
( function bar() {
console.log('bar');
}
bar(); // ReferenceError: bar is not defined
); 위 예제는 그룹 연산자 () 내에 있는 함수 리터럴(bar)은 함수 선언문으로 해석되지 않고 함수 리터럴 표현식으로 해석이된다.
그룹 연산자의 피연산자는 값으로 평가될 수 있는 표현식이어야한다.
따라서 표현식이 아닌 문인 함수 선언문은 피연산자로 사용 불가능하다.
이렇듯, 코드의 문맥에 따라
함수 선언문 vs 함수 리터럴 표현식으로 해석된다.
그런데 위 코드의 함수 리터럴인 bar는 실행이 되지않는다
함수 선언문으로 생성된 foo는 호출할수 있었는데
그룹 연산자 ()로 인한 함수 리터럴 표현식으로 생성된 bar는 호출 할 수 없다. 이유가 무엇일까??
"함수 리터럴"에서 "함수 이름"은 함수 몸체 내에서만 참조할 수 있는 식별자 이기 때문이다.
함수 몸체 외부에서는 함수 이름으로 함수를 참조할 수 없으므로
함수 몸체 외부에서는 함수 이름으로 함수를 호출할 수 없다는 의미.
즉 함수를 가리키는 식별자가 없다는 것과 마찬가지이다.
“함수 이름”은 함수 몸체 내에서만 참조할 수 있는 식별자 라고 했는데,
그렇다면 함수 선언문을 활용한 foo는 무엇일까??
“함수 이름”인 foo는 함수 몸체 내부에서만 유효한 식별자니까
foo로 함수를 호출할 수 없어야 하는거 아닌것인지??
식별자로 따로 foo를 선언한적도 없고 할당한적도 없다.
foo는 자바스크립트 엔진이 암묵적으로 생성한 식별자다.
자바스크립트 엔진은 함수 선언문을 해석해 함수 객체를 생성한다.
그전에 함수 이름은 함수 몸체 내부에서만 유효한 식별자인것은 맞다.
그래서 함수 이름과는 별도로 생성된 함수 객체를 가리키는 식별자가 필요했는데
함수 객체를 가리키는 식별자가 없으면 생성된 함수 객체를 참조할 수 없기 때문이다.
그렇기에 자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다.
함수는 함수이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출한다.
(var 옆의 add가 함수 객체를 가리키는 식별자, function 오른쪽의 add가 함수이름 )
var add = function add(x,y) {
return x + y;
};
console.log(add(2,5));
result : 712.4.2 함수 표현식
자바스크립트의 함수는 객체 타입의 값이다.
자바스크립트의 함수는 값처럼 변수에 할당할 수 도 있음.
프로퍼티의 값이 될 수 있고, 배열의 요소가 될 수 있음.
이처럼 값의 성질을 갖는 객체를 일급 객체라고 한다.
자바스크립트의 함수는 일급 객체다.
함수가 일급 객체라는 것은 함수를 값처럼 자유롭게 사용가능함.
함수는 일급 객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다. 이러한 함수 정의 방식을 함수 표현식 이라고 한다.
함수 리터럴의 “함수 이름”은 생략할 수 있음. 이러한 함수를 익명 함수라 한다.
함수 표현식의 함수 리터럴은 함수 “함수 이름”을 생략하는 것이 일반적이다.
함수 선언문과 함수 표현식에는 어떤 차이가 있을까??
역시 가장 큰 차이는 표현식인지 아닌지에서 많은 차이가 발생한다.
함수 선언문 => “표현식이 아닌문”
함수 표현식 => “표현식인 문”
표현식인 함수인지 아닌지에 따라서 함수 호이스팅이 결정되기에 중요하다.
12.4.3 함수 생성 시점과 함수 호이스팅
그렇다면 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수는 무슨 차이가 있을까??
함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출가능.
함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출불가능.
함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성시점이 다르기 때문이다.
함수 선언문 : 런타임 이전에 함수 객체가 먼저 생성된다. 그리고 자바스크립트 엔진은 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당한다.
이처럼 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 함수 호이스팅이라 한다.
// 함수 참조
console.dir(add); // 1
console.dir(sub); // 2
// 함수 호출
console.log(add(2,5)); // 3
console.log(sub(2,5)); // 4
// 함수 선언문
function add(x,y) {
return x + y;
}
// 함수 표현식
var sub = function (x,y) {
return x - y;
}
result :
1. [Function: add]
2. undefined
3. 7
4. TypeError: sub is not a function함수 호이스팅과 변수 호이스팅은 차이가 있다.
공통점 :
var 키워드를 사용한 변수 선언문과 함수 선언문은
런타임 이전에 자바스크립트 엔진에 의해 먼저 실행되어 식별자를 생성한다는 것은 동일함.
차이점 :
var 키워드로 선언된 변수는 undefined으로 초기화되고,
함수 선언문을 통해 암묵적으로 생성된 식별자는 함수 객체로 초기화된다.
따라서 var 키워드를 사용한 변수 선언문 이전에 변수를 참조하면
변수 호이스팅에 의해 undefined으로 평가되지만,
함수 선언문으로 정의한 함수를 함수 선언문 이전에 호출하며 함수 호이스팅에 의해 호출이 가능함.
console.log(add(2,5)); // 함수 선언문에 의해 7
console.log(x); // 변수 호이스팅에 의해 undefined
var x = 5; // x 변수에 값 할당, 여기서 x = 5 값을 가짐
function add(x,y) {
return x + y;
}
console.log(x); // x 변수에 값 할당한 5 출력함수 표현식 : 위의 변수 할당문의 값처럼 함수 표현식도 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.
따라서 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.
변수 호이스팅 : var vs 함수 표현식
var키워드로 사용한 변수선언문 이전에 참조하면 값으로 undefined으로 평가된다.
함수 표현식도 마찬가지다. 함수 표현식 이전에 함수를 참조하면 undefined 으로 평가를 한다.
따라서 이때 함수를 호출하면 undefined을 호출하는것과 마찬가지이므로 타입 에러가 발생한다. 원래 정상적으로는 함수 객체를 의미하는 메모리주소 값이 있어야하는데 말이다.
따라서 표현식으로 정의한 함수는 반드시 함수 표현식 이후에 참조 또는 호출을 해야한다.
console.log(x);
var x = 5;
var sub = function(x,y) {
return x - y ;
};
result :
undefined결론 : var 키워드를 사용한 변수 선언문이든간에, 함수 표현식이든간에 변수 선언문,함수 표현식을 이전에 참조 또는 호출하려고하면 undeifned값으로 평가가된다.
다만 실행되는 결과값에 있어서
var 키워드는 undefined 값 그대로 실행 결과가 나오지만,
함수 표현식은 undefined 값 그대로 실행 결과가 나오지 않는 타입 에러가 나오게됨을 유의하자.
함수 선언문 : 함수 호이스팅
함수 표현식, 변수 선언문 : 변수 호이스팅
12.4.4 Function 생성자 함수
자바스크립트가 기본 제공하는 빌트인 함수인 Function 생성자 함수에
매개변수 목록과 함수 몸체를 문자열로 전달하면서,
new 연산자와 함께 호출하면 함수 객체를 생성해서 반환.
var add = new Function('x', 'y', 'return x+y');
console.log (add(2,5)); // 7Function 생성자 함수를 사용하여 함수를 생성하는 방식은 일반적이지 않다.
Function 생성자 함수로 생성한 함수는
1. 클로저를 생성하지않는다.
2. 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작한다.
12.4.5 화살표 함수
ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표를 사용해
간략한 방법으로 함수를 선언할 수 있다.
화살표 함수는 항상 익명 함수로 정의한다.
하지만 화살표 함수는 함수 표현식을 완전히 대체하기 위해 디자인된건 아니다. 표현만 간략하게한 것 뿐만 아니라, 내부 동작 또한 간략화 되어 있다.
1. 기존 함수와 this 바인딩 방식이 다름.
2. prototype 프로 퍼티가 없음.
3. arguments 객체를 생성하지 않음.
const add = (x,y) => x+y;
console.log(add(2,5));12.5 함수 호출
함수는 함수를 가리키는 식별자와 한 쌍의 소괄호인 호출 연산자로 호출한다.
12.5.1 매개변수와 인수
함수를 실행할 때 필요한 값을 함수 외부에서 함수 내부로 전달할 필요가 있을 경우, 매개변수(인자)를 통해 인수를 전달한다.
1. 인수는 값으로 평가될 수 있는 표현식일 것
2. 인수는 함수를 호출 할 때 지정한다.
3. 개수와 타입에 제한이 없다.
// 함수 선언문
function add(x,y) { // 매개변수(인자)
return x + y; // 반환값
}
var result = add(1,2);
//식별자(인수,인수)매개변수는 함수를 정의할 때 선언한다.
함수 몸체 내부에서 변수와 동일하게 취급.
즉 함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수가 생성되고
일반 변수와 마찬가지로 undefined로 초기화 된 이후 인수가 순서대로 할당됨.
function add(x,y) {
console.log(x,y);
return x+y;
}
add(2,5);
ReferenceError: x is not defined
매개변수는 함수 몸체 내부에서만 참조할수 있음 함수 외부에서는
참조 불가능하다.function add(x,y) {
return x+y;
}
console.log(add(2));
result : NaN
// 함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지않음.
// 함수를 호출할 때 매개변수만큼 인수를 전달하는 것이 일반적임.
// 매개변수만큼 인수를 전달하지 않더라도 에러는 발생하지 않음.
// 인수가 부족해서 인수가 할당되지 않은 매개변수의 값은
undefined의 값을 가짐.
// 위 예제에서 x에는 인수 2가 전달되지만, 매개변수 y에는 전달할 인수가 없음. 따라서 y는 undefined로 초기화된 상태 그대로임.
그래서 2 + undefined = NaN이 반환이 되는것function add(x,y) {
return x + y;
}
console.log(add(2,5,10); // 7
// 초과된 인수는 무시됨
// 초과된 인수가 그냥 버려지는 것은 아님. 모든 인수는 암묵적으로
arguments 객체의 프로퍼티로 보관됨.
function add(x,y) {
console.log(arguments);
return x+y;
}
add(2,5,10);
result:
[Arguments] { '0': 2, '1': 5, '2': 10 }12.5.2 인수 확인
function add(x,y) {
return x + y;
}위 함수의 개발자 의도는 2개의 숫자 타입 인수를 받아 합계를
반환 하는 목적으로 추측이된다.
하지만 개발자의 의도와는 다르게 다음과 같이 호출이 될 수 있다.
function add(x, y) {
return x+y;
}
console.log(add(2));
console.log(add('a','b'));
result :
NaN
'ab'자바스크립트 엔진은 아무런 이의 제기 없이 위 코드를 실행할 것이다.
why ->
1. 자바스크립트 함수는 매개변수와 인수의 개수가 일치하는지 확인 하지 않는다.
2. 자바스크립트는 동적 언어이므로 자바스크립트 함수는 매개변수의 타입을 사전에 지정할 수 없다
그래서 자바스크립트의 경우 함수를 정의할 때 적절한 인수가 전달되었는지 확인할 필요가 있다.
function add(x,y) {
if (typeof x !=='number' || typeof y !== 'number') {
// 매개변수를 통해 전달된 인수의 타입이 부적절할 경우 에러를 발생시킴.
throw new TypeError('인수는 모두 숫자 값이어야 해요.');
}
return x+y;
}
console.log(add(2));
console.log(add('a','b'));
result :
// TypeError: 인수는 모두 숫자 값이어야 해요.
// TypeError: 인수는 모두 숫자 값이어야 해요.하지만 함수 내부에서 적절한 인수가 전달되었는지 확인하더라도
부적절한 호출을 사전에 방지할 수 없음. 에러는 런타임에 발생하게 됨.
따라서 타입스크립트와 같은 정적 타입을 선언할 수 있는
상위 확장을 도입해서 컴파일 시점에 부적절한 호출을 방지할 수 있게
하는 것도 하나의 방법이다.
12.5.3 매개변수의 최대 개수
ECMAscript 사양에서는 매개변수의 최대 개수에 대해 명시적으로 제한하고 있지는 않음. 엔진마다 최대 개수 제한이 있겠지만, 충분히 많은 매개변수를 지정할 수 있다.
매개변수는 순서에 의미가 있다. 매개변수가 많아지면 많아질수록 함수를 호출할 때 전달해야할 인수의 순서를 고려해야 한다.
이는 함수의 사용법을 이해하기 어렵게 만들고, 실수를 발생시킬 가능성을 높인다. 즉 매개변수의 개수는 적을수록 좋다.
12.5.4 반환문
함수는 return 키워드와 표현식으로 이루어진 반환문을 사용해
실행 결과를 함수 외부로 반환(return)할 수 있다.
function multply(x,y) {
return x * y; // 반환문
}
// 함수 호출은 반환값으로 평가된다.
var result = multply(3,5);
console.log(result); // 15반환문은 두 가지 역할을 한다.
1. 반환문은 함수의 실행을 중단하고 함수 몸체를 빠져나감.
따라서 반환문 이후에 다른 문이 존재하면 그 문은 실행되지 않고 무시된다.
2. 반환문은 return 키워드 뒤에 오는 표현식을 평가해 반환한다.
return 키워드 뒤에 반환값으로 사용할 표현식을 명시적으로 지정하지 않으면 undefined가 반환이된다.
2번의 예시
function foo() {
retrun;
}
console.log(foo());
result :
ReferenceError: retrun is not defined반환문은 생략할 수 있다. 이때 함수는 함수 몸체의 마지막 문까지 실행한 후 암묵적으로 undefined을 반환한다.
반환문은 함수 몸체 내부에서만 사용가능. 전역에서 반환문을 사용하면 문법 에러가 발생함.
12.6 참조에 의한 전달과 외부 상태의 변경
원시 값 : 값에 의한 전달
객체 : 참조에 의한 전달
매개변수도 함수 몸체 내부에서 변수와 동일하게 취급하므로
매개변수 또한 타입에 따라 값에 의한 전달, 참조에 의한 전달 방식을 그대로 따르게됨.
function changeVal(primitive, obj) {
primitive += 100;
obj.name = 'kim';
console.log(primitive);
}
// 외부 상태
var num = 100;
var person = { name : 'Lee' };
console.log(num); // 100
console.log(person); // {name : "Lee"}
// 원시 값은 값 자체가 복사되어 전달되고 객체는 참조 값이 복사되어 전달됨.
changeVal(num, person);
// 원시 값은 원본이 훼손되지 않음.
console.log(num);
// 객체는 원본이 훼손됨.
console.log(person);
result:
100
{ name: 'Lee' }
100
{ name: 'kim' }위의 예제를 보면 객체는 문제의 여지가 있다. 객체의 원본이 훼손될 여지가 있는것이다.
해결방법은 불변 객체를 만들어 해결하는 방법이 있다.
마치 원시 값처럼 변경 불가능한 값으로 동작하게 만드는 것이다.
이를 통해 객체의 상태 변경을 원천봉쇄하고 객체의 상태 변경이 필요한 경우에는 객체의 방어적 복사를 통해 원본 객체를 완전히 복제,
즉 깊은 복사를 통해 새로운 객체를 생성하고 재할당을 통해 교체한다.
이를 통해 새로운 객체외의 외부 상태가 변경되는 부수 효과를 없앨 수 있음.
- 외부 상태를 변경하지 않고 외부 상태에 의존하지도 않는 함수를 순수 함수라 한다.
- 순수 함수란 부수효과를 최대한 억제하여 오류를 피하고 프로그램의
안전성을 높이려는 프로그래밍 패러다임을 함수형 프로그래밍이다.
( 12.7.5절 “순수 함수와 비 순수 함수”에서 살펴보도록하자. )
12.7 다양한 함수의 형태
12.7.1 즉시 실행 함수
즉시 실행 함수 : 함수 정의와 동시에 즉시 호출되는 함수.
단 한 번만 호출되며 다시 호출할 수 없음.
( function foo () {
var a = 3;
var b = 5;
return console.log(a * b);
} ( ))
result : 15즉시 실행 함수는 함수 이름이 없는 익명 함수를 사용하는 것이 일반적.
함수 이름이 있는 기명 함수를 사용할 수 있기는 하지만,
그룹 연산자(...) 내의 기명 함수는 함수선언이 아니라 함수 리터럴로
평가 되며 함수 이름은 함수 몸체내에서만 참조 할 수 있는 식별자 이므로 즉시 실행 함수를 다시 호출할 수 는 없다는 것을 유의하자.
(function foo () {
var a = 3;s
var b = 5;
return console.log(a * b);
}())
foo();
result :
ReferenceError: foo is not defined잘못된 서술 방식의 즉시 실행 함수
function () {
// . . .
}();
// 즉시 실행 함수는 그룹 연산자로 감싸야한다 !!
// 위의 예제와 같이 서술하면 함수 선언문의 형식과 유사한데, 함수 선언문의 형식에 맞기 않기 때문이다. 함수 선언문은 함수 이름을 생략 불가능하기 때문이다.
function foo() {
// . . .
}();
// 위 예제도 오류가 발생한다.
중괄호인 {} 뒤에 세미콜론 자동 삽입 기능에 의해 세미콜론이 암묵적으로 추가되기 때문인데,
뒤에 ();는 함수 호출 연산자가 아니라 그룹 연산자로 해석되고,
그룹 연산자에 피연산자가 없기에 에러가 발생한다.
첫번째 방법
(function () {
// . . .
}());두번째 방법
(function () {
// . . .
})();세번째 방법
!function() {
// . . .
}();네번째 방법
+function () {
// . . .
}();그룹 연산자로 함수를 묶은 이유는 함수 리터럴로 평가되기 위하여 함수 객체를 생성하기 위해서임. 다른 방식으로 함수 리터럴로 평가되서 함수 객체를 생성할 수 있으면 그룹 연산자 이외의 방식을 사용해도 좋지만 가장 일반적인 방법은 첫 번째 방법이다.
// 즉시 실행 함수도 일반 함수처럼 값을 반환할 수 있다.
var res = (function(){
var a = 3;
var b = 5;
return a*b;
}());
console.log(res);
result :
15// 즉시 실행 함수에도 일반 함수처럼 인수를 전달할 수 있다.
res = (function (a,b) {
return a * b;
}(3,5));
console.log(res);
result :
1512.7.2 재귀 함수
재귀 함수 : 자기 자신을 호출하는 행위.
재귀 함수는 반복되는 처리를 위해 사용함.
10부터 0까지 출력하는 함수 구현 :
function countdown(n) {
for (var i=n; i>=0; i--) console.log(i);
}
countdown(10);
result :
10
...~
010부터 0까지 출력하는 함수 구현 ( 재귀함수로 ) :
function countdown(n) {
if(n<0) return;
console.log(n);
countdown(n-1); // 재귀 호출
}
countdown(10);
result :
10
...~
0이처럼 자기 자신을 호출하는 재귀 함수를 사용하면 반복되는 처리를
반복문 없이 구현 가능하다.
함수 이름은 함수 몸체 내부에서만 유효하다. 따라서 함수 내부에서는
함수이름을 사용해 자기 자신을 호출할 수 있는 방법이 있는것이다.
함수 표현식으로 정의한 함수 내부에서는 함수 이름은 물론
함수를 가리키는 식별자로도 자기 자신을 재귀호출 할 수 있다.
BUT... 함수 외부에서 함수를 호출할 때는 반드시 식별자 사용할 것.
또한 재귀함수는 자신을 무한 재귀 호출 하므로 재귀 호출을 멈출 수 있는 탈출 조건을 반드시 만들자.
var factorial = function foo(n) {
// 탈출 조건 : n이 1이하일 때 재귀 호출을 멈춤.
if( n<=1 ) return 1;
// 함수를 가리키는 식별자로 자기 자신을 재귀호출
return n * factorial(n-1);
// 함수 이름으로도 자기 자신을 재귀호출 가능.
// console.log(factorail === foo); // true
// return n * foo ( n - 1 );
console.log(factorial(5)); // 5! = 5 * 4 * 3 * 2 * 1 = 120
};재귀함수 vs 반복문
재귀함수는 반복문을 사용하는 것보다 재귀 함수를 사용하는 편이
더 직관적으로 이해하기 쉬울 때만 한정적으로 사용하는 것이 바람직하다
12.7.3 중첩 함수
중첩 함수 : 함수 내부에 정의된 함수.
외부 함수 : 중첩 함수를 포함하는 함수.
일반적으로 중첩함수는 자신을 포함하는 외부 함수를 돕는 헬퍼함수의 역할을 한다.
function outer() {
var x = 1;
// 중첩 함수
function inner() {
var y = 2;
//외부 함수의 변수를 참조할 수 있다.
console.log(x + y); //3
}
inner();
}
outer();
result : 3중첩 함수는 스코프or클로저에 깊은 관련이 있으므로 해당 단원에서 자세히 알아보도록 하자.
12.7.4 콜백 함수
어떤 일을 반복하는 repeat 함수를 정의해보자.
function repeat(n) {
// i를 출력한다.
for ( var i =0; i<n; i++) console.log(i);
}
repaet(5); // 0 1 2 3 4 5
이번엔 홀수만 출력하고싶다고 하네.. 수정해서 정의해보자
function repeat(n) {
// i를 출력한다.
for ( var i =0; i<n; i++) {
if ( I%2 ) console.log(i);
}
}
repeat(5); // 1 3두 예제를 비교해볼때 일은 변하지 않고 공통적으로 수행하면서도
하는 일의 내용은 다르다. 즉 함수의 일부분만 달라도 매번 함수를 새롭게 정의해야 한다. 이 문제는 함수를 합성하는 것으로 해결 가능하다.
함수의 변하지 않는 공통 로직은 미리 정의하고
변경되는 로직은 추상화해서 함수 외부에서 함수 내부로 전달하는 것.
외부에서 전달 받은 f를 n만큼 반복 호출한다. [ 공통 로직을 미리 정의한다. ]
[ 고차 함수 ]
function repaet(n,f) {
for(var i = 0; i < n; i++) {
f(i); // i를 전달하면서 f를 호출
}
}변경되는 로직은 추상화하여 함수 외부에서 내부로 전달할 인수값.
[ 콜백 함수 ]
var logAll = function (i) {
console.log(i);
};
변경되는 로직은 추상화하여 함수 외부에서 내부로 전달할 인수값.
[ 콜백 함수 ]
var logOdds = function (i) {
if ( i % 2 ) console.log(i);
};반복 호출할 함수를 인수로 전달한다.
repaet(5,logAll); // 0 1 2 3 4
console.log();
repaet(5,logOdds); // 1 3
위 repeat 함수는 경우에 따라 변경되는 일을 함수 f로 추상화함.
이를 외부에서 전달받는다.
자바스크립트의 함수는 일급 객체이므로 함수의 매개변수를 통해 함수를 전달할 수 있다.
repeat 함수는 더 이상 내부 로직에 강력히 의존하지 않고 외부에서 로직의 일부분을 함수로 전달받아 수행하므로 더욱 유연하게 되었다.
고차 함수와 콜백 함수를 정리하면
고차함수 : 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수
콜백함수 : 함수의 매개변수를 통해 다른 함수의 내부로 전달하는 함수
콜백 함수는 함수 외부에서 고차 함수 내부로 주입하기 때문에
자유롭게 교체할 수 있다는 장점이 있다.
고차 함수는 콜백 함수를 자신의 일부분으로 합성한다.
고차 함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한다. 즉, 콜백 함수는 고차 함수에 의해 호출되고
고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있음.
따라서 고차 함수에 콜백 함수를 전달할 때 콜백 함수를 호출하지 않고
함수 자체를 전달 해야함.
repaet(5,logAll()); // X 이런식으로 전달할 때 함수를 호출하지 말자 !!
repaet(5,logAll); // O 전달할때는 함수 자체를 전달할것
만약 콜백 함수가 고차 함수 내부에만 호출된다면 콜백 함수를
익명 함수 리터럴로 정의하면서 곧바로 고차 함수에 전달하는 것이 일반적이다.
// 익명 함수 리터럴을 콜백 함수로 고차 함수에 전달.
// 익명 함수 리터럴은 repaet 함수를 호출할 때마다 평가되어
함수 객체를 생성함.
[ 고차 함수 ]
function repaet(n,f) {
for(var i = 0; i < n; i++) {
f(i); // i를 전달하면서 f를 호출
}
}
repaet(5, function(i) {
if (i%2) console.log(i) ;
}); // 1,3콜백 함수는 함수형 프로그래밍 패러다임뿐만 아니라 비동기 처리
( 이벤트 처리, ajax 통신, 타이머 함수 등 )에 활용되는 중요 패턴임.
배열 고차 함수에도 사용됨. 자바스크립트에서 배열은 사용빈도가 매우 높기 때문에 배열을 사용할 때 고차 함수는 매우 중요하다.
( 추후 27.9 배열 고차 함수에서 자세히 살펴봄 )
12.7.5 순수 함수와 비순수 함수
함수형 프로그램에서
어떤 외부 상태에서 의존하지 않고 변경하지도 않는, 즉 부수효과가 없는 함수를 순수 함수라고 하고,
외부 상태에 의존하거나, 외부 상태를 변경하는, 즉 부수효과가 있는 함수를
비 순수 함수라고 한다.
순수 함수는 동일한 인수가 전달되면 언제나 동일한 값을 반환한다.
비 순수 함수는 함수의 외부 상태에 따라 반환값이 달라진다.
순수 함수는 일반적으로 최소 하나 이상의 인수를 전달 받는다.
- 인수를 전달받지 않으면 그건 그냥 상수나 다름없다. 그러므로 최소 하나 이상의 인수를 전달받지 않는 순수 함수는 의미가 없음.
순수 함수의 또 하나의 특징은 함수의 외부 상태를 변경시키지 않음.
즉, 순수 함수는 어떤 외부상태에도 의존하지 않고, 외부 상태를 변경하지도 않는다.
순수 함수 예시
var count = 0; // 현재 카운트를 나타내는 상태
// 순수 함수 increase는 동일한 인수가 전달되면 언제나 동일한 값을 반환함.
function increase(n) {
return n++;
}
// 순수 함수가 반환한 결과값을 변수에 재할당해서 상태를 변경
count = increase(count);
console.log(count); //1
count = increase(count);
console.log(count); //2
비순수 함수 예시
var count = 0; // 현재 카운터를 나타내는 상태 : increase 함수에 의해 변경된다.
// 비순수 함수
function increase(n) {
return ++count; // 외부 상태에 의존하며 외부 상태를 변경한다.
}
// 비 순수 함수는 외부 상태(count)를 변경하므로 상태 변화를 추적하기 어려워진다.
increase();
console.log(count); // 1
increase();
console.log(count); // 2
위 예제와 같이 인수를 전달받지 않고
함수 내부에서 외부 상태를 직접 참조하면 외부 상태에 의존하게 되어
반환값이 변할 수 있고, 외부 상태도 변경할 수 있으므로 비순수 함수가 된다.
함수 내부에서 외부 상태를 직접 참조하지 않더라도 매개변수를 통해 객체를 전달받으면 비순수 함수가 된다.
(이는 12.6절 “참조에 의한 전달과 외부 상태의 변경”에서 이미 살펴봤음)
최대한 순수 함수를 사용하여 부수 효과를 억제하여 프로그래밍 안정성을 높이자.
