Function - 화살표 함수, 즉시 실행 함수, 재귀 함수, 중첩 함수, 콜백 함수, 순수 함수와 비순수 함수

화살표 함수 기본 문법

ES6에서 도입 된 화살표 함수는 function 키워드 대신 화살표를 사용해 보다 간략하게 함수를 선언하는 방법이다.

 

• 화살표 함수는 항상 익명함수로 정의하며 본문이 한 줄인 함수를 작성할 때 유용하다.

var message;

// 기존 function 정의
message = function() {
    return 'hello world!';
};

console.log(message());               //hello world!

// function 키워드 생략
message = () => {
return 'Arrow Function!';
};

console.log(message());              //Arrow Function!

-명령문이 하나만 있을 경우 중괄호 생략 가능

 

-함수 몸체 내부의 문이 값으로 평가 될 수 있는 표현식인 문이라면 암묵적으로 반환(return 생략 가능)

message = () => 'Arrow Functions are simple!';

 

• 매개 변수가 있을 경우

message = (val1, val2) => 'Arrow ' + val1 + val2;

console.log(message('Function', '!'));

//Arrow Function!

 

• 매개변수가 하나이면 소괄호를 생략

매개변수가 없거나 여러 개일 경우 생략 불가

message = val1 => "Arrow " + val;
console.log(message('Functions are GOOD!!!'));


//Arrow Functions are GOOD!!!

 

즉시 실행 함수

함수 정의와 동시와 즉시 호출이 되는 함수로 단 한번만 호출 되며 다시 호출할 수 없다.

즉시 실행 함수는 반드시 () - 그룹 연산자로 감싸야 한다.

 

• 함수 이름이 없는 익명 함수를 사용하는 것이 일반적이다.

(function() {
	console.log('익명 즉시 실행함수! 함수 정의와 동시에 호출!' )
 })();

• 이름을 지어도 다시 호출할 수 없기에 의미가 없다.

(function hello(name){  -> 매개변수
	console.log('기명 즉시 실행함수! 함수 정의와 동시에 호출!');
    console.log(`${name}님 안녕하세요`);
})('홍길동');  -> 전달값


hello('유관순');   // ReferenceError: hello is not defined




//출력
기명 즉시 실행함수! 함수 정의와 동시에 호출!
홍길동님 안녕하세요

 

즉시 실행 함수 용도

 

: 즉시 실행 함수 내에 코드를 모아두면 밖에 있는 코드들과 영역을 분리하여 혹시 있을수도 있는 변수나 함수의 이름 충돌을 방지할 수 있다.

 

재귀 함수

함수가 자기 자신을 호출하는 것을 재귀 호출이라고 한다.

이러한 재귀 호출을 수행하는 함수인 재귀 함수는 반복되는 처리를 위해 사용한다.

 

 

- 팩토리얼(n! = 1 * 2 * ... * (n-1) * n;)을 재귀함수로 표현할 경우

function factorial(n) {
	
    //n이 1 이하일 때 1을 반환하여 반복을 멈춤
    if(n <= 1) return 1;
    
	return n * factorial(n-1);  //재귀 호출

}

 

-> 재귀 함수로 표현하는 것이 직관적인 경우 사용, 잘못 사용하면 스택오버플로우 현상이 발생할 수 있으므로 남용X

 

중첩 함수

함수 내부에 정의 된 함수를 중첩 함수 또는 내부 함수라고 한다.

 

- 중첩 함수를 포함하는 함수는 외부 함수라고 한다.

- 외부 함수의 변수를 내부 함수에서 참조할 수 있다.

- 일반적으로 중첩 함수는 자신을 포함하는 외부 함수를 돕는 헬퍼 함수의 역할을 한다.

 

function outer () {
    var outerVal = '외부 함수';

    function inner () {
        var innerVal = '내부 함수';
        console.log(outerVal + ", " + innerVal); 
    }

    inner();  //내부 함수를 호출해야 내부 함수의 동작을 가져다 쓴다. 출력 가능

}

outer();  // 출력불가. outer 함수 선언만 읽혀진다.
inner();  // outer 안에서 동작하는 함수이기 때문에 인식 안됨.


// 출력
외부 함수, 내부 함수

 

콜백 함수

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

- 매개변수를 통해 함수의 외부에서 콜백 함수를 전달 받은 함수를 고차 함수라고 한다.

- 콜백 함수는 고차 함수에 전달 되어 헬퍼 함수의 역할을 한다.

// 전달 받는 값을 증가 시켜주는 함수
function increase(value) {
    return value + 1;
}

// 전달 받는 값을 감소 시켜주는 함수
function decrease(value) {
    return value - 1;
}

 

 - 고차 함수는 매개변수를 통해 전달 받은 콜백 함수의 호출 시점을 결정해서 호출한다.

 - 콜백 함수는 고차 함수에 의해 호출 되며 이 때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.

 

 

// 전달 받은 함수에 전달 받은 값을 적용 시켜주는 고차 함수
function apply(func, value) {
  
    return func(value);
}

// 고차 함수로 콜백 함수를 전달하며 호출한다.

console.log(apply(increase, 5));   // 6
console.log(apply(decrease, 5));   // 4

 

- 콜백 함수가 고차 함수 내부에서만 호출 된다면 콜백 함수를 익명 함수 리터럴로 정의하면서 바로 고차 함수에 전달하는 것이 일반적이다.

 

console.log(apply(function(value){ return value + 1;}, 10));   // 11  -> 함수명 생략
console.log(apply(value => value -1, 10));       // 9  -> function 생략, 중괄호, 리턴 생략

 

- 함수의 변하지 않는 공통 로직은 미리 정의해두고 경우에 따라 변경 되는 로직은 추상화해서 함수의 외부에서 내부로 전달하는 방식이다.

- 콜백 함수는 비동기 처리(이벤트, 타이머, ajax)에서 활용 되는 중요한 패턴이며 배열 고차 함수에서도 사용 된다.

 

* 참고

배열은 대괄호[]

sort() 함수는 배열을 정렬하는 함수. 정렬 기준을 전달 받는다.sort() 함수는 고차 함수, 정렬기준 함수는 콜백 함수이다.

console.log([3, 1, 4, 2, 5].sort((left, right) => right - left));


-> 양수가 반환되면 순서를 바꾼다. 역순으로 정렬됨 [5, 4, 3, 2, 1]

 

순수함수와 비순수함수

순수 함수 : 외부 상태에 의존하지도 않고 변경하지도 않는 함수

비순수 함수 : 외부 상태에 의존하거나 외부 상태를 변경하는 함수

 

-> 함수 외부 상태의 변경을 지양하는 순수 함수를 사용하는 것이 좋다.

 

- 순수 함수는 최소 하나 이상의 인수를 전달 받으며 인수의 불변성을 유지한다.

var cnt = 0;

function increase(n) {
    return ++n;
}

- 순수 함수가 반환한 결과 값을 변수에 재할당해서 상태를 변경한다.

cnt = increase(cnt);
console.log(cnt);     // cnt 는 1이 출력된다

 

- 비순수 함수는 외부 상태에 의존하며 외부 상태를 변경한다.

function decrease() {
    return --cnt;
}

 

- 비순수 함수는 외부 상태(cnt)를 변경하므로 상태 변화를 추적하기 어려워진다.

-> 함수는 input을 받아서 연산한 값을 반환하는 형태가 좋다.

decrease();        // --cnt로 변경
console.log(cnt);  // 0