JavaScript 문법 종합 4주차(콜백함수01)

콜백함수

다른 코드의 인자로 넘겨주는 함수, 어떤 이벤트에 의해 호출되어지는 함수로 간단히 말해 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다.

다시 말하면, 제어권을 넘겨줄테니 너가 알고 있는 그 로직으로 처리해줘!

즉, 콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수
콜백 함수를 위임받은 코드는 자체적으로 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행

function a() {
    B()
    console.log("Hello A")
}

function B() {
    C()
    console.log("Hello B")
}

function C() {
    console.log("Hello C")
}

c()

> 함수는 호출을 해야 실햄되는데 현재 C( )로 함수C만 호출된 상태이므로
> Hello C

---

function A() {
    B()
    console.log("Hello A")
}

function B() {
    C()
    console.log("Hello B")
}

function C() {
    console.log("Hello C")
}

A()​

> A( )를 호출했으나 A안에 B, B안에 C 불려오면서 불려오고 나서 console을 출력하기 때문에 Hello C가 먼저 출력
> Hello C
> Hello B
> Hello A

---

function a() {
    console.log("Hello A")
	B()
}

function B() {
    console.log("Hello B")
    C()
}

function C() {
    console.log("Hello C")
}

A()

> Hello A 
> Hello B
> Hello C

"Hello A"가 출력된 후 B 함수를 호출했다. 이후 "Hello B" 문자 출력 후 C 함수를 호출하여 출력하게 됐다.

이렇게 호출(Call) 했을 때. 어떤 함수로 인수가 넘겨져서 응답(Back)되는 이벤트에 의해 호출되는 것을 콜백 함수라 한다.

 

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

function showOk() {
  alert( "동의하셨습니다." );
}

function showCancel() {
  alert( "취소 버튼을 누르셨습니다." );
}

// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("동의하십니까?", showOk, showCancel);

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); },
  function() { alert("취소 버튼을 누르셨습니다."); }
);

---

제어권

호출 시점에 대한 제어권

setInterval

setInterval(function( ){ }, 원하는 시간)

반복해서 매개변수로 받은 콜백 함수의 로직을 수행한다.

 

var count = 0;

var timer = setInterval(function() {
	console.log(count);
	if(++count > 4) clearInterval(timer);
}, 300);

> timer를 지정할 건데 setInterval로 지정하겠다.
> setInterval의 매개변수 안에 함수가 들어가고, 
> 함수는 console.log(count)를 출력하는 함수이다.
> 만약에 count에 ++한 값이 4보다 크면 clearInterval을 할거고
> timer의 고유값을 clearInterval해

var count = 0;
var cbFunc = function () {             // cbfunc로
	console.log(count);
	if (++count > 4) clearInterval(timer);
};
var timer = setInterval(cbFunc, 300);  // setInterval로

> cbFunc로 함수를 따로 빼줘도 된다.
> 원래 cbFunc()를 수행한다면 그 호출주체와 제어권은 모두 사용자
> setInterval로 넘겨주게 되면 그 호출주체와 제어권은 모두 setInterval

---

인자에 대한 제어권

map

arr.map(callback(currentValue[, index[, array]])[, thisArg])

 

var newArr = [10, 20, 30].map(function (currentValue, index) {
	console.log(currentValue, index); // 10 0 20 1 30 2
	return currentValue + 5;
});
console.log(newArr);

// -- 실행 결과 --
// 10 0
// 20 1
// 30 2
// [ 15, 25, 35 ]​

---

var newArr2 = [10, 20, 30].map(function (index, currentValue) {
	console.log(index, currentValue);
	return currentValue + 5;
});
console.log(newArr2);

// -- 실행 결과 --
// 10 0
// 20 1
// 30 2
// [ 5, 6, 7 ]

 

> 매개변수 currentValue, index의 순서를 바꾼다면 원하는 결과와는 다른 값이 나오는데, 이는 전적으로 map메서드 즉 콜백 함수를 넘겨받은 코드에게 제어권이 있기 때문이다. (인자의 순서 역시) 그래서 map메서드의 규칙에 맞게 코드를 작성해야 한다.

---

this

Array.prototype.map123 = function (callback, thisArg) {

    // map함수에서return할 결과 배열
    var mappedArr = [];

    for (var i = 0; i < this.length; i++) {
        var mappedValue = callback.call(thisArg || global, this[i]);
        mappedArr[i] = mappedValue;
    }
    return mappedArr;
};

var newArr = [1, 2, 3].map123(function(number){
    return number * 2;
});

console.log(newArr);​

> call/apply 메서드의 첫 번째 인자에서 콜백 함수 내부에서 사용될 this를 명시적으로 binding 하기 때문에 this에 다른 값이 담길 수 있는 것이다.

---

콜백 함수 함수!!

콜백 함수로 어떤 객체의 메서드를 전달해도 그 메서드는 메서드가 아닌 함수로 호출한다.

var obj = {
	vals: [1, 2, 3],
	logValues: function(v, i) {
		console.log(this, v, i);
	}
};

// obj 객체이며
// vals라는 배열과
// logValues라는 함수를 가짐

var obj = {
	vals: [1, 2, 3],
	logValues: function(v, i) {
		console.log(this, v, i);
	}
};

obj.logValues(1, 2);
// { values: [1, 2, 3], logValues: [Function: logValues] } 1 2
// method로써 호출
// v=1, i=2가 되면서 
// this를 obj로 잡아주고 있다.

var obj = {
	vals: [1, 2, 3],
	logValues: function(v, i) {
        console.log(">>> test starts");
        if (this === global) {
           console.log('this가 golbal입니다.원하지 않는 결과')
        } else {
            console.log(this, v, i);
        }
        console.log(">>> test ends");
		
	}
};

// obj.logValues(1, 2);

[4, 5, 6].forEach(obj.logValues);
// 콜백 함수를 넣을 때는 함수 그 자체를 넣어야 한다.

// >>> test starts
// this가 golbal입니다.원하지 않는 결과
// >>> test ends
// >>> test starts
// this가 golbal입니다.원하지 않는 결과
// >>> test ends
// >>> test starts
// this가 golbal입니다.원하지 않는 결과
// >>> test ends