JavaScript(5)

함수

수학의 함수와 비슷하며 호출을 통해서 사용함.

전달 값이 없는 상태로 호출하거나 어떤 값을 전달하여 호출.

함수 내에 작성된 연산 수행 후 반환 값/ 결과값은 있거나 없을 수 있음.

자바스크립트에서 function자료형.

<h1>함수란 무엇인가?</h1>

    <p>

        함수는 자판기 같은 것

        동전을 넣으면 어떤 작용을 한 후 음료를 주는 것처럼<br>

        전달값을 넣으면 연산을 한 다음 결과값을 도출한다.<br>

        (주의! 함수는 전달값이 있을수도 없을수도, 결과값이 있을수도 없을수도 있다)

    </p>

    <h2>함수를 왜 사용하는가?</h2>

    <h1 id="darkred">빨강색</h1>

    <h1 id="coral">주황색</h1>

    <h1 id="gold">노랑색</h1>

    <h1 id="olive">초록색</h1>

    <script>

        // document.getElementById('darkred').style.color = 'darkred';

        // document.getElementById('coral').style.color = 'coral';

        // document.getElementById('gold').style.color = 'gold';

        // document.getElementById('olive').style.color = 'olive';

        function changeColor(a){

            document.getElementById(a).style.backgroundColor = a;

        }

        changeColor('darkred');

        // let a = 'darkred;

        changeColor('coral');

        changeColor('gold');

        changeColor('olive');

    </script>

매개변수

호출하는 코드와 호출되는 함수를 연결해주는 변수.

지정된 배개변수보다 많이 선언하고 호출하는 것은 허용하나 초과되는 매개변수는 무시함.

지정된 매개변수보다 적게 선언하고 호출하는 것도 허용하지만 선언이 안된 매개변수는 undefined로 자동설정

매개변수가 있는 함수의 특징

• 선언한 매개변수보다 더 많이 작성하여 호출가능
• 선언한 매개변수보다 더 적게 작성가능, 작성되지 않은 매개변수는 undefined
• 함수 선언시 매개변수의 default값 설정 가능

reuturn

return 은 함수를 호출한 위치로 돌아가라는 의미로 return 값(되돌려 줄 값)미 지정시 undefined자료형으로 반환됨.

<h1>매개변수만 있는 함수</h1> 

    <script>

        function paramFunc(a){

            console.log(a);

        }

    </script>

    <h1>반환값만 있는 함수</h1>

    <script>

        function returnFunc(){

            return '반환값' + '출력';

        }

    </script>

    <h1>매개 변수와 반환값 모두 있는 함수</h1>

    <script>

        function paraRetunFunc(a,b,c){

            reuturn a+b+c

        }

    </script>

 

<h2>매개변수와 리턴</h2>

    <p>

        매개변수(파라미터) : 전달값. 함수를 선언했을 때 괄호 안에 있는 값.

        함수 연산시에 필요한 값(인자)들을 전달.<br>

        리턴 : 결과값. 함수의 연산으로 인해 도출되는 최종값.

    </p>

    <script>

        // 과일의 가격과 과일의 이름

        function paramFunc(fruit, price){

            if(typeof fruit === 'string'){

                console.log(fruit);

            } else{

                throw new Error('fruit는 string 자료형을 사용합니다');

            }

            if(typeof price === 'number'){

                console.log(price);

            }else{

                console.log(typeof price);

            }

        }

        paramFunc('수박',29000);

        //paramFunc(29000,'수박');

        // 선언한 매개변수보다 더 작게 인자를 보내도 함수를 호출가능.

        // 대신, 매개변수에 undefined가 대입됨.

        paramFunc('수박');

        //선언한 매개변수보다 더 많이 인자를 보내도 함수 호출 가능.

        // 더 많이 보낸 값은 버림.

        paramFunc('수박',19000,'박수');

        //매개변수에 기본값(default)을 설정할 수 있음.

        function paramDefaultFunc(str='체리',price=15000){

            console.log(str+' 한 박스에 '+price+'원~~');

        }

        paramDefaultFunc();

    </script>

