[JavaScript] 함수

자바스크립트 함수

자바스크립트에서는 함수도 하나의 타입(datatype)

함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능

또한, 자바스크립트 함수는 다른 함수 내에 중첩되어 정의될 수도 있음

 

함수의 정의

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

- 매개변수 변수타입 지정 X (자바스크립트가 알아서 인식함)
- 자료형에 상관없이 매개변수 갯수만 일치하면 실행에 문제가 없다
- 매개변수, return결과값은 생략가능​
- 정의해둔 매개변수 수보다 매개변수를 적게 전달시 실행에는 문제가 없음 단, 전달받지 못한 매개변수 자리는 출력시 undefined로 메꿔짐
- 정의해둔 매개변수 수보다 매개변수를 많이 전달시 실행에는 문제가 없음 단, 초과된 전달값들은 무시됨

 <div id="area1" class="area"></div>
     <button onclick="test1();">실행</button>
     <script>
        function test1(){
            document.getElementById('area1').innerHTML += 'test1()함수 실행됨 <br>';
        }
     </script>

 

 함수의 종류   

1. 선언적 함수: 이름이 있는 함수, 이름을 통하여 호출후 실행       
2. 익명 함수 : 이름이 없는 함수, 함수명 대신 변수명에 함수를 대입하여       
 함수코드를 지정하는 구현방식

익명함수

[표현법]       
변수 = function(){        }       
=--> 특정 변수, 속성에 대입하는 함수가 필요할 떄 주로 사용       
(주로 이벤트헨들러 작성시 사용)

<button id="btn">실행확인</button>
     <div id="area2" class="area"></div>

     <script>
        var btn = document.getElementById('btn'); //버튼 요소객체 반환
        btn.onclick = function(){ 
            document.getElementById('area2').innerHTML += '이벤트 핸들통해 실행 <br>';
          } // 이벤트속성에 대입되는 function -=이벤트 헨들러
        
     </script>

함수의 매개변수

<button onclick="test3('프로개발자');">실행확인</button> // 프로개발자 
     <button onclick="test3(10);">실행확인</button>  // 10
     <button onclick="test3([1,2,3]);">실행확인</button> // 1,2,3
     <button onclick="test3(true);">실행확인</button> // true
     <button onclick="test3(prompt('이름을 입력하세요'));">실행확인</button> // prompt입력값
     <button onclick="test3();">실행확인</button>   // undefined
      <!-- 정의해둔 매개변수 수보다 매개변수를 적게 전달시 실행에는 문제가 없음
        단, undefined로 뜸 -->
     <button onclick="test3(1,2);">실행확인</button> // 1
      <!-- 정의해둔 매개변수 수보다 매개변수를 많이 전달시 실행에는 문제가 없음
        단, 초과된 전달값들은 무시됨



      <!--자료형에 상관없이 매개변수 갯수만 일치하면 실행에 문제가 없다 -->

     <div id="area3" class="area"></div>
     <script>
        function test3(value){ // 매개변수 제시 자료형 지정없음 , 그냥 변수명만 쓴다!
            document.getElementById('area3').innerHTML = value;
            //프로개발자
            // 자바스크립트에선 객체, 배열만 heap에 올라감, 나머지는 stack에

 
        }
     </script>

 

arguments배열

함수 호출시 전달하는 값은 내부적으로 arguments라는 배열에 담김
* arguments: 모든 함수마다 내부적으로 하나씩 존재하는 배열객체
arguments 객체는 모든 함수 내에서 이용 가능한 지역 변수
 arguments 객체를 사용하여 함수 내에서 모든 인수를 참조할 수 있으며, 호출할 때 제공한 인수 각각에 대한 항목을 가짐
arguments 객체는 Array와 비슷하지만, lenth 속성 제외 기타 Array속성을 가지고 있지 않음
그러나, Array로 변환은 가능함( Array.from()메서드 또는 전개 연산자를 사용)

 

var args = Array.from(arguments);
var args = [...arguments];

 

 <button onclick="test4(1,2,3,4,5,6,7,8,9);">실행확인</button>
     <div id="area4" class="area"></div>

     <script>
        function test4(){
            console.log(arguments);
            console.log(arguments[0]);

            arguments[0]=100;
            // 매개변수의 값을 재대입을 통해 바꿀 수 있음
            console.log(arguments[0]);

            //arguments배열의 총 합과 평균을 구하여 id 속성값이 area4 div요소 inner속성 대입
            var sum=0;
        
            for (var i in arguments){
                sum += arguments[i];
            }
            
            document.getElementById('area4').innerHTML += '총합계: '+sum+'<br>'; // 144
            document.getElementById('area4').innerHTML += '평균: '+(sum/arguments.length)+'<br>'; //16
            
        }
     </script>

 

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

  <button onclick="test5(this);" id="b">버튼1</button>
     <!-- this 전달시 자기자신이 속해있는 요소객체가 반환됨 -->
     <!-- this: 요소객체 자기자신(이벤트를 실행한 주체) 반환!!!  -->
     <button onclick="test5(this.innerHTML);" id="abc">버튼2</button> 
     //     
     <button onclick="test5(this.id);" id="btn33">버튼3</button> //
     <input type="button" value="버튼4" onclick="test5(this.value)"> //


     <script>
        function test5(a){
            console.log(a);
            var abc= document.getElementById('abc');
            console.log(abc);
            console.dir(abc);
        }
     </script>

함수의 리턴

* 일반적인 값을 리턴하는 경우

<button onclick="test6();">실행확인</button>
     <div id="area6" class="area"></div>

     <script>
        // 1~100 사이의 랜덤한 난수를 생성하여 반환하는 함수
        function random(){
            return parseInt(Math.random()*100+1) ;
            // 0~100사이 정수
            
            // Math.random : 0.0 ~0.999
            // 자바스크립트에서 제공하는 내장객체 
        }
        function test6(){
            document.getElementById('area6').innerHTML = '랜덤값: '+random();
        }
     </script>

익명함수를 리턴하는 경우*****

     이름: <input type="text" id="userName">
     <button onclick="test7()();">실행확인</button>
     <!-- 이름없는 함수를 반환받은 후, 해당함수를 다시 호출!-->
     
     test7()호출시에는 하단 함수가 반환됨 (test7()에 하단 함수가 리턴됨)
     [
      function(){
                alert(name + '님 환영합니다');
            };
      ]
      
      따라서, 다시한번 ()를 통해 익명함수를 호출하여야만 익명함수의 코드가 실행되여 alert창이 출력됨
      
      
      
     <script>
        function test7(){
            // 누구누구님 환영합니다 
            var name= document.getElementById('userName').value;
            console.log(name);
            return function(){
                alert(name + '님 환영합니다');
            };
        }

 

 

References

 

http://www.tcpschool.com/javascript/js_operator_assignment

코딩교육 티씨피스쿨

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments

arguments 객체 - JavaScript | MDN