JavaScript 함수의 다양한 형태

lacblueeun·2020년 8월 30일
0

JavaScript

목록 보기
2/5
post-thumbnail

함수의 다양한 형태

1. 콜백 함수

콜백 함수는 함수 안에서 어떤 특정한 시점에 호출되는 함수를 말합니다. 보통 콜백 함수는 함수의 매개변수로 전달하여 특정 시점에서 콜백 함수를 호출합니다.
대표적인 콜백함수의 사용 예가 자바스크립트에서의 이벤트 핸들러 처리이다.
웹페이지가 로드되거나 키보드가 입력되는 등의 DOM 이벤트가 발생할 경우, 이벤트 핸들러에 콜백 함수가 등록했다면, 콜백 함수는 이벤트가 발생할 때 마다 브라우저에서 실행된다.

	foo1(function(){
		console.log("결과값 잘 호출되었습니다.");
	});
	foo1();

2. 즉시 실행 함수

함수를 정의함과 동시에 바로 실행하는 함수를 즉시 실행 함수라고 한다.
이렇게 선언되자마자 실행되게 만든 즉시 실행 함수의 경우, 같은 함수를 다시 호출 할 수 없다. 최초 한 번의 실행만을 필요로 하는 초기화 코드 부분에 사용할 수 있다.

	(function(){
    	console.log("즉시 실행 되었습니다.");
	 })();

3. 내부 함수

자바스크립트에서는 함수 코드 내부에서도 다시 함수 정의가 가능하다. 이렇게 함수 내부에 정의 된 함수를 내부 함수라고 부른다.
내부함수는 자바스크립트의 기능을 보다 강력하게 해주는 클로저(Closure)를 생성하거나 부모 함수 코드에서 외부에서의 접근을 막고 독립적인 헬퍼 함수를 구현하는 용도로 쓰인다.
클로저는 중요한 부분이므로 이후 포스팅에서 따로 다루도록 하겠습니다.

	function parents(){
    	 let a = 10;
         let b = 20;
            function child(){
         let b = 30;
         console.log(a); // 출력값 10
         console.log(b); // 출력값 30
        }
        return child();
    } 

내부 함수에서는 자신을 둘러싼 부모 함수의 변수에 접근이 가능하다.
child 내부 함수에 변수 a가 선언되지 않았음에도 a를 호출 할 수 있다. 이것은 앞의 게시글에서 스코프 체이닝 때문이다.

4. 함수를 리턴하는 함수

자바스크립트에서는 함수도 일급 객체이므로 일반 값처럼 함수 자체를 리턴할 수도 있다. 함수를 호출함과 동시에 다른 함수로 바꾸거나, 자기 자신을 재정의하는 함수를 구현할 수 있다.

	let self = function() {
    	return function() {
          console.log('함수를 리턴하는 함수');
        }
    }
    self = self(); //return 에서 선언한 함수가 대입된다.
    self(); 함수를 실행시키면 내부함수가 실행된다.

5 setTimeout & setIntreval

일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링(scheduling a call)'이라고 합니다.
setTimeout : 일정시간이 지난 후에 함수를 실행하는 방법
setIntreval : 일정 시간 간격을 두고 함수를 실행하는 방법
5번의 내용은 JavaScript.Info.ko 에서 참고했습니다.

clearTimeout : setTimeout과 setInterval은 타이머 식별자를 반환하는데, 식별자를 스케줄링을 취소할 수 있다.

5-1 setTimeout

setTimeout은 함수값을 참조하게 되어있기 때문에, 종종 show() 와 같이 함수실행결과를 전달을 하는 실수를 한다. 스케줄링 할 대상을 찾지 못해 오류가 발생한다.

    function timeout() {
    	setTimeout(()=>consol.log("3초 후 실행하기")
        , 3000);
    }
    
    function timeout2() {
    	setTimeout(show , 3000);
    }

5-2 setInterval

	let id;
    
        function start() {
        id = setInterval(() => {
                console.log("일정 간격 두고 실행");
            }, stop());
        };

        function stop(){
            clearInterval(id); // 타이머 식별자로 취소
        };

5-3 대기 시간이 0인 setTimeout

setTimeout(func, 0) 은 대기시간을 0으로 설정하면 '가능한 한' 빨리 실행할 수 있다. 하지만 스케줄러는 현재 실행 중인 스크립트의 처리가 종료된 이후에 스케줄링한 함수를 실행한다.

	setTimeout(() => alert("World"));
	alert("Hello");
    	//Hello가 먼저, World은 그다음에 출력됩니다.
profile
Go for Frontend Developer 🧪

0개의 댓글