[자바스크립트 필기] #7 - 함수

 

*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 

 

1. 함수란? 

프로그래밍에서 함수는 어떤 기능들을 코드 블록({})으로 감싸서 '하나의 실행 단위'로 정의한 것이다. 

 

함수의 형태

• 매개 변수 : 함수 내부로 입력을 전달받는 변수
• 인수 : 입력
• 반환값 : 출력 
• 함수는 값이다. 

함수는 함수 정의를 통해 생성된다. 이런 정의에는 다양한 방법이 있다. 

// 함수 정의
function add(x, y) {
    return x + y;
}

함수 호출 - 인수를 매개변수를 통해 함수에 넘겨주면서 함수의 실행을 지시하는 것

// 함수 호출
var result = add(2, 5);
// 인수로 2와 5를 넘겨주면서 7을 반환함.
console.log(result);

 

2. 함수 리터럴 

 

함수 또한 객체 값이다. 따라서 함수 리터럴로 함수를 생성할 수 있다. 

이러한 함수 리터럴은 function 키워드, 함수 이름, 매개변수 목록, 함수 몸체로 구성된다. 

구성 요소	설명
함수 이름	함수이름 -> 식별자  생략가능 -> 이름을 생략한 함수는 익명함수라고 한다.
매개변수 목록	매개변수 목록은 순서에 의미가 있다. 매개변수는 함수 몸체 안에서 변수와 동일하게 취급된다.
함수 몸체	함수 호출 시 실행될 코드들을 하나의 실행 단위로 묶은 코드 블록이다.

함수는 객체인데, 일반 객체와 다르게 함수는 호출할 수 있다. 그리고 함수 객체만의 고유한 프로퍼티도 갖는다. 

 

3. 함수 정의 

함수 정의 방식	예시
함수 선언문	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');
화살표 함수	var add = (x, y) => x + y;

4. 함수 호출 

// 함수 선언문 
function add(x, y) {
    return x + y;
}

// 함수 호출 
var result = add(1, 2);

• 매개변수는 함수 몸체 내부에서만 참조할 수 있다. 
• 함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않는다. 
• 이상적인 함수는 한 가지 일만 해야하고, 가급적 작게 만들어야한다. 
• 따라서 매개변수는 최대 3개 이상을 넘지 않는 것이 권장된다. 
• 함수에서 return 키워드로 실행 결과를 함수 외부로 반환할 수 있다. 

5. 다양한 함수의 형태

 

재귀 함수

자기가 자기 자신을 호출하는 함수 

// 일반적인 방법
// function countdown(n) {
//     for (var i=0; i >= 0; i--) console.log(i);
// }
// countdown(10);

function countdown(n) {
    if (n < 0) return;
    console.log(n);
    countdown(n - 1); // 재귀 호출
}
countdown(10);

콜백 함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백함수라고 한다. 그리고 매개변수를 받는 함수를 고차 함수라고 한다. 

// 외부에서 전달받은 f를 n만큼 반복 호출.
function repeat(n, f) {
    for (var i = 0; i < n; i++) {
        f(i); 
    }
}

var logAll = function (i) {
    console.log(i);
};

var logOdds = function (i) {
    if (i % 2) console.log(i);
};

//반복 호출할 함수를 인수로 전달한다.
repeat(5, logAll); // 0 1 2 3 4

//반복 호출할 함수를 인수로 전달한다.
repeat(5, logOdds); // 1 3

 

여기까지 입니다 - 틀린 점이 있다면 꼭 지적해주세요!