JS - 함수의 이해

함수는 외부의 모든 작업을 함수 내에서 사용할 수 있도록 만들어진 코드 블록의 하나로 모듈화가 가능합니다.

모든 기능을 한 곳에서 처리하게 되면 코드를 해석하고, 관리하는 게 관리자의 입장에서 매우 어려워질 수 있습니다. 예를 들어 어떤 글을 주제별로 나누어 놓으면 읽기에 좋고, 찾기에도 쉬워 가독성이 좋아진다는 이점이 있습니다.

이렇게 기능별로 함수를 만들어 놓은 것을 모듈화라고 부르고, 더 세분화할수록 가독성은 더욱 좋아집니다.

함수는 내장함수, 외장함수, 익명함수로 분류할 수 있는데, 내장함수는 자바스크립트를 설치할 때 기본적으로 제공되는 함수를 말하며, 사용자가 새로운 함수를 만들어 선언할 수도 있습니다.

함 수	설 명
내장함수	Javascript 에서 기본적으로 제공하는 함수
외장함수	사용자가 만들어 사용하는 함수
익명함수	이름을 지정하지 않은 함수

여기서 잠깐 함수와 메서드의 차이를 살펴보면, 클래스 내부에는 변수나 함수를 선언하거나 정의할 수 있으며 이렇게 정의된 함수를 메서드라 부릅니다. 이 메서드는 클래스의 멤버이고, 클래스 외부에 정의된 것을 함수라 부릅니다.

사용자 함수는 function 이라는 예약어로 시작하고, 하나 이상의 인자(arguments)가 올 수 있습니다.

 // 인자가 없는 함수라면...
 function 함수이름 () { 함수내용 }

 // 인자가 하나 이상 있는 함수라면...
 function 함수이름 (매개변수1, 매개변수2 .... ){ 함수 내용 }

 // 반환 값이 있는 함수라면 return 문이 들어갑니다.
 function 함수이름 () { return arguments; }

사용자 정의 함수는 다음 세 가지 방식 중 하나를 사용하면 됩니다.

 // 기본적인 방식
 function 함수명 (){...}

 // 익명 함수를 참조하는 방식
 함수명 = function(){...}

 // 함수 호출없이 바로 동작하는 방식
 (function(){...})();

사용자 선언 함수

함수 이름은 변수 이름의 규칙를 벗어나지 않는다면 자유롭습니다. 다음은 하나의 인자를 사용하여 정의하였습니다.

<script>
 function test (arg = 'value') {
   var retval = 125;

   document.write(arg + " 예제 함수");

   return retval;
 }


 test(); // value 예쩨 함수

 document.write( test() ); // value 예제 함수 125

 test("좋은"); // 좋은 예제 함수

 var a = "참";
 var b = test(a);

 document.write( b ); // 참 예제 함수 125
</script>

하나 이상의 인자를 사용할 경우 쉼표로(,)로 구분해서 사용하면 되는데, 다음과 같이 작성해 줍니다.

<script>
 function test(arg1, arg2, arg3 = 'bool') { 
    document.write("예제 함수.\n"); 
 } 

 var a = 1; 
 var b = 2; 
 var c = null;
 test(a,b, c); 
</script>

여기서 a, b, c는 인자라 하고, arg1, arg2, arg3은 파라미터(parameter) 또는 매개변수라 부릅니다.

arg3 = 'bool'은 인자에 전달된 변수가 없으면, "bool"을 디폴트로 사용하겠다는 뜻입니다. 만약, 디폴트 값이 있으면 인자를 비워도 괜찮지만, 없으면 인자를 비워 두어서는 안됩니다.

<script>
 function test(a, b, c) { 
   document.write("테스트"); 
 } 

 var a = 1;
 var b = 2;
 test(a, b); 
 // c 에 디폴트 값이 없으므로 에러가 발생합니다.
</script>

인자에 배열이 올 수도 있고, 반환 값이 배열이 될 수도 있습니다.

