JavaScript 4주차

하정현·2023년 10월 17일

JS

목록 보기
4/9

콜백함수

콜백 함수는 전달인자로 다른 함수에 전달되는 함수이다.
ex)

// setTimeout
setTimeout(function() { // function 콜백함수
console.log("Hello, world!");
}, 1000);

// forEach
const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
console.log(number);
});

즉, 행동에 대한 제어권을 넘겨주는 함수라고 볼 수 있다.
콜백 함수를 받은 코드는 콜백 함수 호출 시점에 대한 제어권을 가진다.

콜백함수에서의 this는 콜백함수도 함수이기 때문에 전역객체를 가르킨다. 하지만 예외 적으로
제어권을 넘겨받을 코드에서 콜백 함수에 별도로 this가 될 대상을 지정할 경우(call,apply 등등) 그 대상을 참조한다.

콜백 지옥이란 비동기 작업을 처리할 때 사용되는 콜백함수가 중첩되어,
코드의 가독성이 나빠지고 이로인해 유지보수가 어려워지는 문제가 발생하는 것들을 일컬어
"콜백지옥"이라고 한다

동기, 비동기

동기(Synchronous)
현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식을 말해요!

비동기(Asynchronous)
실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식이다.
여러가지 일을 더 빠르게 처리할 수 있어 웹에 복잡도가 올라갈수록 비동기적 코드의 비중이 늘어난다.

비동기 작업을 Promise/Generator(ES6), async/await(ES7)을 통해 동기적 표현으로
바꿔줄 수 있다.


콜백함수 this 바인딩, call/apply 활용은 따로 정리해야겠다. + 비동기 작업 Promise/Generator, async/await도 따로

클로저(Closure)

클로저란 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.

[렉시컬 스코프]
JS 엔진은 함수를 어디서 '호출' 했는지가 아니라
어디에 '정의' 했는지에 따라 스코프를 결정한다.

클로저와 렉시컬 환경
외부 함수보다 중첩 함수가 더 오래 유지되는 경우
중첩 함수(클로저)는 이미 생명주기가 종료한 외부 함수의
변수를 여전히 참조할 수 있다.

가능한 이유
outer함수의 렉시컬 환경은 참조하는 곳이 있으니
garbage collector에 수거되지 않는다.

->언제 사용함?
상태를 안전하게 변경하고 유지하기 위해 사용한다. 상태를 안전하게 은닉한다는 장점이 있다.

결론

클로저는 상태(state)가 의도치 않게 변경되지 않도록 안전하게 은닉(information hiding) 하고 특정 함수에게만 상태 변경을 허용하여 상태를 안전하게 변경하고 유지하기 위해 사용한다.

2개의 댓글

comment-user-thumbnail
2023년 10월 17일

오~ 중요한 부분들 위주로 핵심을 잘 정리해 놓으셔서 덕분에 공부했던게 더 정리가 되네요~ 어떤 부분을 어떻게 정리할지 고민하신게 느껴집니다! 굿굿!!

1개의 답글