티스토리 뷰

Javascript

선언적 함수, 매개변수 함수

근혁 2022. 2. 14. 22:03

함수

데이터를 저장할 때 변수를 선언하여 저장하였습니다. 변수에는 데이터만 저장할 수 있고, 코드는 저장할 수 없다. 하지만 함수를 사용하면 코드를 메모리에 저장했다가 필요할 때마다 호출하여 사용할 수 있다

선언적 함수

함수를 사용하여 코드를 저장한 것을 '함수 정의문'이라고 한다. 변수를 선언할 때 var 키워드를 사용한 것처럼 함수에서 function 키워드를 사용해 변수를 선언한다. 함수 정의문은 다음과 같이 선언한다.

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

함수 정의문({...}) 안에 작성된 코드는 즉시 실행되지 않는다 함수는 메모리에 할당되어 대기하고 있다가 함수가 호출되면 실행합니다. 정의되어 있는 함수를 호출하는 기본형은 다음과 같다.

{
    기본형 :
    함수명 = ();
        또는 참조 변수
}

다음은 함수 정의문을 이용해 [배경색 바꾸기]버튼을 클릭할 때마다 배경색이 바뀌도록 만든 예제이다

{
06:  <script>
07:     var color = ["white", "yellow", "aqua", "purple"];
08:     
09:     var i = 0;
10:     function changeColor(){
11:         i++;
12:       『 if( i >= color.length) { 
13:             i = 0;                              <- i의 값이 4 이상이면 i에 0을 대입합니다.
14:         }                                 』
15:
16:         var bodyTag = document.getElementByle("theBody");
17:         bodyTag.style.backgroundColor = color[i];
18:         }
19: </script>
20: </head>
21: <body id="theBody>    
22:     <button onclick="changeColor();>    <--버튼을 클릭하면 changeColor()함수를 호출합니다.
23: </bodyt>
}

매개변수 함수

매개변수가 있는 함수 정의문은 함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있습니다. 이렇게 전달된 값은 매개변수가 받아 함수 정의문에서 사용할 수 있게 된다 다음은 함수를 호출할 때 값을 전달하는 기본형이다. 함수를 호출할 때 ⓐ 데이터 1은 ① 매개변수 1에 저장되고 ⓑ 데이터 2는 ② 매개변수 2에 저장된다, 그리고 ⓒ 데이터는 ③ 매개변수 n에 저장된다

{
    기본형 :                     ①             ②                ③
    function 함수명(매개변수 1, 매개변수2, ...매개변수n){
        자바스크립트 코드;
}               ⓐ           ⓑ         ⓒ
    함수명(데이터 1, 데이터2, ...데이터 n);
}

다음은 함수를 호출했을 때 이름과 사는 지역의 데이터를 함수 정의문의 매개변수 name과 area에 각각 전달하여 함수 안에 있는 실행문의 매개변수에 저장된 데이터를 불러와 출력하는 예제다.

{
06:  <script>
07:     function myFnc(name, area){
08:         document.write("안녕하세요" + name + "입니다.", "<br>");         
09:         document.write("사는곳은" + area + "입니다.", "<br><br>");
10:     }
11:
12:     myFnc("박근혁", "경기도");      //안녕하세요 박근혁입니다.
13:                                              //사는곳은 경기도입니다.
14:     myFnc("홍당무", "서울");
15:  </script>
}

'Javascript' 카테고리의 다른 글

setTimeout()  (0) 2022.02.16
리턴값 함수, 익명함수  (0) 2022.02.14
연산자  (0) 2022.02.07
break문, continue문  (0) 2022.02.04
else문, if else문  (0) 2022.01.28

UP NEXT : Javascript

댓글
© 2018 webstoryboy