<script>
 function makecoffee(type = "cappuccino") { 
    return "Making a cup of " + type + ".\n"; 
 } 
 document.write( makecoffee() ); 
 document.write( makecoffee(null) ); 
 document.write( makecoffee("espresso") ); 

 /* 
 결과: 
 Making a cup of cappuccino. 
 Making a cup of null. 
 Making a cup of espresso. 
 */ 

 function mcoffee( types = Array("카푸치노"), coffeeMaker = null) { 
    var device = (coffeeMaker == null ) ? "손" : coffeeMaker; 
    return device + "(으)로 " + types.join(", ") + "를 만듭니다.\n"; 
 } 
 document.write( mcoffee() ); 
 document.write( mcoffee( Array("카푸치노", "에스프레소"), "찻주전자") ); 

 /* 
 결과: 
 손(으)로 카푸치노를 만듭니다. 
 찻주전자(으)로 카푸치노, 에스프레소를 만듭니다.  
 */ 

 function returncoffee() { 
    var arr = Array("카푸치노", "에스프레소"); 
    return arr; 
 } 
 var arr = returncoffee(); 
 document.write( arr.join(", ") ); 

 /* 
 결과: 
 카푸치노, 에스프레소
 */ 
</script>

반환문

반환문은 for문이나, while문과 같은 루프형이나 함수 내에 호출된다면, 함수의 수행을 즉시 끝내고, return에 결과 값을 넘겨줄 수 있습니다.

<script>
 function returncoffee() { 
    var coffee = " 는 맛이 좋습니다." 
    return "카푸치노" + coffee; 
 } 
 document.write( returncoffee() ); // 결과: 카푸치노 는 맛이 좋습니다. 

 // 이 함수는 반환 값을 갖지 않습니다. 
 function voidcoffee() { 
    var coffee = " 는 맛이 좋습니다." 
    return; 
 } 
 document.write( voidcoffee() ); // 결과: undefined
</script>

반환문은 함수가 아니라 언어구조이기 때문에 괄호로 묶을 필요는 없지만 괄호를 사용해도 큰 문제는 없습니다.

<script>
 function small_numbers() { 
    return Array (0, 1, 2); 
 } 
 document.write( small_numbers().join(", ") ); // 결과: 0, 1, 2 


 function myfunc1() { 
    return('thingy'); 
 } 
 function myfunc2() { 
    return 'thingy'; 
 }
 function myfunc3() { 
    var x = 'thingy'; 
 return x; 
 } 
 document.write( myfunc1() + "\n" + myfunc2() + "\n" + myfunc3() + "\n" ); 
 // 결과: thingy thingy thingy
</script>

익명 함수 

익명함수는 이름을 지정하지 않은 함수를 말합니다.

<script>
 var result = 0; 

 var one = function() { 
   document.write(result); 
 };
 document.write( one() ); 
 // 결과: 0undefined



 var two = function() {
   return "habony";
 }
 document.write( two() ); // habony

 var a = "php"; 
 var tree = function(a) {
   return a;
 }
 document.write( tree(a) ); // php
</script>

람다(Lamda) 함수 

보통 함수를 정의하고, 호출해야 되는 반면 이 방식은 함수를 정의한 부분에서 바로 그 함수를 호출할 수 있습니다.

<script>
(function(){
 alert("안녕 하보니"); 
})();
</script>

이렇게 함수를 사용하면 다른 일반적인 변수와 중복되지 않는 특징이 있습니다.

<script>
(function a(){
  for(var i = 1; i <= 10; i++){ 
    document.write(i + " ");
  }
})();
// 1 2 3 4 5 6 7 8 9 10
</script>

화살표 방식도 있는데, 파이썬, 자바 등에서 사용하는 람다 함수가 그것입니다. 형식은 익명 함수와 같지만 "=>" 와 같은 화살표가 붙는다는 게 특징입니다. 형식은 다음과 같습니다.

var a = function(){ return 'a'; }

var b = (function(){ return 'a'; })();

var c = () => { return 'a'; };

매개 변수가 있을 때는 익명 함수와 동일하게 작성합니다.

var a = function(q){ return q; }

var b = (function(q){ return q; })();

var c = (q) => { return q; };

매개 변수가 한 개일 때는 아래와 같이 소괄호를 생략할 수 있으며 동일한 결과를 얻을 수 있습니다.

var a = (q) => { return q; };

var b = q => { return q; };

var c = q => q;

매개 변수가 2개일 때는 다음과 같이 표현합니다.

var a = (x, y) => { return x + y; };

var b = ((x, y) => x + y; );

주의할 점은 중괄호가 있을 때는 반드시 return 반환문이 있어야 반환 값을 얻을 수 있습니다.

아래는 매개 변수로 값을 전달하는 예제입니다. 매개 변수로 인수 3을 대입하면 함수 내부의 매개 변수 q 에 값을 전달하고 반환 값으로 3을 할당합니다.

var lamda1 = (q => {return q;})(3);