콜백함수
콜백함수: 다른 코드의 인자로 넘겨주는 함수.
콜백함수를 넘겨받은 코드는 이 콜백함수를 필요에 따라 적적한 시점에 실행할 것
제어권
호출시점
콜백함수의 제어권을 넘겨받은 코드는 콜백함수 호출시점에 대한 제어권을 가진다.
인자
ex) map( callback함수, 콜백 함수 내부에서 this로 인식할 대상)
(생략 시 전역)
정의된 규칙에 따라 함수 작성해야 한다.
this
콜백함수도 함수이기 때문에 기본적으로 this가 전역객체를 참조하지만 제어권을 넘겨 받을 코드에서 콜백함수에 별도로 this가 될 대상을 지정하면 그 대상을 참조한다.
call, apply 메서드로 this가 될 대상을 명시적으로 바인딩해준다.
콜백함수는 함수다
콜백함수로 어떤 객체의 메서드로 전달하더라도 그 메서드는 메서드가 아니고, 함수로 호출이 된다.
xxx.method() 형식으로 메서드로 호출해도 콜백함수이면 함수고 this가 전역 (window)을 가리킨다.
콜백함수 내부의 this에 다른 값 바인딩
메서드를 콜백함수로 전달하면 해당 객체를 this로 바라볼 수 없는 문제점이 생긴다.
전통적인 해결법으로는 this를 다른 변수에 담아놓고, 콜백함수에서 this를 사용할 일이 있으면 해당 변수를 가져다 사용하여 클로저로 만드는 방법이 있다.
=> ES5의 bind로 보완하였다.
콜백 지옥과 비동기 제어
콜백지옥: 콜백함수를 익명함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들정도로 깊어지는 현상으로 주로 비동기적 작업에 나타난다. 이는 가독성을 낮추고, 코드 수정도 어렵게 한다.
동기: 현재 실행코드가 완료된 후 다음 코드를 실행한다.(주로 CPU의 계산에 의해 즉시 처리 가능한 코드들)
비동기: 현재 실행코드와 무관하게 즉시 다음 코드로 넘어간다. ( 별도의 요청, 실행대기, 보류 등과 관련된 코드)
해결방법
-
익명의 콜백함수를 모두 기명함수로 바꿔주기
가장 간단한 해결 방법으로 가독성은 올라가지만 일회성을 가진 코드들도 모두 함수로 만들어야 한다는 단점이 있다. -
Promise
new 연산자와 호출된 promise의 인자로 넘겨주는 콜백함수는 호출할 때 바로 실행 되지만 내부에 resolve 또는 reject 함수를 호출하는 구문이 있는 경우 둘 중 하나가 실행되기 전까지 then 이나 오류(catch)로 넘어가지 않는다. (비동기 작업의 동기적 표현) -
Generator
function 키워드 뒤에 * 이 붙은 것으로 Iterator를 반환하게 된다. Generator는 next 메서드를 가지는데 이는 Generator 함수 내부에서 가장 먼저 등장하는 yeild에서 함수의 실행을 멈춘다.(이를 반복)
비동기 완료 시점마다 next메서드를 호출하고 Generator 함수 내부의 소스가 위에서 아래로 순차적으로 실행될 수 있다. -
async/await
ES2017에서 추가된 것으로 비동기 작업을 수행하려는 함수 앞에 async를 붙이고, 함수 내부에서 실질적으로 비동기 작업을 필요로 하는 위치마다 await을 표기한다.
=> await의 뒤의 내용을 promise로 자동전환하고, resolve된 이후 다음으로 진행한다.
2-depth
Ecma 인터내셔널
Ecma 인터내셔널은 정보통신에 대한 표준을 제정하는 비영리 표준화 기구이다.(키보드)
Ecma-262
Ecma 인터내셔널에 의해 제정된 하나의 기술 규격의 이름으로, 범용목적의 스크립트 언어에 대한 명세를 담음
스크립트 언어
독립된 시스템에서 작동하도록 특별히 설계된 프로그래밍 언어이다.
응용프로그램과는 독립적이고, 사용자가 직접 프로그램을 의도에 따라 동작시킬 수 있다.
ECMAScript
Ecma 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어
JavaScript
JavaScript는 ECMAScript 사양을 준수하는 범용 스크립팅 언어이다.
ECMAScript 문서를 읽게 된다면 스크립트 언어를 어떻게 만드는지를 알수있고, JavaScript 문서를 읽게된다면 스크립트언어를 어떻게 쓸 수 있는지를 알 수 있다.
JavaScript 엔진
JavaScript언어를 이해하고 실행하는 프로그램 또는 인터프리터 === JavaScript 인터프리터
ECMAScript 6(ES6)
ECMA-262 표준의 제 6판이며, ECMAScript 사양의 주요변경사항 및 개선 사항을 명세한다.
ES6===ES2015===ECMAScript 2015
