함수

선언적 함수

onclick="test()";

function 함수명(매개변수, ...){
	해당 함수 호출 시 실행할 코드;
    return 결과값;
}

매개변수가 없으면 생략이 가능하다.

반환값도 없을 경우 반환값도 생략 가능하다.

---

익명 함수

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

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

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

---

함수의 매개변수

매개변수 지정 시 자료형을 적지 않고 변수명만 작성한다.

함수에 정의된 매개변수보다 많은 값이 넘어오면 정의된 변수에 순서대로 들어가고 나오지는 않는다.(오류도 나지 않는다)

함수에 정의된 매개변수보다 적은값이 넘어오면 정의되지 않은 변수에는 undefined가 발생한다.

---

매개변수 관련 arguments 배열

함수 호출 시 전달되는 값은 내부적으로 arguments 배열에 담긴다.

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

---

this

매개변수 있는 함수에 this를 사용하면

자기 자신을 가리킨다.

• 예시 :

<button onclick="test5(this);">this전달</button>
<button onclick="test5(this.innerHTML);">asdsa</button>
<button value="3value" onclick="test5(this.value);">this.value</button>
<button id="btn4" onclick="test5(this.id);">this.id</button>

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

return

• 예시 :

<button onclick="test6();">test6</button>
<div class="area" id="area5"></div>
<script>
    function test6(){
        document.getElementById('area5').innerHTML = '랜덤값 : ' + ran() + "<br><br>";
    }
    function ran(){
        let random = parseInt((Math.random()*100)+1);

        return random;
    }
</script>

---

익명함수를 리턴하는 함수

• 예시 :

이름 : <input type="text" name="" id="userName"><br>
<button onclick="test7()();">test7버튼</button>

<script>
    function test7(){
        let name = document.getElementById('userName').value;

        console.log(name);

        return function(){
            window.alert(name+'님 ㅎㅇ');
        }
    }
</script>