.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
함수란?
•
문으로 구현하고 코드 블록을 감싸서 하나의 실행 단위로 정의한 것
•
함수정의를 통해 생성하고 함수 호출을 통해 실행
•
구조 : function isFunction(매개변수) {return 반환값}; isFunction(인수);
◦
매개변수 : 내부로 입력을 전달받는 변수
◦
인수/전달인자 : 입력
◦
반환값 : 출력
◦
isFunction(매개변수)에서 (매개변수)는 함수 호출 연산자
함수를 사용하는 이유
•
코드의 재사용
•
유지보수의 편의성
•
코드의 신뢰성
•
코드의 가독성
함수 리터럴
•
객체 타입의 값 - 호출 가능한 객체
•
function 키워드, 함수 이름, 매개변수 목록, 함수 몸체
•
함수 이름 : 함수 몸체 내에서만 참조할 수 있는 식별자
함수 정의
함수 선언문
•
함수 리터럴과 형태 동일
•
리터럴은 함수 이름을 생략할 수 있으나 함수 선언문은 함수 이름을 생략할 수 없다.
•
리터럴과 선언문 구분법
◦
함수 리터럴이 단독으로 쓰인다 --> 함수 선언문
◦
함수 리터럴이 값으로 평가되어야 하는 문맥이다 --> 함수 리터럴 표현식
// 단독사용 -> 함수 선언문(이름 생략 불가)
function foo() { console.log('foo') }
foo(); // foo <-- 호출할 수 있다! 그러나 어떻게 호출한 걸까??
// 자바스크립트 엔진이 생성된 함수를 호출하기 위해 함수 이름과 동일한 식별자를 암묵적으로 생성하고 거기에 함수 객체 할당했기 때문
// ===
var foo = function foo() { console.log('foo'); };
// 함수리터럴
(function bar() { console.log('bar'); });
bar(); // ReferenceError: bar is not defined
JavaScript
복사
함수 표현식
•
일급 객체 : 값의 성질을 갖는 객체
•
함수 리터럴의 함수 이름은 생략이 가능
•
리터럴은 이것이 일반적이고 이를 익명함수라고 명명
함수 생성 시점과 함수 호이스팅
console.log(add(2, 5)); // 7
console.log(sub(2, 5)); // TypeError
function add(x, y) {
return x + y;
}
var sub = function (x, y) {
return x - y;
};
JavaScript
복사
•
함수 선언문 --> 런타임 이전 엔진에 의해 먼저 실행되어 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당. --> 함수 호이스팅이 발생
•
함수 표현식 --> 런타임 이전 엔진에 의해 변수가 호이스팅되어 undefined로 할당되어 있음
Function 생성자 함수
•
Function 생성자 함수로 함수를 생성하면 클로저 생성 X 및 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작
var add = new Function('x', 'y', 'return x + y');
console.log(add(2, 5)); // 7
JavaScript
복사
화살표 함수(ES6) (lambda function)
const add = (x, y) => x+y;
console.log(add(2,5));
JavaScript
복사
함수 호출
매개변수와 인수
•
함수는 매개변수의 개수와 인수의 개수가 일치하는 지 체크X
•
매개 변수보다 인수가 많은 경우 초과된 인수는 무시
인수 확인
•
매개변수와 인수의 개수가 일치하는 지 확인하지 않고, 동적 타입 언어여서 인수확인이 어렵기 때문에 함수 내부에서 확인을 하거나 기본값을 할당하여 확인 필요.
매개변수의 최대 개수
•
매개변수는 최대 3개이상 넘지 않는 것을 권장
--> 함수는 한 가지 일만 해야하며 가급적 작게 만들어야한다.
반환문
•
함수 호출 = 표현식
--> return 키워드가 반환한 표현식의 평가 결과값으로 평가되기 때문
참조에 의한 전달과 외부 상태의 변경
•
객체 타입인수는 '참조 값'이 복사되어 매개변수에 전달되기 때문에 원본이 변경되지만 원시타입은 값 자체가 복사되어 매개변수에 전달되어서 새로운 메모리에 그 값을 할당하여 사용하기 때문에 부수효과 발생 X
다양한 함수의 형태
즉시 실행 함수
•
함수 정의와 동시에 즉시 호출되는 함수 --> 즉시 실행 함수라고 하고 단 한 번만 호출
•
그룹 연산자의 피연산자는 값으로 평가
•
기명 또는 무명함수를 그룹 연산자’()’로 감싸면 함수 리터럴로 평가되어 함수 객체가 됨
// 익명 즉시 실행 함수
(function() {
var a = 3;
var b = 5;
return a * b;
}());
// 기명 즉시 실행 함수
(function foo() {
var a = 3;
var b = 5;
return a * b;
}());
foo(); // ReferenceError: foo is not defined
// 선언문 <- (표현식)
// 즉시 실행 함수도 일반 함수처럼 값을 반환할 수 있다.
var res = (function () {
var a = 3;
var b = 5;
return a * b;
}());
console.log(res); // 15
// 즉시 실행 함수에도 일반 함수처럼 인수를 전달할 수 있다.
res = (function (a, b) {
return a * b;
}(3, 5));
console.log(res); // 15
JavaScript
복사
재귀 함수
•
함수 자기 자신을 호출하는 것을 재귀 호출이라 하며 재귀 함수는 자기 자신을 호출하는 행위, 즉 재귀 호출을 수행하는 함수를 말함.
•
재귀함수는 자신을 무한 호출하기 때문에 탈출 조건을 반드시 만들어야 한다. --> 그렇지 않으면 스택 오버플로가 발생
중첩 함수
•
함수 내부에 정의된 함수를 중첩 함수 또는 내부 함수라고 한다.
•
외부 함수 = 중첩 함수를 포함하는 함수
function outer() { // 외부함수
var x = 1;
// 중첩 함수
function inner() {
var y = 2;
// 외부 함수 변수를 참조 가능
console.log(x + y); // 3
}
inner();
}
outer();
JavaScript
복사
콜백 함수
•
함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수
•
고차함수
◦
매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수
◦
콜백 함수를 자신의 일부분으로 합성하고 고차함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한다.
•
고차 함수에 의해 호출되며, 이때 고차함수는 필요에 따라 콜백함수에 인수를 전달할 수 있다.
// 콜백 함수를 사용하는 고차 함수 map
var res = [1, 2, 3].map(function (item) {
return item * 2;
});
console.log(res); // [2, 4, 6]
// 콜백 함수를 사용하는 고차 함수 filter
res = [1, 2, 3].filter(function (item) {
return item % 2;
});
// filter의 predicate --> true또는 false를 반환함.
// 첫번째인자: element, 두 번재인자: index, 세 번째 인자: 배열 전체
console.log(res); // [1, 3]
// 콜백 함수를 사용하는 고차 함수 reduce
res = [1, 2, 3].reduce(function (acc, cur) {
return acc + cur;
}, 0);
console.log(res); // 6
JavaScript
복사
순수 함수와 비순수 함수
•
순수함수 : 부수 효과가 없는 함수 - 함수 내부에서 처리
var count = 0; // 현재 카운트를 나타내는 상태
// 순수 함수 increase는 동일한 인수가 전달되면 언제나 동일한 값을 반환한다.
function increase(n) {
return ++n;
}
// 순수 함수가 반환한 결과값을 변수에 재할당해서 상태를 변경
count = increase(count);
console.log(count); // 1
count = increase(count);
console.log(count); // 2
JavaScript
복사
•
비 순수 함수 : 부수효과가 있는 함수 - 외부 상태에 의존하거나 외부 상태를 변경
var count = 0; // 현재 카운트를 나타내는 상태: increase 함수에 의해 변화한다.
// 비순수 함수
function increase() {
return ++count; // 외부 상태에 의존하며 외부 상태를 변경한다.
}
// 비순수 함수는 외부 상태(count)를 변경하므로 상태 변화를 추적하기 어려워진다.
increase();
console.log(count); // 1
increase();
console.log(count); // 2
JavaScript
복사
