[구디아카데미] 자바스크립트 함수

[구디아카데미]

✅ 함수

• 선언적 함수
• 익명함수
• 화살표 함수
• 클로저

자바스크립트의 함수 규칙

• 자바스크립트에서는 함수가 자료형으로 처리 가능
• 자바스크립트는 동적타입이기 때문에 반환형을 따로 선언 필요 x
• (ES6) 부터는 함수 선언시 const 선언을 이용하자

✅ 선언적 함수 : function키워드에 함수 명을 작성하여 사용하는 방법

• 함수를 선언할 때 함수명을 명시하는 것
• function 함수명([매개변수, 매개변수....]){로직 [return 반환 값]}
• 일반적으로 변수를 선언할 때 많이 사용
• 동일한 명칭으로 선언했을 경우 덮어쓰기가 되어버림

    <script>
		
        function basicFunc(){  // 함수 선언하기
            console.log("기본함수 호출함");
        }

     	 basicFunc();  // 선언된 함수 호출하기
        
      
        
        // 매개변수에 var, let 사용하지 않음
        function paramFunc(name, age){ // 함수의 매개변수를 선언할 때는 변수명만 작성하면 됨
            if(typeof name == 'string' && typeof age=='number'){ // 매개변수마다 맞는 자료형을 넣게 예외처리
            console.log("name : " + name);
            console.log(name.length, name.substring(2));
            console.log("age : " + age);                
            }else{
                throw new Error("IllegalArgument Error"); // 예외처리
            }
        }
        paramFunc("유병승",19);
        // paramFunc(180.5,19);  // 선언된 매개변수의 타입이 정해지지 않았기 때문에 값이 넣어짐 (동적자료형이기 때문)
      	// 하지만 위와같이 예외처리를 한다면 값이 넣어지지 않음
      
      
      // 매개변수 선언시 기본값을 설정할 수 있다
        function defaultValueParamFunc(name="최솔",age=29,address="안양시",gender="여"){ 
            console.log(name,age,address,gender);  // 매개변수를 기본값으로 넣어줌
        }

        //defaultValueParamFunc("최주영",26,"안양시","여");
        
        // 기본값이 설정되지 않은 함수에 매개변수에 인자를 전달하지 않으면 undefined가 대입됨
        function paramFunc2(title, content){
            console.log(arguments)// 인자를 관리하는 객체 호출하기
            // arguments 객체를 활용해서 각 인수들의 접근과 총 길이를 구할 수 있다
            console.log(arguments[0]);  
            console.log(arguments[1]);
            console.log(arguments.length); 
            
            console.log(title, content);
        }

        // 함수에 매개변수가 선언되어 있는데 그 갯수만큼 인수를 넣지 않아도 함수 호출이 가능함
        defaultValueParamFunc("최인호",26); // 넣은것만 값을 대입하며, 나머지는 기본값으로 대체됨
        defaultValueParamFunc();  // 기본값인 [최솔, 29, 안양시, 여] 가 출력됨

        paramFunc2(); // undefined undefined

        // 함수에 선언된 매개변수보다 많은 값을 대입해도 호출이 가능함
        paramFunc2("월요일!","한 주의 시간이 즐겁네요!",1,2,3,4,5); // 함수 내부에 인자를 관리하는 객체를 제공 -> arguments 객체
      
    </script>


	<script>
        // 반환형이 있는 함수 선언하기
        // 로직내부에서 return 예약어를 사용하면 됨
        function returnFunc(){
            return "최주영 바보";
        }

        function returnFunc2(){  
            console.log("returnFunc 실행");
        }

        let returnVal = returnFunc();
        console.log(returnVal);  // 최주영 바보 출력

        returnVal2 = returnFunc2();
        console.log(returnVal2); // 반환형이 없으면 undefined 실행됨

        // 계산기 함수
        function calculator(su,su2,op){
            let result = 0;
            switch(op){
                case "+" : result = su+su2; break;
                case "-" : result = su-su2; break;
                case "*" : result = su*su2; break;
                case "/" : result = su/su2; break;
            }
            return result;
        }

        returnCal = calculator(10,20,"*");
        console.log(returnCal);  // 200 출력

        returnCal2 = calculator("10원",20,"*");  // NaN -> 매개변수중에 숫자가 아닌것이 있을 경우 나옴
        console.log(returnCal2);
    </script>

