콜백함수, 스코프[JavaScript | 학습을 위한 자료 | 한입만 REACT]

콜백함수

// 콜백 함수
// 자신이 아닌 다른 함수에 인수로써 전달된 함수를 의미
// 해당 함수가 특정 시점에 호출되도록 정의
// 비동기 함수의 실행이 완료된 후 특정 작업을 수행할 때 콜백 함수를 사용한다

// 1. 콜백 함수
function main(value) {
    console.log(value);
    value(); // 메인함수가 원하는 타이밍에 실행시킬 수 있다.
		console.log("end");
}

function sub() { // 콜백함수 
    console.log("i am sub");
}

main(sub); // 전달받은 콜백 함수를 실행

// 2. 선언문 사용

main(() => { // 함수표현식 - 익명함수 
    console.log("i am sub");
});

// 3. 콜백 함수의 활용
function repeat(count, callback) {
    for(let idx = 1; idx <= count; idx++) {
        callback(idx); // 반복 인덱스를 콜백 함수에 전달
    }
}

// 5번 반복하며 인덱스 출력
repeat(5, function (idx){
    console.log(idx);
});

// 5번 반복하며 인덱스의 2배 출력
repeat(5, (idx) => {
    console.log(idx * 2);
});

// 5번 반복하며 인덱스의 3배 출력
repeat(5, (idx) => {
    console.log(idx * 3);
});

// 1. 이벤트 핸들러: 리액트에서 사용자 동작(예: 클릭, 입력 등)에 반응하기 위해 이벤트 핸들러로 콜백 함수를 사용한다
// 2. 상태 업데이트: 리액트의 상태 관리에서 setState 메서드 또는 useState의 상태 업데이트 함수에서 콜백을 사용할 수 있다
// 3. 자식-부모 간 데이터 전달: 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하기 위해 콜백 함수를 사용하는 패턴
// 4. API 요청 후 데이터 처리: React에서 비동기 API 요청이 완료된 후, 응답 데이터를 처리하는 데 콜백을 사용할 수 있다

 

---

스코프

// 스코프
// 변수나 함수에 접근하거나 호출할 수 있는 범위


// 전역 스코프 / 지역스코프
// 전역 스코프 : 전체 영역에서 접근 가능
// 함수, 블록 외부에서 선언된 변수는 전역 스코프에 속한다

// 지역 스코프 : 특정 영역에서만 접근 가능
// let과 const는 블록 스코프
// var는 함수 스코프
// -> 블록(if, for 등) 내에서 선언된 경우에도 블록 스코프를 무시하고 함수 스코프를 따른다

let a = 1; // 전역 스코프

function funcA() {
    let b = 1; //지역 스코프
    console.log(a);  
}

funcA();

if(true) {
    let c = 1 ; // 지역 스코프
}

for(let i = 0; i < 10; i++) {
    let d = 1; // 지역 스코프
}

// 함수 선언문은 함수 내에서만 지역스코프를 갖고 if,for문에서는 지역스코프를 갖지 않는다

 

---