함수

(Function)

하나의 로직을 재실행 할 수 있도록 하는 것으로, 코드의 재사용성을 높여주며 리팩토링에서 중요한 역할을 차지함

함수는 입력과 출력값으로 이루어져 있음

• 입력값 : 매개변수(Parameter) & 인자(Argument)

• 출력값 : 리턴(Return)

1. 함수의 기본

기본

function 함수명(){
    실행할 코드;
};
함수명();

함수를 이용한 반복

function 함수명(){
    실행할 코드;
};
출력할 코드1;
함수명();    //함수 반복1
출력할 코드2;
함수명();    //함수 반복2

예시)

2-1/2-2를 불연속적으로 반복시킬 때 함수를 활용한 예시

<h1>Function</h1>
    <h2>Basic</h2>
    <ul>
        <script>
            function two(){
                document.write('<li>2-1</li>');
                document.write('<li>2-2</li>');
            }
            document.write('<li>1</li>');
            two();
            document.write('<li>3</li>');
            two();
        </script>
    </ul>

2. 함수의 입력

매개변수(Parameter) & 인자(Argument)

function 함수명(parameter){
    실행할 코드(parameter);
}
함수명(argument);

함수의 입력	역할
매개변수	입력 값(인자)의 위치를 정의
인자	함수로 유입되는 입력 값

예시)

<h2>Parameter &amp; Argument</h2>
    <script>
        function onePlusOne(){
            document.write(1 + 1 + '<br>');
        }
        onePlusOne(); //2
        
        function sum(left, right){
            document.write(left + right + '<br>');
        }
        sum(2,3); //5
        sum(3,4); //7
        
        function sumColorRed(left, right){
            document.write('<div style="color:red">'+ left + right+'</div>');
        }
        sum(2,3); //5
        sumColorRed(2,3) //5? (왜 5가 아닌 23이 출력될까?)
        sum(3,4); //7
    </script>

3. 함수의 출력

리턴(return)

function 함수명([인자...[,인자]){
    코드
    return 반환값
};

예시)

<h2>Return</h2>
    <script>
        function sum2(left, right){
            return left+right;
        }
        document.write(sum2(2,3)+'<br>');
        document.write('<div style="color:red;">'+sum2(2,3)+'</div>');
        document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');
    </script>