함수선언

• 선언적 함수  - function키워드에 함수 명을 작성하여 사용
• 익명 함수 - function에 함수 명 작성하지 않고 변수에 대입
• 화살표 함수 - 익명함수를 더 간단하게 표현가능
• 즉시 실행 함수 - 호출없이 스스로 동작 가능

1.함수선언

<h1>함수 선언</h1>

    <p>

        선언적 함수 : function 키워드<br>

        익명 함수 : function  키워드X, 변수에 대입 <br>

        화살표 함수 : 익명처리를 더 간단하게!

    </p>

    <h2>선언적 함수</h2>

    <p>

        함수를 선언할때 함수명을 명시하는 것<br>

        function 함수명([매개변수,...]){로직 [return 반환값]}<br>

        일반적으로 페이지에서 사용하는 함수를 작성할때 많이 사용<br>

        window 객체에 저장되기 때문에 선언된 위치에 상관없이 호출가능<br>

        함수명이 중복되면 제일 마지막에 선언된 함수로 덮어쓰기!!

    </p>

    <script>

        positionTest();

        function positionTest(){

            console.log('뒤에 선언해도 앞에서 쓸 수 있나?');

        }

        function positionTest(){

            console.log('중복 선언?');

        }

    </script>

2. 익명함수

<h2>익명함수</h2>

    <p>

        선언적 함수의 한계(중복명칭)을 극복하기 위해 사용<br>

        함수를 변수에 대입하거나 매개변수로 대입해서 활용<br>

        -> 블록 스코프 변수의 장점을 익명 함수가 흡수!!

         <!--함수 스코프 : var // 블록 스코프 :let, const  -->

    </p>

    <script>

        let anonyFunc = function(){

            console.log('익명함수 쉽죠?');

        }

        anonyFunc();

    </script>

 

<h3>익명함수를 매개변수로 사용</h3>

    <script>

        setTimeout(function(){

            console.log('2초만 기다려주세용~');

        },2000);

    </script>

   

 

<h3>익명함수를 반환값으로 사용</h3>

    <script>

        const returnFunc = () =>{

            return (msg) =>{console.log(msg)};

        }

        returnFunc()('이게... 진짜 되나...?');

    </script>

3. 화살표 함수

<h2>화살표 함수</h2>

    <p>

        익명함수의 처리를 더 간단하게!!

    </p>

    <script>

        // 1. () =>{로직[return]}

        const arrowFunc1 = () =>{

            const date = new Date();

            const year = date.getFullYear();

            const month = date.getMonth()+1;

            const day = date.getDate();

            return year+'년' + month+'월' + day+'일';

        };

        console.log(arrowFunc1());

        // 2. (매개변수...)=>{로직[return]}

        const arrowFunc2 = (num1,num2,op) =>{

            let result = 0;

            switch(op){

                case '+' : result = num1+num2;break;

                case '-' : result = num1-num2;break;

                case '*' : result = num1*num2;break;

                case '/' : result = num1/num2;break;

                case '%' : result = num1%num2;break;

            }

            return result;

        }

        console.log(arrowFunc2(10,20,'+'));

        // 3. (매개변수...)=>반환값

        const arrowFunc3 = (str,s) => str.indexOf(s);

        console.log(arrowFunc3('apple','e'));

        // 4. 매개변수 => 반환값

        const arrowFunc4 = str => str.length;

        console.log(arrowFunc4('butterfly'));

    </script>

4. 즉시 실행함수

<h2>즉시 실행 함수</h2>

    <p>

        호출없이 바로 실행, 스스로 동작하는 함수<br>

        선언과 동시에 호출되는 함수<br>

        함수를 재사용하지 않을 경우에 사용

    </p>

    <script>

        let a = 2, b = 0;

        b = ++a;

        (function(){

            a = 2; b = 0;

        })();

        b = a++;

    </script>