[JavaScript] 함수(function)

선언적 함수

   : 매개변수가 없는 경우에는 매개변수를 생략할 수 있고, 반환값이 없을 경우에 반환값을 생략할 수 있다.

function 함수명(매개변수1, 매개변수2, ...){
    해당 함수를 호출했을 때 실행할 소스코드;
    
    return 결과값;
}

 

 

 

 

익명함수

   : 주로 특정 변수나 속성에 대입되는 함수(이벤트 핸들러)를 제시할 때 사용한다.

  - 이벤트 핸들러: 이벤트 속성에 대입되는 function

function(매개변수1, 매개변수2, ...){
    소스코드;
}

 

 

 

 

함수의 매개변수

  - 매개변수를 제시할 땐 자료형을 지정하지 않고 변수명만 작성한다.

  - 정의한 매개변수의 개수보다 많이 전달되면 초과된 전달값은 무시되고 개수 만큼 반환된다.

  - 정의한 매개변수의 개수보다 적게 전달되면 undefined가 반환된다.

<button onclick="variety('매개변수1');">확인</button>
<!-- 매개변수1 -->
<button onclick="variety([1, 2, 3]);">확인</button>
<!-- 1, 2, 3 -->
<button onclick="variety(15, '비빔밥', '떡볶이');">확인</button>
<!-- 15 -->
<button onclick="variety();">확인</button>
<!-- undefined -->

<div id="divE" class="zone"></div>
<script>
    function variety(value){
        document.getElementById("divE").innerHTML = value;
    }
</script>

 

 

 

 

매개변수와 관련된 arguments 배열

   : 함수를 호출할 때 전달된 값은 내부적으로 arguments 배열에 담긴다.

  - arguments: 모든 함수마다 내부적으로 하나씩 존재하는 배열 객체

<button onclick="variety2(100, 94, 88, 75, 89);">확인</button>
<div id="divE3" class="zone"></div>
<script>
    function variety2(){

    var sum = 0;
    for(var i = 0; i <arguments.length; i++){
        sum += arguments[i];
    }
    document.getElementById("divE3").innerHTML += "총합: "+sum+"<br>";
    // 총합: 446
    document.getElementById("divE3").innerHTML += "평균: "+sum/arguments.length+"<br>";
    // 평균: 89.2
    }
</script>

 

 

 

 

매개변수가 있는 함수에 this 전달하기

   : Java와 같이 본인을 가리킬 때 this로 표현한다.

<button onclick="variety3(this);">this</button>
<!-- <button onclick="variety3(this);">this</button> -->
<button onclick="variety3(this.innerHTML);">innerHTML</button>
<!-- innerHTML -->
<button value="value버튼" onclick="variety3(this.value);">value</button>
<!-- value버튼 -->
<button id="버튼id" onclick="variety3(this.id);">id</button>
<!-- 버튼id -->

<script>
    function variety3(value){
        console.log(value);
    }
</script>

 

 

 

 

함수의 리턴

1. 일반적인 값의 리턴

<button onclick="variety4();">리턴버튼</button>
<div id="divE4" class="zone"></div>
<script>
    function variety4(){
        document.getElementById("divE4").innerHTML += "랜덤값: "+ ran() + "<br>";
    }
    
    // 1~100 랜덤값 구해서 반환하는 함수 만들기
    function ran(){
        let random = (Math.random()*100+1);
        
        return random;
    }
</script>

 

 

 

2. 익명함수 리턴

이름: <input type="text" id="userName">
<button onclick="variety5()();">환영인사</button>
<script>
    function variety5(){
        var name = document.getElementById("userName").value;

        return function(){
            alert(name+" 님, 안녕하세요!");
        }
    }
</script>