[TIL #10] 231023_콜백함수

Bora.K | 권보라·2023년 10월 23일

JavaScript TIL

TIL

목록 보기

10/51

오늘 한 일

[내배캠] Javascript 문법 4주차
- 콜백함수 제어권, 콜백지옥
개인과제 해설 강의 듣기

배운 것

1. 콜백함수 제어권

(1) 콜백함수란?

setTimeout, forEach 등에서 다른 코드의 인자로 넘겨주는 함수

제어권
콜백 함수를 위임받은 코드는 자체적으로 내부 로직에 의해 콜백 함수를 적절한 시점에 실행
→ 제어권은 위임받은 코드에게 있음

setTimeout

setTimeout(function() {
  console.log("Hello, world!");
}, 1000);

forEach

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

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

(2) 콜백함수의 제어권

호출 시점에 대한 제어권

setInterval : 반복해서 매개변수로 받은 콜백함수의 로직을 수행

var count = 0;

var timer = setInterval(function() {
	console.log(count);
	if(++count > 4) clearInterval(timer);
}, 300);

→ 0.3초라는 적절한 호출 시점을 명시
→ 호출 주체이자 제어권은 setInterval에 있음

인자에 대한 제어권

map : 기존 배열을 변경하지 않고 새로운 배열을 생성

currentValue(순회)와 index 변수를 가짐

return이 있어야함

var newArr = [10, 20, 30].map(function (currentValue, index) {
	console.log(currentValue, index);
	return currentValue + 5;
});
console.log(newArr);

// -- 실행 결과 --
// 10 0
// 20 1
// 30 2
// [ 15, 25, 35 ]

→ 컴퓨터가 인식할 수 있는 것은 인자의 순서!
→ currentValue와 index의 순서를 변경하면 원하는 결과를 얻을 수 없다.
→ 인자의 제어권은 map에 있음

this

함수 : 함수() 전역객체를 참조

메서드 : obj.메서드() obj를 참조

콜백함수도 함수이기 때문에 전역객체를 참조한다.
단, 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조한다.

// Array.prototype.map 구현
Array.prototype.mapaaa = function (callback, thisArg) {
  var mappedArr = [];

  for (var i = 0; i < this.length; i++) {
    // call의 첫 번째 인자는 thisArg가 존재하는 경우는 그 객체, 없으면 전역객체
    // call의 두 번째 인자는 this가 배열일 것(호출의 주체가 배열)이므로,
	// i번째 요소를 넣어서 인자로 전달
    var mappedValue = callback.call(thisArg || global, this[i]);
    mappedArr[i] = mappedValue;
  }
  return mappedArr;
};

const a = [1, 2, 3].mapaaa((item) => {
  return item * 2;
});

console.log(a);

💡 이 내용은 이해하기가 어렵다…. 재강때 이해해 보도록…

(3) 콜백 함수는 함수다

메서드로써 호출

var obj = {
	vals: [1, 2, 3],
	logValues: function(v, i) {
		console.log(this, v, i); //여기서 this는 obj
	}
};

obj.logValues(1, 2);
// { vals: [ 1, 2, 3 ], logValues: [Function: logValues] } 1 2

콜백함수로써 호출
콜백함수로 어떤 객체의 메서드를 전달하더라도, 함수로 호출!!

var obj = {
    vals: [1, 2, 3],
    logValues: function (v, i) {
        if (this === global) {
            console.log("this가 global입니다.");
        } else {
            console.log(this, v, i);
        }
    }
};
//obj를 this로 하는 메서드를 그대로 전달한게 아니라
//obj.logValues가 가리키는 함수만 전달

[4, 5, 6].forEach(obj.logValues);

// this가 global입니다.
// this가 global입니다.
// this가 global입니다.

💡 forEach, map, filter
첫번째 인자는 기준이 되는 배열의 n번째 요소, 두번째 인자는 index

(4) 콜백 함수 내부의 this에 다른 값 바인딩

bind 메서드 활용

var obj1 = {
	name: 'obj1',
	func: function () {
		console.log(this.name);
	}
};
//함수 자체를 obj1에 바인딩
//obj1.func를 실행할 때 무조건 this는 obj1로 고정
setTimeout(obj1.func.bind(obj1), 1000);

var obj2 = { name: 'obj2' };
//함수 자체를 obj2에 바인딩
//obj1.func를 실행할 때 무조건 this는 obj2로 고정
setTimeout(obj1.func.bind(obj2), 1500);

2. 콜백 지옥과 비동기 제어

(1) 콜백지옥이란?

콜백 함수를 익명 함수로 전달하는 과정이 반복되면서 들여쓰기 수준이 헬 수준인 경우
→ 가독성과 유지 보수 측면에서 안좋음

(2) 동기 VS 비동기

동기

현재 실행중인 코드가 끝나야 다음 코드를 실행
CPU 계산에 의해 즉시 처리가 가능한 대부분의 코드는 동기적 코드
계산이 복잡해서 CPU가 계산하는 데에 오래 걸리는 코드 역시도 동기적 코드

비동기

실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식
setTImeout, addEventListener 등
별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드

오늘의 회고

개인 프로젝트 과제는 주말에 무사히 제출했다. 사실 내 스스로 한 건 아니고 구글이 80%를 한 것 같다. 다음 프로젝트에서는 구글보다 내가 더 많이 할 수 있기를... 그래도 프로젝트를 하면서 이런 식으로 코딩이 진행되는구나!를 느꼈다. 도움이 많이 되었던 첫 과제였다.
this 용법에 대해 이해하기가 너무 어렵다. 설명 자체는 이해가 가는데 상황에 따라 달라지면 멘붕... 이 부분은 강의를 여러 번 돌려봐야 할 것 같다.