this의 의미와 비동기함수(콜백함수) 제어

this

this는 함수를 호출될 때 결정된다. 어떤 상황에서 this를 사용하느냐에 따라 값이 달라진다. 함수와 객체의 메서드를 구분하는 거의 유일한 기능이라고 한다.

전역공간에서 this

런타임 환경에 따라 달라진다. 브라우저 환경에서는 window, Node.js 환경에서는 global을 의미한다.

 

자바스크립트에 변수는 특정 객체의 프로퍼티로 동작한다. 전역 변수를 선언하면 자바스크립트 엔진은 이를 전역 객체의 프로퍼티로 할당한다.

함수 호출

this는 전역객체를 가리킨다.

객체의 메서드 호출

this는 객체(호출 주체)를 가리킨다.

생성자 함수에서 this

생성될 인스턴스를 가리킨다. 클래스 생성자 함수에서 this는 그 클래스의 인스턴스를 가리킨다고 이해했다.

정리

this의 챕터를 이해해 보려고 했는데 아직 어렵다. 내가 이해한 것은 this는 전역공간에서는 window 또는 global을 의미한다. 객체의 메서드를 호출하면 그 호출하는 객체를 의미한다. 생성자 함수에서는 자바처럼 그 인스턴스를 가리킨다고 이해했다. 아직은 이해가 안 되는 내용이 많아서 이정도의 정리만 가능하다 😥 this는 호출하는 메소드의 . 앞의 객체를 의미한다고 이해하는 게 지금 수준에서는 가장 간편한 것 같다.

 

---

비동기 함수 제어

이 책에서는 콜백지옥에서 비동기 함수를 제어하는 방식을 몇가지 소개한다. 그 방식은 JS가 발전하면서 발전되는 방식을 따른다고 이해했다. 나는 콜백함수(비동기 함수)는 출발선에 서있는 선수 라고 생각한다. 시작 신호(호출) 전까지 대기하고 있는 함수의 느낌이다. 일반 함수처럼 호출하기 전까지 대기하고 있는 것은 동일하지만 그 시점을 순서대로 바로바로 처리가 아닌 컨트롤 할 수 있다는 것이 핵심이라고 생각한다.

기명함수로 변환

각 콜백함수에 이름을 붙여줘서 이름으로 기존 함수의 끝에 다른 콜백함수를 호출해 줄 수 있다.

Promise

new 로 Promise 객체를 생성해준다. Promise는 콜백을 전달하는 대신, 첨부해주는 방식의 객체이다. Promise가 생성될 때 상태를 알 수 없는 값을 위한 대리자 역할을 한다. 대기(pending), 이행(fullfilled), 거부(rejected)의 세가지 상태를 가지며 상태에 따라 그 다음을 처리한다. resolve는 성공, rejected는 실패한 상태를 의미한다. 그 다음 작업들은 .then() 을 사용하여 체이닝해서 콜백 함수로 호출할 수 있다.

Generator

함수 뒤에 * 가 붙은 함수가 Generator 함수(function* )이다. Generator 함수를 실행하면 Iterator가 반환된다. next 메소드를 가지고 있어 next를 호출하면 yield 에서 함수의 실행을 멈춘다. yield에서 멈춰주기 때문에 비동기적으로 처리가 가능한 것이다.

Promise + Async/await

함수 앞에 async 를 붙여서 비동기 함수 선언을 해주면 암시적으로 Promise를 사용하여 결과를 반환한다. 비동기 작업을 수행하고자 하는 함수 앞에 async를 붙이고 비동기 작업이 필요한 위치에 await를 표기하면 된다. await 뒤의 내용을 Promise로 전환하여 비동기 작업 처리가 가능하게 되는 것이다.

정리

공부하면서 이벤트 처리와 콜백함수를 통한 비동기 처리가 프론트에서 데이터를 받아와서 보여주고, 사용자와 상호작용하는데 상당히 중요하다는 느낌을 받았다. 콜백함수에 대한 이해, 특히 Promise에 대한 이해가 어려웠는데 단계별로 사용을 정리하니 조금은 더 이해된 느낌을 받았다.

 

---

코어자바스크립트(책)를 읽고, MDN 사이트 설명을 참고하여 이해한 내용을 바탕으로 내용을 정리한 것입니다.