콜백함수
콜백함수는 다른 코드의 인자로 넘겨주는 함수이다.
콜백함수의 제어권을 넘겨받은 코드는 콜백 함수 호출 시점에 대한 제어권을 가진다.
•
콜백함수를 호출하는 시점을 스스로 판단해서 실행
•
콜백함수를 호출할 때 인자로 넘겨줄 값들 및 그 순서가 정해져있다. 이 순서를 따르지 않고 코드를 작성하면 엉뚱한 결과가 나옴
•
콜백함수의 this가 무엇을 바라보도록 할지가 정해져 있는 경우도 있다. 정하지 않은 경우에는 전역객체를 바라봄.
→ 콜백 함수도 함수이기 때문에 기본적으로는 this가 전역객체를 참조하지만, 제어권을 넘겨받을 코드에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조하게 된다.
콜백함수로 어떤 객체의 메서드를 전달하더라도 그 메서드는 메서드가 아닌 함수로서 호출된다.
어떤 함수의 인자에 객체의 메서드를 전달하더라도 이는 결국 메서드가 아닌 함수일 뿐이다.
콜백 함수의 내부에서 this가 객체를 바라보게 하고 싶다면?
→ ES5에서 등장한 bind 메서드를 이용하면 된다.
콜백지옥 : 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상. 주로 이벤트 처리나 서버 통신과 같이 미동기적인 작업을 수행하기 위해 이런 형태가 자주 등장하는데 가독성도 떨어지고 코드 수정도 어렵다.
동기적적인 코드 : 현재 실행 중인 코드가 완료된 후에야 다음 코드를 실행하는 방식
비동기적인 코드 : 현재 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어감.
→ 사용자의 요청에 의해 특정 시간이 경과되기 전까지 어떤 함수의 실행을 보류한다거나(setTimeout), 사용자의 직접적인 개입이 있을 때 비로소 어떤 함수를 실행하도록 대기한다거나(addEventListener), 웹브라우저 자체가 아닌 별도의 대상에 무언가를 요청하고 그에 대한 응답이 왔을 때 비로소 어떤 함수를 실행하도록 대기하는 등(XMLHttpRequest), 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 비동기적인 코드임.
ES2017에서 추가된 기능 → async/await
비동기 작업을 수행하고자 하는 함수 앞에 async를 표기하고 함수 내부에서 실지럭인 비동기 작업이 필요한 위치마다 await를 표기하는 것만으로 뒤의 내용을 Promise로 자동 전환하고, 해당 내용이 resolve된 이후에야 다음으로 진행. Promise 의 then과 흡사한 효과 가능.
