[자바스크립트] callback 함수

코드 진행 순서

1. function main (value) {
	2. console.log(value);
    3. value();
};

4. main(20);
5. main(4);

1. function main 즉 함수명에 매개체 변수 value를 연결하겠다.
   그래서 value 콘솔로 보여준다는 뜻입니다.
2. 그러면 console.log(value);는 호출되는 값이 불러집니다.
3. value()는 main()이라 호출 할 괄호안에 내용을 부른다는 뜻입니다. 바로 이해가 안가지만 4번을 바로 보시면 이해 됩니다.
4. main(20);은 20을 매개변수 value에 할당하여 value 값은 20이 됩니다.
5. 그럼 main(4)로 한다면 콘솔에 나오는 값은 첫번째는 20, 두번째는 4가 되겠죠.

콜백함수 람다함수처럼 사용하기

1. function main (value) {
	2. console.log(1);
    3. console.log(2);
    4. value();
    5. console.log("end");
};



6. main (function sub () => {
	7. console.log("I am sub");
});
	
8. main (() => {
	9. console.log("I am sub");
});

이렇게 사용이 가능합니다.

1. function main 함수명에 매개변수 value를 연결합니다.
2. main 함수 안에 있는 첫번째 콘솔 1을 실행합니다.
3. main 함수 안에 있는 두번째 콘솔 2를 실행합니다.
4. 매개변수 value(); 를 실행합니다.
5. value 실행이 끝났으니 이제 끝났다는 표시로 콘솔 "end"를 실행합니다.
6. main 함수의
7. 콘솔 "I am sub"를 실행합니다.
8. 6번의 다른 방법입니다. 선언문 자체를 함수 표현식으로 넣어서 람다 함수로 축약한 방법입니다. function sub를
   함수도 문자열, 숫자와 같은 값으로 취급이 될 수 있어서
   함수 자체를 인수로 전달하는 것도 사용 가능합니다.
9. 콘솔 "I am sub"를 실행합니다.

그러면 이렇게 1, 2, "i am sub", "end"가 나오는 걸 볼 수 있습니다.

for문으로 반복하여 함수 정의하기

1. function repeat(count) {
	2. for (let i = 1; i <= count; i++) {
    	3. console.log(i);
	}
};

4. repeat(5);

1. 함수 repeat 매개변수는 count로 정의합니다.
2. 반복문 for를 사용해 let i는 1로, i가 count로 인수가 작성된 수 만큼 i++ 증가합니다.
3. i를 반복합니다.
4. repeat(10)으로 i를 10으로 넣어줘서

허나 이렇게 하면 중복 코드

1. function repeat(count) {
	2. for (let i = 1; i <= count; i++) {
    	3. console.log(i);
	}
};

4. repeat(10);

이라던지 계속 작성해야 합니다. 그래서 count 옆에 매개변수를 하나 더 추가해주면

1. function repeat(count, callback) {
	2. for (let i = 1; i <= count; i++) {
    	3. callback(i);
	};
};

4. repeat(5, (i) => {
	5. console.log(i);
});

6. repeat(10, (i) => {
	7. console.log(i * 2);
});

8. repeat(20, (i) => {
	9. console.log(i * 4);
})

이렇게 추가할 수 있습니다.

1. 함수 repeat의 매개변수, count, callback을 매개체 변수로 정합니다.
2. 반복문 for를 사용해 let i는 1로, i가 count로 인수가 작성된 수 만큼 i++ 증가합니다.
3. callback(i) 만큼 호출합니다. (두번째 매개변수인 callback의 용도는 4번에서 계속 설명)
4. repeat (5, (i) => {}) 이렇게 되어 있는데
   5는 count, 즉 5번 센다는 뜻이며, 다음 매개체인 callback 함수를 호출하고 인수로 i를 넘겨주는 걸 뜻합니다.

즉 4번의 상태는 5, i인 상태이며 i는 1부터 시작하니 (for문의 첫 let i = 1이므로) 1, 2, 3, 4, 5 입니다.

6. 위와 같이 repeat(10, (i) => {}) 이렇게 되어있는데
   count를 10번 세고, callback으로 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 입니다.

7. 근데 i * 2가 되어있어서 2, 4, 6, 8, 10, 12, 14, 16, 18, 20 이 됩니다.

8. 6번과 같습니다. repeat(20, (i) => {}) 이 상태에서
   count를 스무번 셉니다. 근데 * 4로 곱해야죠.

9. 곱해서 결과는 4, 8, 12, 16, 20 ... 80 최종 수치는 80이 됩니다.

이렇게 callback을 써야 코드도 간결하고 호출을 부르는 방법도 쉬워지는 걸 알았는데
이제는 익숙해지고 터득 할 차례인 것 같습니다.
매개변수를 이용해 활용하니 코드가 깔끔해진다는 걸 느낄 수 있었습니다.