✅ 익명 함수 : function에 함수 명 작성하지 않고 변수에 대입하는 방법

• 함수를 선언할 때 함수명을 명시하지 않는 것

• function([매개변수,매개변수....]){로직[return 반환값]}

• 전역, 지역변수에 저장 -> 일반 함수 = 함수도 하나의 값으로 처리

    <script>
        // basicAnnoFunc(); 
        var basicAnnoFunc = function(){ 
            console.log("기본 익명함수"); // basicAnnoFunc 라는 변수는 함수가 들어있음
        }
        
        // 호이스팅으로 처리되서 동일함수 중 마지막에 있는 함수로 처리됨
        // function basicAnnoFunc(){
        //     console.log("기본 익명함수");
        // }
        console.log(basicAnnoFunc);  
        basicAnnoFunc();  // 변수가 함수가됨


        var basicAnnoFunc = function(){
            console.log("새로 만든 함수");
        }
        basicAnnoFunc();

        // 호이스팅으로 처리되서 동일함수 중 마지막에 있는 함수로 처리됨
        // function basicAnnoFunc(){
        //     console.log("새로 만든 함수");
        // }

        // 익명함수도 동일하게 default 값 넣을 수 있음 + arguments 객체 사용가능
        var paramAnnoFunc= function(name="조윤진", age=28){
            console.log(arguments);
            console.log(name,age);
            return name+"님 "+age+"짤";
        }
        returnVal3 = paramAnnoFunc("김현영",26);  
        paramAnnoFunc(); // 인수가 없으면 default값 출력    (조윤진, 28)출력
        paramAnnoFunc(1,2,3,4,5,6,7,8,9,10);  // 매개변수가 2개이기 때문에 1,2만 출력
        console.log(returnVal3);
    </script>	

• 매개변수에 저장 -> call back 함수 [주로 이벤트 처리할 때 사용]
  -> event 처리할 때 매개변수로 function을 전달
  -> javascript가 제공하는 객체의 함수를 이용할 때 매개변수로 function 전달

    <script>
        //li태그를 클릭했을 때 알림메시지 출력하기
        const lis = document.querySelectorAll("div#container>ul>li");
        console.log(lis);
        for(let i=0; i<lis.length; i++){
            lis[i].addEventListener("click",function(e){ // 클릭했을 때 익명함수 호출
                alert("클릭했다");  
            });
        }


        var strCheckFunc= function(str,ch,checkStr){
            let count = 0;
            for(let i=0; i<str.length; i++){
                if(checkStr(str.charAt(i),ch)){
                    count++;
                }   
            }
            return count;
        }

        returnVal4 = strCheckFunc("가가가가가가가가가나나나나나다다아마아나","가",function(str,str1){
            return str==str1;
        });
        console.log(returnVal4);  // 9

        var check = function(){return true};
        returnVal5 = strCheckFunc("가가가가가가가가가나나나나나다다아마아나","가",check);
        console.log(returnVal5);  // 20

        setTimeout(function(){ // 3초후에 해당 함수 실행
            alert("3초 지났다!");
        },3000);

        function testStr(str,str1){
            return false;
        }
        returnVal6 = strCheckFunc("application","a",testStr);
        console.log(returnVal6);  // 0
    </script>

✅ 화살표 함수

• (ES6)에서 추가되었으며, 익명함수를 더간단하게 표현하는 표현식

기본 방식 : ([매개변수,매개변수,...])=>{로직작성 [return 값]}

