Javascript 함수 (2)

pds·2022년 11월 12일

JavaScript TIL 항해99 10기

TIL

목록 보기

6/60

Day5 - Javascript 함수 에서 다루지 못한 자바스크립트 함수에 대해 좀 더 공부해보고 기록하였다.

콜백함수

다른 코드의 파라미터로 전달하는 함수를 콜백함수라고 한다.

어제 자바스크립트의 함수는 일급객체 라고 언급했었는데 일급객체 가 되는 그 조건 중 하나가 콜백함수를 사용할 수 있는가이다.


function a(callback) {
	callback();
}

function b(str) {
	console.log(str);
}

a(() => b("hello"));
a(() => console.log("HELLO"));

함수도 하나의 자료형으로 생각되어 파라미터로 전달될 수 있는 것이다.

대부분의 다른 언어에도 람다 ,익명함수 등의 이름으로 문법에 포함되어있다.

EX) 자바8부터 나온 람다표현으로 콜백함수를 사용할 수 있어 보다 유연한 처리가 가능함

    public static void main(String[] args) {
        // add
        Calculatable add = (a, b) -> a + b;
        System.out.println(add.calculate(4 , 5));
        System.out.println(calYouWant((a, b) -> a * b, 4, 7));
    }

    public static int calYouWant(Calculatable calculatable, int a, int b) {
        return calculatable.calculate(a,b);
    }

    @FunctionalInterface
    interface Calculatable {
        int calculate(int a, int b);
    }

특정 이벤트가 발생했을때 호출되는 함수?

라고 콜백함수를 말하기도 하는데 결국 같은 말이라고 생각한다.

이벤트를 예를 들면 로그인하기 버튼을 누르면
로그인 요청을 서버로 보내기 위한 요청을 담는 함수가 실행된다던가 하는 것이 있다.

function handleClick() {
	console.log("로그인 완료");
}
return <Button onClick={handleClick}>버튼</Button>;

결국 근본은 함수의 동작 로직이 아닌 함수 정보를 넘기고

나 또는 소스코드 상에서 직접 이 아닌 누군가 다른 주체에 의해 수행되는 함수를 말하는 것이 아닌가 이해했다.

다른 함수에 의해 사용되거나 이벤트 발생 에 의해 사용되는 것이다.

타이머 함수

특정 시간 이후 콜백함수를 호출할 수 있는 타이머 함수
setTimeout : 특정 시간 후에 함수를 한번 호출
setInterval: 특정 시간마다 함수를 호출

function a () {
	console.log("출력");
}
setTimeout(() => {a();}, 1000)

수행되는 함수는 특정 시간 후 또는 특정시간마다 호출되며 시간은 밀리세컨드 단위이다.

결과로 타이머 id를 반환한다.

clearTimeout(타이머id) : 타이머를 제거한다.
clearInterval(타이머id) : 타이머를 제거한다.

즉시 호출 함수

(function(){ YOURCODE })()

여러 스크립트 사용 시 변수 이름 충돌 등을 방지하고자 위처럼 즉시호출 함수를 감싸 사용하는 경우가 많다.

함수 중첩

함수 내에 함수를 선언해 사용할 수 있음

function addSquares(a,b) {
  function square(x) {
    return x * x;
  }
  return square(a) + square(b);
}
a = addSquares(2,3); // returns 13
b = addSquares(3,4); // returns 25
c = addSquares(4,5); // returns 41

// square(x); // square is not defined