웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)

함수(), function(){} 본문

javascript/Tutorial

함수(), function(){}

jokack01 2013. 11. 26. 09:31

함수



익명함수

함수에 이름을 선언하지 않고 변수에 참조한 형태를 말한다. 


익명함수의 선언 및 호출

var 함수이름 = function(){  // 함수를 선언

    console.log('function')  // 함수 호출시 function을 화면에 출력 

}

함수이름();  // 함수 호출 




선억적함수

일반적 함수의 형식으로 다음과 같은 방법으로 선언한다. 


함수의 선언

function 함수이름(){

문장 

}

함수이름();  // 함수호출


위 코드는 익명함수와 같은 기능을 수행한다. 

변수는 같은 이름으로 다시 선언하면 나중에 선언한 변수가 기존변수를 덮어 씌우는 것과 

마찬가지로 함수도 같은 이름으로 선언된 것이 있으면 나중에 작성한 것이 우선한다. 

ps. 웹브라우져는 script 내부 내용을 한줄한줄 읽기 전에 선언적 합수를 먼저 읽는다. 따라서 함수를 먼저 호출하고 그후에 함수를 정의하여도 그 함수는 정상 작동 한다. 




내장함수

프로그래밍 언어에서 처음부터 짜 넣어져 있는 함수를 말한다.

javascript 에서는 prompt(), alert(), typeof(), eval(), String(), Number(), 등 수많은 것들이 있으며

몇가지 간단한 예만 테스트로 출력해 보겟다.  각 의미는 모두 다르지만 사용법은 비슷하다. 


내장함수 사용

var num = 20,  // num 변수의 숫자값 20을 찹조

    str = '100';  // str 변수에 문자열 100을 참조

console.log(typeof(str));  // typeof를 이용해 자료형 확인

console.log(String(num));  // Strimg를 이용하여 숫자값 20을 문자열로 바꾼다

console.log(Number(str));  // Number을 이용하여 문자열 '100' 값을 숫자값 100 으로 바꾼다

console.log(eval(num + Number(str)));  // str의 값을 숫자로 바꾼뒤 eval을 이용하여 수식을 계산한다. 




매개변수(인자값)와 리턴값

함수는 호출할때 아래와 같이 호출 한다.

 함수이름();   

이렇게 함수 호출 시에 ()안에 적는 것을 매게 변수 또는 인자값 이라 하고 

함수가 반한해주는 값을 리턴값 이라고 부른다.  


매개변수와 리턴값을 가지는 함수의 선언

function 함수이름(매개변수, 매개변수){

문장

return 리턴값;

}

매개변수와 리턴값을 모든 함수에 사용하는 것은 아니며, 필요한 경우에 선택적으로 사용한다.


예 ) 

// multiplication 함수에 매개변수로 x 와 y 값을 받는다.

function multiplication(x, y){

    return x + y;  // 반환해주는 값은 x 와 y 의 합을 던진다.

}

// 함수를 실행할때  매개변수로 x 에 5, y에 10을 던져준다.

multiplication(5, 10); 

반환된 값으로 리턴값이 x 와 y의 합인 15가 나온것을 확인 할 수 있다.



매개변수

- 함수를 호출하는 쪽과 호출된 함수를 연결하는 매개가 되는 변수

- 함수생성시 지정한 매개변수보다 많거나 적게 사용 할 수 있다. 


원래 선언된 매개변수 보다 많게 사용하면 추가된 매개변수는 무시된다.

내장함수를 통해 확인해보자.

String(1,2,3);

String() 내장함수에 숫자 1,2,3 의 숫자를 담아 3개의 매개변수를 던졌지만 

1 이라는 숫자만 문자열로 바뀌어 나오고 나머지는 무시된 것을 볼 수 있다. 


함수에서 선언한 매개변수보다 적게 사용할 경우 미지정한 매개변수에는 undefined가 입력된다.

사용자 입력을 요구하는 prompt() 내장함수를 예로 들어보자.


정상적으로 입력하면 아래처럼 두가지 매개변수를 받는다.

prompt('첫번째 매개변수','두번째매개변수(문자열입력)');


이번엔 원래 선언된 매개개 변수보다 적게써 보면

아래와 같은 결과값이 나오는 것을 볼 수 있다.

prompt('첫번째 매개변수');



return 키워드

- 함수가 실행되는 도중에 함수를 호출한 곳으로 돌아간다. 즉, 함수 실행도중에 return 키워드를 만나면 함수는 종료 된다. 


ex) 함수종료

function emptyReturn(){  // 함수선언

    console.log('print-start');  // 화면에 print-start 출력

    return;  // 함수종료

    console.log('print-end');  // 위에서 리턴문을 만나 이코드는 출력되지 않는다.

}

emptyReturn();




가변인자 함수

매개변수의 개수가 변할 수 있는 함수로 매개변수를 선언된 형태와 다르게 사용 가능하다. 


ex) 

function plus(){  // 함수 선언, 매개 변수를 정의하지 않앗다.

    console.log(arguments);  //arguments 출력

}

plus(1,2,3);  // 함수 호출 매개 변수로 1,2,3 을 던진다.

 arguments는 함수내에 선언하지 않아도 존재하는 변수로서 입력된 매개변수를 배열로 반환해 준다. 



ex) 받은 매개 변수들의 총합 구하기

function plus(){  // 함수 선언

    var num=0;  // num 변수 선언 및 초기화 

    for(var i in arguments){  // 반복문 이용 i라는 변수가 arguments 만큼 반복

        num += arguments[i];  // arguments의 인덱스 값을 기존 num 변수에 더한다. 

    }

    return num;  // num 값을 반환

}

console.log(plus(1,2,3));  // 화면에 출력




내부 함수

아래와 같이 함수내부에 선언한 함수를 의미

function 외부함수(){

    function 내부함수(){

    }

}

내부함수는 내부함수가 포함되는 외부함수에서만 사용이 가능하며 외부에서는 접근이 불가하다.


고전적인 예제로 넓이와 높이값의 제곱을 더한 루트값 구하는 피타고라스를 예로 들면 

function ptr(w,h){  // ptr 변수에 w(넓이값) 과 h(높이값)을 매개개 변수로 받는다.
function multiplication(x){  // 내부함수 선언 
return x * x; // w와 h 의 제곱을 반환한다. 
}
// Math.sqrt를 이용해 반환된 w, h의 제곱근을 구해서 반환한다.
return Math.sqrt(multiplication(w) + multiplication(h));
}
ptr(5, 7);

Math는 수학적 계산을 도와주는 내장함수? 로서 sqrt(제곱근), PI(원주율), max(최대값), min(최소값) 등 몇가지 것 들이 있다.

물론 내부함수를 사용하지 않고 ptr 함수 내에서 정의해서 아래와 같이 풀어 쓸수도 있다.

function ptr(w,h){  

return Math.sqrt(w * w + h * h)

}

ptr(5, 7);


그렇지만 양변을 곱하는 부분이 반복됏기 때문에 따로 내부 함수로 정의한 것이다. 

때로는 반복되는 일을 함수로 정의해 놓고 그때그때 불러 재사용 할 수 있도록 정의 하는 것이 좋다. 

(현재 내 자신도 아직 그경지에는 이르지 못하고 잇으니.... 직접 해보면서도 갈길이 멀구나를 .. 매번 느끼고 있다..........언제쯤 고수의 길로 접어들지... )