songin.dev님의 블로그

자바스크립트 함수의 다양한 형태 본문

Developer/Langauge

자바스크립트 함수의 다양한 형태

songin.dev 2022. 7. 15. 21:46
728x90

콜백 함수

개발자는 단지 함수를 등록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수를 말한다.

또한, 특정 함수의 인자로 넘겨서, 코드 내부에서 호출되는 함수 또한 콜백 함수가 될 수 있다.

대표적인 콜백 함수의 사용 예가 자바스크립트에서의 이벤트 핸들러 처리이다.

웹 페이지가 로드되거나 키보드가 입력되는 등의 DOM 이벤트가 발생할 경우, 브라우저는 정의된 DOM 이벤트에 해당하는 이벤트 핸들러를 실행시킨다.

<!DOCTYPE html>
<html><body>
  <script>
    window.onload = function() {
      alert('This is the callback function.');
    };
  </script>
</body></html>

웹 페이지가 로딩될 때 경고창에 메시지가 뜨게 되는 코드

 

즉시 실행 함수

함수를 정의함과 동시에 바로 실행하는 함수를 즉시 실행 함수(immediate functions)라고 한다.

함수가 선언되자마자 실행되게 만든 즉시 실행 함수의 경우, 같은 함수를 다시 호출할 수 없다.

최초 한 번의 실행만을 필요로 하는 초기화 코드 부분에 사용할 수 있다.

(function (name) {
  console.log('This is the immediate function -> ' + name);
})('foo');

우선 함수 리터럴을 괄호 ( )로 둘러싸고 이때 함수의 이름이 있든 없든 상관없다. 매개변수로 name을 지정하고 중괄호 { } 호출되는 값을 입력한다. 마지막으로 ('foo')를 즉시 실행 함수로 호출하고 이 값은 즉시 실행 함수의 name 매개변수로 넘겨지게 된다.

 

내부 함수

자바스크립트에서는 함수 코드 내부에서도 다시 함수 정의가 가능하다.

function parent() {
  var a = 100;
  var b = 200;
  
  function child() {
    var b = 300;
    
    console.log(a);
    console.log(b);
  }
  child();
}
parent();
child();

/*
100
300
Uncaught ReferenceError:  child is not defined
*/

parent() 함수를 호출하게 되면, child()에 없는 변수 a 값은  parent()에 접근하여 출력하게 된다.

하지만, 함수 외부에서 호출된 child()는 값이 없는 변수 a를 출력하기 위해 parent() 함수에 접근할 수 없으므로, 에러가 발생한다.

함수 내부에 선언된 변수는 함수 외부에서 접근이 불가능하기 때문이다.

 

함수 외부에서도 특정 함수 스코프 안에 선언된 내부 함수를 호출할 수 있다.

function parent() {
  var a = 100;
  var child = function () {
    console.log(a);
  }
  
  return child;
}

var inner = parent();
inner();

// 100

흠.. 설명이 어렵다 이해가..잘ㄹ;;ㄹ;

 

함수를 리턴하는 함수

자바스크립트에서는 함수도 일급 객체이므로 일반 값처럼 함수 자체를 리턴할 수도 있다.

함수를 호출함과 동시에 다른 함수로 바꾸거나, 자기 자신을 정의하는 함수를 구현할 수 있다.

// self() 함수
var self = function () {
  console.log('a');
  return function () {
    console.log('b');
  }
}
self = self(); // a
self(); // b

- 본 포스팅은 "인사이드 자바스크립트" 도서를 기반으로 작성한 글입니다.

반응형
저작자표시

'Developer > Langauge' 카테고리의 다른 글

자바스크립트 프로토타입 체이닝  (0) 2022.07.18
자바스크립트 함수 호출과 this  (0) 2022.07.17
자바스크립트 함수 객체  (0) 2022.07.14
자바스크립트 함수 정의  (0) 2022.07.12
자바스크립트 프로토타입, 배열  (0) 2022.07.11
'Developer/Langauge' Related Articles more
Comments