사용자 정의 함수 Function > jquery

◈ 함수 Function

함수란
어떤 목적을 위해 만들어진 코드를 하나로 묶어 반복되는 작업을 효율적으로 처리해 주는 프로세스 
 
 

● 사용자 함수의 정의

  함수는 'function'이라는 키워드를 사용하여 만든다.
  함수 이름은 사용자가 직접 정의하여 만들면 되는데,
  주의할 점은 변수 이름 작성시와 동일하다.
 
  함수의 작성에는 다음 두가지 방법이 있다.
 
  
▶ 선언적 함수
  "함수이름"을 선언한 함수로 다음과 같은 형식으로 작성한다.
 
function 함수이름() {
  // 실행할 코드
}
 
   ※ "함수이름"을 가진 함수가 생성된다.
      {   } 는 함수의 시작과 끝을 의미하며, html을 포함할 수 있다.
 
(예)
  function sum() {
    var a = 10;
    var b = 20;
    var c = a+b;
  }
 
 
▶ 익명함수  
   함수에 이름을 선언하지 않고 이름없는 함수를 변수에 대입하는 방식으로 작성되는 함수이다.
 
   var 변수 = function() {
      // 실행할 코드
   }
 
(예)
  var sum = function() {
    var a = 10;
    var b = 20;
    var c = a+b;
  }
 
※ jQuery에서는 익명함수를 많이 사용하며, 함수를 매개변수를 사용하게 된다.
 
(예)    
  $("div").hide(1000, function(){//code});
 
 
▶ 선언적 함수와 익명함수의 차이
 
  함수의 기능적 차이는 전혀 없지만, 함수를 작성하는 위치가 다르다.
  "익명함수"는 반드시 함수를 호출하는 코드보다 먼저 작성되어야 한다.
  선언적 함수는 함수 선언이 뒤에 잇고 함수 호출이 앞에 있더라도 상관없이 작동한다.
 
  아래와 같이 익명의 sum이라는 함수가 작성된 위치보다
  앞에서 sum() "함수 호출"을 하게 되면 작동하지 않는다.
 
  sum()
  var sum = function(){....}
 
  함수가 작동되게 하려면 다음과 같이
  함수의 작성위치와 함수호출 순서를 바꾸어 주면 된다.
 
  var sum = function(){....}
  sum()
 
 

● 함수의 호출

  함수 정의를 하고, 정의된 함수를 실행하려면 반드시 함수를 호출해야만 한다.
  정의된 함수는 메모리에 저장되어 있지만 함수를 호출하기 전에는 실행되지 않는다.
 
  함수의 호출은
  정의된 "함수이름"을 불러주는 것으로 "함수이름" 뒤에 "()"를 붙여 주면 된다.
 
(예)
 
  function sum() { // 선언적 함수의 정의 
    var a = 10;
    var b = 20;
    var c = a+b;
  }
  sum() // sum 함수의 호출 
   

● 함수 인자(arguments)와 매개변수(parameters)를 활용한 함수 확장

함수를 선언할 때, ()안에 들어가는 변수를 매개변수(parameters)라고 하며,
실제값(arguments)은 함수를 호출하는 ()안에 넣어 준다.
 
(예)
 
  function sum(a,b) {
    var c = a+b;
    console.log(c);
  }
  sum(10,20); // 30 출력
  sum(20,30); // 50 출력
  sum(50,40); // 90 출력
 
 

● 함수의 종료 및 리턴값

함수를 실행하고 난 후, 함수의 결과를 얻어 사용하려면,
return을 사용하여 결과 값을 전달한다.
 
return 변수; // 함수를 호출한 곳으로 보내고 싶은 값을 전송하고 함수를 종료한다.
return; // 보내고 싶은 값이 없을 때는 return만을 사용하여 함수를 종료한다. return false; 로도 표현한다.
    ※ return이 사용된 지점 이후의 코드는 작동하지 않는다.
 
- return 값이 없는 함수
 
  function sum(a,b) {
    var c = a+b;
      return;
  }
 
- return 값이 있는 함수
 
  function sum(a,b) {
    var c = a+b;
    return c;
  }   
 
(예)
  function sum(a,b) {
    var c = a+b;
  }   
  var total = sum(20,30); // return이 없기 때문에 total 변수에는 정의되지 않은 값이 저장된다.
 
  function sum(a,b) {
    var c = a+b;
    return c;
  }   
  var total = sum(20,30);
    // 함수를 호출한 곳으로 return을 사용하여 c값을 전달하기 때문에 total 변수에 '50'이 저장된다.