JavaScript - 콜백함수

콜백함수 이해하기 - 1

- 자바스크립트 라이브러리에서 가장 많이 사용되는 형태
- 함수형 프로그래밍 : 활용하는 형태...
- 함수도 데이터 타입의 일종이기 때문에 값처럼 주고 받을 수 있다.

소스

"use strict";
function fn() {
  console.log("fn 호출됨..");
}

// 함수는 값처럼 사용 가능하기 때문에 변수에 담을 수 있다. (일급객체)
var f1 = fn;
var f2 = fn;

fn();
f1();
f2();

결과

fn 호출됨..
fn 호출됨..
fn 호출됨..

콜백함수 이해하기 - 2

- 매개변수로 함수 넘기기
- 매개변수로 함수를 넘길때 주로 익명함수를 많이 사용한다. (대부분 일회성으로 사용되기에..)

소스

function fn(callback) {
	// 결과값에 대한 undefined가 넘어옴
	// 오브젝트일경우 function이 실행됨 (실제 오브젝트임)
	console.log("callback type : ", typeof callback);

	callback(); // 매개변수인 callback에 들어온 함수를 받아서 실행하는 개념
}

function func1() {
    console.log("func1이 실행됨");
    // 리턴이 없는 경우 undefiend 반환
}

//fn( func1() ); // 펑션 실행의 결과값을 넘김
fn(func1) // 펑션 자체를 넘김


//익명함수 사용, 매개변수로 함수를 직접 선언
fn(function() {
	console.log("1. 익명 함수 실행 됨..");
});
//화살표 함수로 변경시
fn(() => {
	console.log("2. 익명 함수 실행 됨..");
});

결과

callback type :  function
func1이 실행됨
callback type :  function
1. 익명 함수 실행 됨..
callback type :  function
2. 익명 함수 실행 됨..

콜백함수 이해하기 - 3

- 함수를 결과로 리턴하기

소스

function fn() {
    // 내부함수
    function cb() {
        console.log("1. 리턴된 함수 실행");
    }
    //return cb(); // 결과리턴 - undefined - return이 없으니 기본값인 undefined
    return cb; // 함수를 리턴
}

var func1 = fn();
func1();

// 내부함수를 익명함수로 변경
function fn2() {
    // 익명함수로 리턴
    return function () { console.log("2. 리턴된 함수 실행") };
}
var func2 = fn2();
func2();


// 익명함수를 화살표 함수로 변경
function fn3() {
  return () => console.log("3. 리턴된 함수 실행");
}
var func3 = fn3();
func3();

fn3()(); // 가능


// 익명함수를 화살표 함수로 변경
var func4 = () => () => console.log("4. 리턴된 함수 실행");

func4()();

결과

1. 리턴된 함수 실행
2. 리턴된 함수 실행
3. 리턴된 함수 실행
3. 리턴된 함수 실행
4. 리턴된 함수 실행