[Javascript]03-2. 함수의 다양한 형태

Elen li·2021년 10월 27일
0
post-thumbnail

함수의 형태

콜백 함수

: 익명 함수의 대표적인 용도
: 개발자는 함수를 등록하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수를 뜻합니다. (코드를 통해 명시적으로 호출하는 함수가 아님)
: 또한, 특정 함수의 인자로 넘겨서 코드 내부에서 호출되는 함수 또한 콜백 함수가 될 수 있습니다.
: 예) 이벤트 발생 시 호출하는 함수

즉시 실행 함수

: 함수를 정의하는 동시에 바로 실행하는 함수

  • 즉시 실행 함수 정의하기
  1. 함수 리터럴을 괄호() 로 감싼다.
  2. 괄호 뒤에 괄호()를 추가한다.
  3. 두번째 괄호에 값을 추가해 즉시 실행 함수의 인자로 넘긴다.
  4. 함수를 즉시 실행하게 된다.

1. 즉시 실행 함수는 같은 함수를 다시 호출할 수 없다.
2. 최초 한 번의 실행만을 필요로 하는 초기화 코드 부분에 사용할 수 있다.
3. jQuery와 같은 자바스크립트 라이브러리나 프레임워크 소스들에서 사용된다. (자바스크립트의 변수 유효 범위 특성 때문)

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

// 출력값
This is the immediate function> foo

내부 함수 (inner function)

  • 함수 코드 내부에서도 다시 함수 정의가 가능하며, 이렇게 함수 내부에 정의된 함수를 '내부 함수'라고 부릅니다.
  • 클로저 생성 또는 부모 함수 코드에서 외부에서의 접근을 막고 독립적인 헬퍼 함수를 구하는 용도 등으로 사용합니다.
    내부 함수에서는 자신을 둘러싼 부모 함수의 변수에 접근이 가능하다
    기본적으로 함수 외부에서 내부함수를 호출할 수 없다.
// parent() 함수 정의
function parent() {
  var a = 100;
  var b = 200;
  
  // child() 내부 함수 정의
  function child() {
    var b = 300;
  }
  
  console.log(a);
  console.log(b);
  
  child(); 
}

parent(); // (출력값) 100 300
child(); // (출력값) Uncaught ReferenceError: child is not defined

함수 스코프 외부에서 내부 함수 호출하기

  • 부모 함수에서 내부 함수를 외부로 리턴할 경우, 부모 함수 밖에서도 내부 함수를 호출할 수 있게 됩니다.
function parent() {
  var a = 100;
  // child() 내부 함수
  var child = function() {
    console.log(a);
  }

  // child() 함수 변환
  return child;
}

var inner = parent();
inner(); // -> 클로저

// (출력값)
100
  • 부모 함수가 리턴한 값은 ‘내부 함수의 참조값’입니다.
    inner 변수가 함수의 참조값을 참조하므로 child()를 호출할 수 있게 됩니다.
  • 그런데 , 조금만 살펴보면 ‘child() 에는 a 라는 변수가 없는데 어떻게 a라는 값을 출력했을까’라는 생각을 하게 됩니다. 여기서 생각하게 되는 것이 스코프 체이닝 입니다.
  • 스코프 체이닝으로 부모 함수에 a가 정의되어 있는지 확인하고 그 값을 출력합니다.

함수를 리턴하는 함수

< 함수를 리턴하면 좋은 점 >

  • 함수를 호출함과 동시에 다른 함수로 바꿀 수 있다.
  • 자기 자신을 정의하는 함수를 구현할 수 있다.
var self = function () {
  console.log(‘a’);
  return function() {
    console.log(‘b’);
  }
}

self = self(); // a
self(); // b
profile
Android, Flutter 앱 개발자입니다.

0개의 댓글