코어 자바스크립트 핵심 정리 (4)

>콜백함수

 콜백함수는 다른 코드의 인자로 넘겨주는 함수

 콜백 함수를 넘겨받은 코드는 이 함수를 필요에 따라서 적절한 시점에 실행하게 된다.

 callback == '되돌아 호출해달라'

 어떤 함수 X를 호출하면서 '특정 조건일 때 함수 Y를 실행해서 나에게 알려달라'라는 요청을 함께 보내는 것

 이처럼 콜백 함수는 다른 코드에게 인자로 넘겨주면서 그 제어권도 같이 위임한 함수이다.

 

>제어권

 - 콜백 함수의 제어권을 넘겨받은 코드는 호출 시점에 대한 제어권을 가짐

 - 콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수를 호출할 때 인자에 어떤 값들을 어떤 순서로 넘길 것인지에 대한 제어권을 가짐

 - 콜백 함수도 함수이기때문에 기복적으로 this가 전역 객체를 참조. 하지만 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조하게 됨 ex. call/apply 메서드를 통해서 함수 내부에서 this가 될 대상을 명시적으로 바인딩할 수 있음

 

>콜백함수는 함수다

- 콜백 함수로 어떤 객체의 메서드를 전달하더라도 그 메서드는 메서드가 아닌 함수로서 호출됨

- 즉, 객체의 메서드를 콜백함수로 전달하면 해당 객체를 this로 바라볼 수 없다.

- 콜백 함수 내부에서 this가 객체를 바라보게 하고 싶다면 -> (ES5) bind 메서드를 사용

var obj = {
	name :'ddd',
	func : function(){
    	console.log(this.name)}
    }
};

setTimeout(obj.func.bind(obj1),1000);

>콜백 지옥과 비동기 제어

- 비동기 : 현재 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어감 - 사용자 요청에 의한 함수 보류(setTimeout), 사용자 개입에 의해 실행되는 함수(addEventListener), 무언가를 요청하고 응답이 왔을 때 함수를 실행하는 (XMLHttpRequest) 등 별도의 요청, 실행 대기, 보류와 관련된 코드는 비동기적인 코드

- 동기 : 현재 실행 중인 코드가 완료된 후에야 다음 코드를 실행하는 방식 - cpu가 즉시 처리 가능한 코드

- 웹의 복잡도가 올라가는만큼 비동기적인 코드의 비중이 높아짐

- ES6에서는 Promise, Generator 등이 도입, ES2017에서는 async/await가 도입