자바스크립트 함수 선언, 콜백, 호출 스케줄링

🎯 자바스크립트 함수선언 방법, 고급함수, 유틸리티 함수를 알아본다.

 

 

 

함수의 정의 방법 3가지

---

선언적 정의 방법(이름있는 함수)

함수 선언식은 코드 안에 독자적인 구문 형태로 존재하며 함수명을 반드시 정의해야 한다.

• 매개 변수가 없는 경우

    function func1() {
        alert("javascript")
    }

• 매개 변수가 있는 경우

    function func2(name) {
        document.write(name + "님 안녕하세요.");
    }

• 리턴 값이 있는 경우

    function func3(value) {
        var ans;
        ans = value + 200;
        return ans;
    }

함수 생성 시점

func4();
function func4(){
...
}

선언식 함수는 프로그램 컴파일 단계에서 생성되기 때문에 함수 정의 전에 호출이 가능하다.

따라서 func4 함수는 스크립트 내 어디서든 호출할 수 있다.

 

함수리터럴 (익명함수)

var 변수명 = function(args,args){
 statement;
    retrun ;
}

함수 표현식은 자바에 없는 특별한 개념이다. 자바스크립트는 함수를 값으로 취급하기 때문에 변수에 할당할 수 있다. 이 때 함수는 이름이 없기 때문에 변수에 할당하게 되면 함수명이 변수명이 된다. 함수는 프로그램의 실행 단계에서 생성되기 때문에 함수 정의 전에 호출할 수 없다.

 

Function 생성자 이용

var 변수명 = new Function("x","y","return x+y");

다른 객체(인스턴스)를 생성할 수 있는 생성자 함수이다. F는 대문자로 작성하며 여러 개의 인자를 지정할 수 있다. 마지막 인자 위치에는 함수에서 실행될 코드를 명시한다.

 

 

 

매개변수와 인자

---

함수에서 정의된 매개변수와 호출하는 인자의 개수가 서로 달라도 호출이 가능하다. 자바스크립트는 메소드 호출시 파라미터 개수를 체크하지 않는다.

function  one( x , y , z){
    for( var i = 0 ; i < arguments.length ; i++){
       console.log( arguments[i]);
    }
}
one(10,20);
one(10,20,30);
one(10,20,30,40);

arguments는 함수 내에 자동으로 생성되는 내장변수다. 내장변수 arguments는 호출 시 넘어오는 파라미터를 배열로 관리한다. 따라서 파라미터 개수를 argument.length()로 얻을 수 있으며 argument[index]를 통해 배열 요소에 접근할 수 있다.

function  makeFactorialFunc(){
    return function(x){
         if( x <= 1) return 1;
        return x * arguments.callee( x - 1 );//현재 실행함수
    }
}

var result  = makeFactorialFunc()(5);
console.log( result );  // 120  ( 5 * 4 * 3 * 2 * 1 )

arguments.callee() 속성은 현재 실행되고 있는 함수를 나타낸다. 재귀 호출시(함수 a가 끝날 때 다시 a를 호출함) 유용하게 사용할 수 있다.

 

 

함수 연습

var aaa = function(){
        console.log("aaa호출");
        return 100;
    };

    var xxx1 = aaa;
    var xxx2 = aaa();
    console.log(xxx1());
    console.log(xxx1);
    console.log(xxx2);

자바스크립트는 괄호가 있어야 함수를 호출한다. 괄호를 붙이지 않은 xxx1은 함수 자체를 출력했다.

 

function ttt(){
        console.log("ttt호출");
        return eee;
    }
    var eee = function() {
        console.log("eee호출");
    };
    var k = ttt();
    k();

이 함수는 거꾸로 따라간다. k변수를 함수로 호출하고 k에 담겨있는 ttt함수를 호출하고 ttt 함수를 실행한다. 리턴을 eee로 하기때문에 eee에 담겨있는 익명함수도 실행되고 함수를 종료한다.

 

function kkk(x){
        console.log("kkk호출", x);
        x();
    }

    kkk(function(){
        console.log("ppp 호출");
    });

함수를 호출하면서 인자로 함수를 전달한다. kkk 함수는 파라미터에 익명함수를 전달받고 콘솔에 메세지와 익명함수 전체를 출력한다. 마지막으로 익명함수를 호출해서 콘솔에 ppp 메세지가 출력된다.

 

즉시실행함수

(function (){
        console.log("즉시호출함수");
    })();

함수 전체를 괄호로 감싼 뒤 바로 호출괄호를 붙인다.

 

 

 

고급함수 형태

---

콜백함수

function call(info){
    info();
 }

 var callback = function(){
     console.log("callback");
 }

 call(callback)

함수를 함수의 인자로 전달하고 필요할 때 인자로 전달한 함수를 나중에 호출하는 것을 콜백함수라고 말한다. 실행할 함수(callback())를 만들어놓고 필요할 때 트리거 함수(call())에게 인자로 전달해서 호출한다.

 

중첩함수

var a= function(arg) {
    var b= function(n) {
        return n*100;
    }
    return b(arg);
}

//외부에서 접근 방법
var result = a(2);
console.log(result);

특정 함수에서만 사용하는 기능일 경우 내부에 정의해서 사용할 수 있다. a 내부에 있는 b 함수는 외부에서 접근할 수 없다. 외부에서 접근하기 위해선 a 함수를 함께 사용해야 한다. 먼저 a 함수를 호출하고 인자를 전달한다. a 함수는 리턴결과로 b함수를 호출하고 받아온 인자를 같이 전달한다. 호출된 b 함수는 받아온 인자에 100을 곱한 값을 리턴한다. 이 결과 200은 result 변수에 담긴다.

 

var k = function(){
    var d = 10;
    var k2 = function(){
        return  d * 2;
    }
   return k2();
}

console.log("k() 호출 : " + k() ); //20

중첩함수는 내부에 정의된 변수에 접근할 수 있다. k함수 외부에서는 d 변수에 접근할 수 없지만 k2 함수는 접근할 수 있다. 객체지향의 은닉화 기법을 적용할 수 있다.

 

 

 

유틸리티 함수

---

• alert 함수 : 경고창을 화면에 띄울 때 사용한다.

  alert('hi!');

• setTimeout 함수 : 일정 시간에 함수를 단 한 번 실행한다.

    setTimeout(function(){
        alert("bbb");
    },3000);

  3초 후에 함수를 한 번 실행한다.

• setInterval 함수 : 일정시간마다 반복해서 함수를 실행한다.

    var kkk= setInterval(function(){
           console.log("setInterval")
       },3000);
  
    setTimeout(function(){//10초뒤에 interval 삭제 
        clearInterval(kkk);
    },10000);
  

  kkk 함수는 3초마다 반복해서 함수를 실행한다. clearInterval()함수는 반복함수를 지워준다.

• parseInt, parseFloat 함수 : 문자열을 숫자로, 실수로 변환한다.

  var num = parseInt("123");

 

 

 

😜 NEXT : 자바스크립트 built-in 객체 공부하기