함수란?

함수란?

함수는 작은 기능의 단위입니다

함수는 함수의 호출과 정의가 있습니다

function add(x,y){
    return x + y;
}
 
add(1,2);

function add(x,y)은 함수를 선언(생성)하는것 입니다

add는 함수의 이름이라 부르고

x,y는 파라미터라고 부릅니다

 

add(1,2)는 함수를 호출을 합니다

1,2는 인수라고 합니다

 

정리

함수를 호출할땐 함수이름()으로 호출하고

함수에 데이터를 전달할때는 소괄호()안에 데이터를 넣어주고

그 데이터는 인자(매개변수)라고 부릅니다

인수(매개변수가) 함수안에서는 

파라미터라고 불립니다

 

함수를 사용하는 이유

함수를 사용하는 이유는 재사용성 측면에서 매우 유용합니다

반복적으로 실행하는 코드가 있으면 함수로 만들어서 사용하면 코드를 간견하게 작성할 수 있고 

추후에 코드를 변경하는등 유지보수에도 좋습니다

function add(x,y){
    return x + y;
}
 
let result = 0;
 
result = add(1,2); //값 3
result = add(3,5); //값 8
result = add(4,2); //값 6
result = add(4,5); //값 9
 
//함수 add를 이용하면 반복되는 더하기 기능을 작성하지 않아도 반복해서 재사용 할 수 있다

 

함수를 정의하는 방식

자바스크립트는 함수를 정의하는(생성하는) 방식이 여러가지가 있습니다

//함수 선언문
function add(x,y){
    return x + y;
};
 
//함수 표현식
const add = function(x,y){
    return x + y;
};
 
//화살표 함수
const add = (x,y) => x + y;

 

함수 선언문과 함수 표현식의 차이

함수 선언문과 함수 표현식에는 차이가 있습니다

함수 선언문과 표현식은 함수의 생성시점에서 차이가 있습니다

 

함수 선언문은 함수 호이스팅이 일어납니다

함수 선언문은 런타임 이전에 메모리에 할당되며 함수 선언문 이전에 함수를 호출 할 수 있게 됩니다

 

함수 표현식은 변수에 할당하는 함수이므로 변수 호이스팅이 일어납니다

함수 표현식은 런타임에 평가되며 함수 표현식이 할당되는 시점에 메모리에 할당되며 함수 선언문 이전에는 함수를 호출 할 수 없습니다

함수 호이스팅(함수 선언문)은 함수를 호출하기전에 반드시 함수를 선언해야된다는 규칙을 무시하기 때문에 함수 표현식을 권장하는 사람들이 많습니다

add1(1, 2);    //3
add2(1, 2);    //ReferenceError: add2 is not defined
add3(1, 2);    //ReferenceError: add3 is not defined
 
//함수 선언문
function add1(x, y) {
    return x + y;
}
 
//함수 표현식
const add2 = function (x, y) {
    return x + y;
};
 
//화살표 함수
const add3 = (x, y) => x + y;

 

함수의 형태

함수의 형태로는 즉시실행함수, 재귀함수, 콜백함수,중첩함수등등이 있습니다

 

즉시실행 함수

함수의 정의와 실행을 동시에 하는 경우 즉시실행 함수라고 합니다

즉시실행 함수는 단 한번만 호출될떄 사용합니다

( ) 으로 함수를 감싸고 함수 끝에 ( )을 넣어 선언해야됩니다

let sum = (function (x, y) {
    return x + y;
})(1, 2);
 
console.log(sum); // 결과값 3

 

재귀 함수

함수가 함수자신을 호출하는것을 재귀 호출이라고 하고 함수 자신을 호출하는 함수를 재귀 함수라고 합니다

재귀함수의 대표적인 예로 팩토리얼을 계산하는 문제가 있습니다

// 팩토리얼은 1 부터 자기자신까지 모든 정수의 곱 입니다
 
function factorial(n) {
    // 재귀 탈출조건
    if (n <= 1) return 1;
 
    //자기 자신을 부르는 재귀호출
    return n * factorial(n - 1);
}
 
console.log(factorial(5));  // 5! = 5 * 4 * 3 * 2 * 1 = 120;

 

 

중첩 함수

함수내에 함수를 정의를 한 함수를 중첩 함수라고 합니다

외부에 정의된 함수를 외부함수 내부에 정의된 함수를 내부함수라고 합니다

내부함수는 보통 외부함수를 도와주는 헬퍼 함수의 역할을 합니다

// 외부함수 outer
function outer(x) {
    // 내부함수 inner
    function inner(y) {
        //내부함수는 외부함수의 변수를 참조할 수 있습니다
        //그러므로 외부함수의 파라미터인 x를 이용 할 수 있습니다
        return x * x;
    }
 
    //외부함수에서 내부함수를 호출;
    return inner();
}
 
let result = outer(2);  // 결과값 4 

 

 

 

콜백 함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고 합니다

또한 이렇게 매개변수를 통해 외부에서 콜백 함수를 전달핟은 함수를 고차함수라고 합니다

콜백함수는 고차함수 뿐만아니라 비동기 처리에서 활용되는 중요한 패턴입니다

//매개변수를 통해 콜백함수 func를 전달받은 고차함수 repeat
function repeat(n, func) {
    for (let i = 0; i < n; i++) {
        //콜백함수 func
        //매개변수로 전달된 함수를 실행
        func(i);
    }
}
 
const isOdd = function (n) {
    if (n % 2 === 1) console.log(n);
};
 
const isEven = function (n) {
    if (n % 2 === 0) console.log(n);
};
 
repeat(10, isOdd);      // 1 3 5 7 9
repeat(10, isEven);     // 0 2 4 6 8

 

콜백함수를 쓰는 이유는 repeat함수의 for문(반복문)은 동일하지만 

반복문 내부에서 서로 다른일을 하고 싶다면 콜백함수를 작성하여 다른 처리를 할 수 있습니다

만약 repeat내부에 isOdd, isEven함수의 기능을 작성했다면 repeat함수내에서 반복문을 2번 사용해야됩니다

하지만 콜백함수를 사용하면 위의 코드처럼 반복문을 1번만 사용해도 됩니다

정리하지만 공통적으로 수행하는 부분을 미리 정의해두고(repeat함수) 경우에 따라 변경되는 로직(isOdd, isEven함수)은

추상화해서 함수 외부에서 함수 내부로 전달한것입니다