JAVASCRIPT - 6. 함수

yeon·2022년 12월 5일

자바스크립트(ES6)

목록 보기
6/7
post-thumbnail

함수 정의

  1. 함수 선언문으로 정의
  2. 함수 리터럴로 정의
  3. Function 생성자로 정의
  4. 화살표 함수 표현식으로 정의
// 1
function square(x){ return x*x; }

// 2
var square = function(x){ return x*x; }

// 3
var square = new Function("x", "return x*x");

// 4
var square = x => x*x;

중첩함수

특정 함수의 내부에 선언된 함수를 가리킨다. 지역함수 또는 내부함수라 한다.
외부 함수의 최상위 레벨에만 중첩 함수를 작성할 수 있다.


함수 호출

  1. 함수 호출
  2. 메서드 호출
  3. 생성자 호출
  4. call, apply를 사용한 간접 호출
// 1
var s = square(5);

// 2 
obj.m = function(){...};
obj.m();e
                   
// 3
var obj = new Object();

              

즉시 실행 함수

익명 함수의 참조를 변수에 할당한 후에 그룹 연산자인 ( )을 붙여 실행한다.

var f = function(){...};
f();
                   
// 정의와 실행을 동시에
(function(){...}());
(function(){...})();
            
            
(function fact(n){
	if(n <= 1) return 1;
  	return n * fact(n-1);
})(5);	// 120
            
    


재귀함수

함수가 자기 자신을 호출하는 행위를 재귀호출이라 하고, 재귀호출을 수행하는 함수가 재귀함수이다.


// n의 팩토리얼을 구하는 함수
function fact(n){
   if(n <= 1) return 1;
   return n * fact(n-1);
}
fact(5);	//120

유의사항

  1. 재귀호출은 반드시 멈춰야 한다.
  2. 재귀호출로 문제를 간단하게 해결할 수 있을 때만 사용한다.


클로저 예제


// 카운터 함수를 만드는 함수 
function makeCounter(){
    var count = 0;
    return f;
    function f(){
      return count++;
    }
  }
 var counter = makeCounter();
 console.log(counter());	// 0
 console.log(counter());	// 1
 console.log(counter());	// 2


// 익명함수로도 가능하다.
function makeCounter(){
    var count = 0;
    return function (){
      return count++;
    }
}

* 포인트

  1. 외부 함수 makeCounter는 중첩 함수 f의 참조를 반환한다.
  2. 중첩 함수 f는 외부 함수 makeCounter의 지역 변수 count를 참조한다.


객체로서의 함수

자바스크립트의 함수는 Function 객체이다.
특징

  • 변수나 프로퍼티나 배열 요소에 대입할 수 있다.
  • 함수의 인수로 사용할 수 있다.
  • 함수의 반환값으로 사용할 수 있다.
  • 프로퍼티와 메서드를 가질 수 있다.
  • 이름 없는 리터럴로 표현할 수 있다. (익명함수)
  • 동적으로 생성할 수 있다.

// 피보나치수열을 구하는 함수 
function fibo(n){
  if(n<2) return n;
  if(!(n in fibo)){
    fibo[n] = fibo(n-1) + fibo(n-2);
  }
  return fibo[n];
}
for(var i=0; i <= 20; i++){
  console.log((" "+i).slice(-2)+":"+fibo(i));
}
// 결과
// 0:0
// 1:1
// 2:1
// 3:2
// ...
// 19:4181
// 20:6765


콜백 함수

자바스크립트 함수는 다른 함수에 인수로 넘겨질 수 있다.
다른 함수에 인수로 넘겨지는 함수를 콜백 함수라 한다.

// g가 콜백함수다.
f(g, ...);
  ...
function f(callback, ...){
  	...
  	callback();
  	...
}

// 이벤트 처리기를 addEventListener 메서드의 인수로 넘겨서 등록
button.onclick = function(){...};
button.addEventListener("click", function(){...}, false); 

// 타이머
// 첫 번째 인수가 콜백함수 
setInterval(function(){...}, 2000);                      
    




profile
다재다능한 코린이가 될거야 ! 🧚‍♀️

0개의 댓글