12.1 함수란?
- 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것
- 매개변수 : 함수 내부로 입력을 전달받는 변수
- 인수 : 입력
- 반환값 : 출력
- 함수는 함수 정의를 통해 생성함
- 함수 호출 : 함수의 실행을 명시적으로 지시
// 함수 정의
function add(x, y) {
return x+ y;
}
// 함수 호출
var result = add(1, 2);
console.log(result); // 귀요미~ 아니고 3 🤣
12.2 함수를 사용하는 이유
- 코드의 재사용
- 코드의 재사용은 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높임
- 함수 이름은 자신의 역할을 잘 설명해야함. 잘 붙인 함수명은 코드의 가독성을 향상시킴.
12.3 함수 리터럴
- JS의 함수는 객체 타입의 값임.
- 함수 리터럴은 function 키워드, 함수 이름, 매개 변수 목록, 함수 몸체로 구성됨
- 일반 객체는 호출할 수 없지만 함수는 객체지만 호출할 수 있음
12.4 함수 정의
| 함수 정의 방식 |
예시 |
| 함수 선언문 |
function add(x, y) |
| 함수 표현식 |
var add = function (x, y) |
| Function 생성자 함수 |
var add = new Function(‘x’, ‘y’, ‘return x+y’); |
| 화살표 함수 |
var add = (x, y) => x + y; |
12.4.1 함수 선언문
- 함수 선언문은 표현식이 아닌 문임.
- 함수 선언문은 이름을 생략할 수 없음.
function add(x, y){
return x + y;
}
- 함수명은 함수 몸체 내 (메모리상 객체가 위치하는 곳)에 위치하고 있음. 참조값의 식별자는 JS엔진이 암묵적으로 동일하게 생성함.
12.4.2 함수 표현식
- 함수는 일급객체 : JS의 함수는 값처럼 변수에 할당할 수도 있고 프로퍼티 값이 될수도 있으며 배열의 요소도 될 수 있음. 이러한 객체를 일급객체라고함
- 함수 표현식 : 함수 리터럴로 생성한 함수 객체를 변수에 할당한 것
var add = function (x, y) {
return x + y;
}
- 함수 리터럴의 이름은 생략가능.(익명 함수)
- 함수 표현식의 함수 리터럴은 이름을 생략하는게 일반적
12.4.3 함수 생성 이름과 함수 호이스팅
- 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출 가능 (호이스팅 됨)
- 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출 불가능 (런타임 이전에 참조하면 undefined)
12.4.4 Function 생성자 함수
- Function 생성자로 생성한 함수는 클로저를 생성하지 않는 등, 함수 선언문, 함수 표현식으로 생성한 함수와 다르게 동작한다.
- 쓰지말자.
12.4.5 화살표 함수
- 화살표 함수는 생성자 함수로 사용할 수 없으며, 기존 함수와 this 바인딩 방식이 다르고, prototype 프로퍼티가 없으며 arguments 객체를 생성하지 않는다. 따라서 더 가볍다.
const add = (x, y) => x + y;
12.5 함수호출
- 함수는 함수를 가리키는 식별자와 한쌍의 소괄호인 함수 호출 연산자로 호출함.
12.5.1 매개변수와 인수
- 함수를 실행하기 위해 필요한 값을 함수 외부에서 내부로 전달하는 경우 매개변수를 통해 인수를 전달한다.
- 인수는 값으로 평가될 수 있는 표현식이여야 한다.
function add(x, y) { //매개변수 x, y
return x + y; // 반환값
}
var result = add(1, 2); // 인수 1, 2를 전달
- 매개변수는 함수 몸체 내부에서만 참조할 수 있음.(매개변수의 스코프 = 함수 내부)
- 함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않음. 인수가 부족해서 할당되지 않은 매개변수의 값은 undefined임.
- 초과된 인수는 arguments 객체에 보관되고 사용할 수 있음
12.5.2 인수 확인
- TS등을 사용하거나 함수 내부에서 타입등을 확인해 정확한 인수가 전달되었는지 확인할 필요가 있음
- 매개변수 기본값을 사용하여 인수 체크를 간소화할 수 있음
인수 타입 확인
| 방법 |
인텔리센스 |
컴파일 시점 |
런타임 시점 |
| typescript |
O |
O |
X |
| jsdoc |
O |
X |
X |
| 함수 내 typeof 확인 |
X |
X |
O |
|
|
|
|
- 위와 같은 이유로 TS와 함께 동작하는 validator를 같이 써주면 좋음.( zod 등)
12.5.3 매개변수의 최대 개수
- 이상적인 함수는 한가지 일만 해야하며 가급적 작게 만들어야함.
- 매개변수가 3개를 넘지 않는것을 권장하며, 그 이상일 시 객체 사용 권장
- 주의 : 함수 외부에서 함수 내부로 전달한 객체를 함수 내부에서 변경하면 함수 외부의 객체가 변경됨
12.5.4 반환문
- 함수는 return 키워드와 표현식으로 반환문을 사용해 실행 결과를 함수 외부로 반환할 수 있음.
- 반환문은 함수 실행을 중단하고 함수 몸체를 빠져나감. 반환문 뒤의 문은 무시됨
- 반환문은 return 키워드 뒤에 오는 표현식을 평가해 반환함. (표현식이 없을 경우 undefined를 반환함)
- 반환문은 생략 가능(undefined 반환)
12.6 참조에 의한 전달과 외부 상태의 변경
- 원시값은 복사되어 매개변수에 전달되어 원본이 훼손되지 않음.
- 객체는 참조값이 복사되어 매개변수에 전달되기때문에 함수 내부에서 객체를 변경할 경우 원본이 훼손됨. (깊은 복사를 사용하여 이런 상황을 피하자)
12.7 다양한 함수의 형태
12.7.1 즉시 실행 함수
- 함수의 정의와 동시에 즉시 실행되는 함수
- 재실행이 불가하다
- 즉시 실행 함수는 반드시 그룹 연산자 ( )로 감싸야 함.
// 익명 즉시 실행 함수
(function () {
var a = 3;
var b = 5;
return a * b;
}());
// 기명 즉시 실행 함수
(function foo() {
var a = 3;
var b = 5;
return a * b;
}());
foo(); // ReferenceError
(function (a, b) {
return a * b;
}(3, 5)); // 인수 전달
12.7.2 재귀 함수
- 함수가 자기 자신을 호출하는 것
- 반복 처리를 위해 사용
- 무한 반복에 빠질 수 있으므로 주의 요망
- 반복문보다 더 직관적일때 한정적으로 사용
function countdown(n) {
if (n < 0) return;
console.log(n);
countdown(n - 1); // 재귀 호출
}
countdown(10);
12.7.3 중첩 함수
- 함수 내부에 정의된 함수를 중첩 함수 또는 내부 함수라고 함.
- 중첩 함수를 포함하는 함수는 외부 함수라고 함.
- 일반적으로 중첩 함수는 자신을 포함하는 외부 함수를 돕는 헬퍼 함수 역할을 함.
function outer() {
var x = 1;
// 중첩 함수
function inner() {
var y = 2;
// 외부 함수의 변수를 참조할 수 있다.
console.log(x + y); // 3
}
inner();
}
outer();
- 함수는 if문이나 for문 등에서도 정의가능. 단 호이스팅으로 인해 혼란이 발생할 수 있으니 조심
12.7.4 콜백함수
- 콜백 함수 : 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수
- 고차 함수 : 매개변수를 통해 외부에서 콜백 함수를 전달 받은 함수
- 고차 함수는 매개변수를 통해 전달 받은 콜백 함수의 시점을 결정해서 호출함. 즉, 콜백 함수는 고차 함수에 의해 호출되며 이때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달 할 수 있음.
// 외부에서 전달받은 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 고차함수, logAll 콜백함수
repeat(5, logAll); // 0 1 2 3 4
var logOdds = function (i) {
if (i % 2) console.log(i);
};
// 반복 호출할 함수를 인수로 전달한다.
repeat(5, logOdds); // 1 3
12.7.5 순수 함수와 비순수 함수
- 순수 함수 : 사이드 이펙트가 없는 함수
- 비순수 함수 : 사이드 이펙트가 있는 함수.(외부 상태나 객체를 변경하거나 의존함)