자바스크립트 입문, 함수-1

※함수란?

데이터를 저장할 때 변수를 선언하여 저장했지만, 코드는 저장할 수 없다.하지만 함수를 사용하면 코드를 메모리에 저장했다가 필요할때마다 호출하여 사용할 수 있다.예로 TV 리모컨을 보면 각 채널의 버튼이 있고, 각 버튼에는 해당 채널로 바꿀 수 있는 코드가 저장되어있다.이 코드는 사용자가 리모컨의 버튼을 눌러(호출)야만 실행된다. 이 때 각 TV 리모컨의 버튼은 함수를 저장하고 있으며 버튼을 누를 때마다 함수가 호출된다고 할 수 있다.

 

○ 함수

- 자바스크립트 코드를 저장

- function이라는 키워드를 이용하여 선언한다

- 출력문, 제어문 등의 코드를 저장하고 데이터를 반환한다 

 

○ 기본 함수 정의문

함수를 사용하여 코드를 저장한 것을 '함수 정의문'이라고 한다. 

변수를 선언할 떄 var 키워드를 사용한 것처럼 함수에서는 

function 키워드를 사용해 변수를 선언한다

function 함수명(){
	자바스크립트 코드;
}

참조 변수 = function(){
	자바스크립트 코드;
}

//함수명();
//또는 참조 변수();


<script>
    var count = 0;

    myFnc();

    function myFnc(){
        count++;
        document.write("hello" + count, "<br>");
    }

    myFnc();

    var theFnc = function(){
        count++;
        document.write("bye" + count, "<br>");
    }

    theFnc();
</script>

// 함수 정의문과 익명 함수를 변수에 참조 한 예
// myFnc()가 2회 호출되고 theFnc()가 1회 호출되어 
/hello1 , hello2 , bye3 가 출력된다

 

○ 매개변수가 있는 함수 정의문

기본 함수 정의문은 함수 안에 있는 코드를 실행할 때 단순히 함수명으로 호출해서 코드를 실행했으나,

매개변수가 있는 함수 정의문은 함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있다.

이렇게 전단될 값은 매개변수가 받아 함수 정의문에서 사용할 수 있게 된다.

function 함수명{(매개변수1, 매개변수2,...매개변수n)
	자바스크립트 코드;
}

함수명 (데이터 1, 데이터 2, ....데이터 n);


<script>
   var rightId="inkor";
   var rightPw="1111";
   function login(id,pw){
       if(id == rightId){
           if(pw==rightPw){
               document.write(id+ "님 환영합니다");
           } else {
               alert("잘못된 비밀번호 입니다");
           }
       }else {
           alert("존재하지 않는 아이디 입니다.")
       }
   }

   var userId = prompt("아이디를 입력하세요", "");
   var userPw = prompt("패스워드를 입력하세요", "");

   login(userId,userPw);

</script>
// prompt창을 활용한 아이디&비밀번호 입력 및 문구출력 예제

 

○ 매개변수 없이 함수에 전달된 값 받아오기

함수 정의문에서 arguments을 사용하면 매개변수를 사용하는 것처럼 함수 호출문의 값을 받아올 수 있다.

함수 정의문의 매개변수가 없는 상태에서 데이터를 전달하여 함수를 호출하면 그 값은 배열에 저장된다.

함수 정의문에서는 그 값을 arguments라는 변수로 참조한다.

 

function 함수명(){
	arguments;
}

함수명(데이터1, 데이터2, 데이터3);


<script>
   function sum(){
       var sum = arguments[0] + arguments[1] + arguments[2];

       document.write(sum);
   }

   sum(10,20,30);
</script>

-출처: 자바스크립트+제이쿼리입문 책 중

http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791163030034&orderClick=LAG&Kc=