• (a,b)=>{a+b;} 랑 function(a,b){return a+b;} 와 동일
• a=>a.length; (매개변수가 하나 일 경우는 괄호 생략가능)
• 로직이 있는 경우 무조건 {}를 사용해야 한다.

    <script>

        
        var testArrow = ()=>{console.log("test");};
        testArrow(); // test 출력

        testArrow=(msg)=>console.log(msg+"님 이제 곧 점심시간");
        testArrow("최주영"); // 최주영님 이제 곧 점심시간 

        testArrow = str=>str.length;
        resultVal7 = testArrow("최인호 git 천재");
        console.log(resultVal7); // 10 

        testArrow = (str,ch)=>{if(str.includes(ch)){
            console.log("있다");
        }}
        testArrow("최주영 바보","바보");  // 있다

        document.querySelector("#testBtn").addEventListener("click",e=>{
            alert("버튼 클릭");
        });

        resultVal8 = strCheckFunc("banana","a",(str,str1)=>{return str==str1});
        console.log(resultVal8);

        // 화살표 함수는 arguments 객체를 지원하지 않는다
        var arguTest = ()=>{console.log(arguments);}; 
        // arguTest(1,2,3,4,5,6,7,8,9);
        
        // 화살표 함수에서 가변매개변수 처리하기
        arguTest = (...args)=>{console.log(args)}; // 1 2 3 4 5 6 7 8 9
        arguTest(1,2,3,4,5,6,7,8,9);  
        
        // 화살표함수의 this 값이 무조건 window를 참조한다. * 변경불가
        // function 함수는 this값이 함수에 따라 변경됨. 조정할 수 있음
        // document.querySelector("p").addEventListener("click",e=>{
        //     console.log(this); // 윈도우 함수 호출
        // });

        document.querySelector("p").addEventListener("click",function(e){
            console.log(this); // 윈도우 함수 호출
        });

        setTimeout(function(){
            console.log("익명함수",this);
        }, 1000);

        setTimeout(() => {
            console.log("화살표함수",this);
        }, 1000);
 </script>

• 함수도 하나의 값으로 리턴값으로 활용할 수 있다

    <script>
        const returnFunc3=()=>{
            const f = (msg) => console.log(msg);
            return f;
        }

        returnVal7 = returnFunc3(); // returnFunce3 리턴값 = 함수임
        console.log(returnVal7);  
        returnVal7("최주영 바");  // 반환받는 함수 호출
        returnFunc3()("보"); // 함수안에 화살표 함수 호출 
    </script>

✅ 클로저

• 함수내부에 선언된 변수(저장공간)을 삭제하지 않고, 활용하는 기술

    <script>
        const closureTest = (name)=>{
            // let name = "유병승";
            console.log(name);
            const f = (msg)=>{
                console.log(name+msg);
            };
            return f;
        }
        const returnClosure = closureTest("유병승");  // 유병승 출력   
        console.log(returnClosure);  // 함수 f 출력
        returnClosure("선생님");  //유병승선생님 출력 (함수 내부에 있었던 유병승이라는 변수가 삭제 X)

        const returnClosure2 = closureTest("최주영");  // 최주영 출력
        console.log(returnClosure2);  // 함수 f 출력
        returnClosure2("반장!"); // 

        const returnClosure3 = closureTest("최주영");  
        console.log(returnClosure3);
        returnClosure3((" 왕!"));
    </script>


    <button onclick="clickCheck()();">클릭하기</button>
    <script>
        //let count = 0;
        // clickCheck 함수는 애초에 함수를 리턴하기 때문에 그 함수를 자동실행하지 않으면 외부에 끝나기 때문에 
        // 자동으로 호출하기 위해 ()를 하나 더붙임
        const clickCheck = (()=>{  // 자동실행함수 시작부분
            let count = 0;
            return () =>{
                if(++count > 5){
                alert("5번만 클릭 가능");
               }
            } 
        })();  // 자동실행함수 (새로고침하지 않는 이상 클릭 안됨)
    </script>

	
	
    <script>
        const addFile=(()=>{  
            let count = 0;
            const $container = document.querySelector("div#filecontainer"); 
                return ()=>{
                if(++count < 5){
                    //추가하는 구문
                    $container.innerHTML+="input type='file name='upfile'>";
                }else{
                    //경고 구문
                    alert("첨부파일은 5개까지");
                }
            }
        })();
    </script>