[ JavaScript ] JS 함수,매개변수,인자,함수의 입출력

이미지 출처 :       https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

 

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅 입니다.

 

---

 

 

- 함수

함수(function)란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여줍니다.

 

함수의 형식은 아래와 같습니다.

 

 

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

 

 

함수는 function 뒤에 함수의 이름이 오고, 소괄호가 따라옵니다.

 

소괄호에 인자라는 값이 차례로 들어오는데,

이 값은 함수를 호출할 때 함수의 로직으로 전달될 변수입니다.

 

인자는 생략 가능합니다.

 

함수를 호출 했을 때 실행하게 될 부분이 중괄호 안쪽에 오게됩니다.

 

예시는 아래와 같습니다.

 <script type="text/javascript">
        function numbering(){
            i=0;
            while(i<10){
                document.write("<h1>");
                document.write(i+"\<br\>");
                i+=1;
            }
            
        }
        numbering();
        </script> 

 

 

위의 예제 제일 하단에 아래 구문에 의해서 numbering()이라는 이름의 함수가 호출되는 것입니다.

 

 

 

결괏값

 

 

 

 

- 함수가 없다면?

 

 

 

 <script>
    var i=0;
        while (i < 10){
            document.write(i);
            i+=1;

        }
        var i=0;
        while (i < 10){
            document.write(i);
            i+=1;

        }
        var i=0;
        while (i < 10){
            document.write(i);
            i+=1;

        }
        var i=0;
        while (i < 10){
            document.write(i);
            i+=1;
        }
        var i=0;
        while (i < 10){
            document.write(i);
            i+=1;

        }
    </script>

 

0번부터 9번까지 숫자를 출력하는것을 5번 반복해야한다면 위와같이,

같은 코드가 5번 반복하여 유지보수가 힘들기도하고 보기도 안좋습니다.

 

하지만 함수가 있응면 코드는 간결지고 유지보수가 쉬워집니다.

 

 

 

  <script>
        function number(){
         var i=0;
              while (i < 10){
                document.write(i+"<br />");
                    i+=1;
        }
    }
    for(var i=0; i < 5;i++){
            number();
        }
    </script>

 

 

함수를 활용하면 코드의 유지보수가 쉬워지고,

코드가 길어질 수록 관리가 편해지고 재사용성이 높아지기 때문에 사용합니다.

 

정리하자면, 함수를 사용하면 다음과 같은 이점을 얻을 수 있습니다.

 

 

- 재사용성

 

- 유지보수의 용이

 

- 가독성

 

 

- 함수의 출력(return)

 

 

함수의 핵심은 입력과 출력입니다.

입력된 값을 연산해서 출력하는 것이 함수의 기본적인 역할이기 때문이죠.

함수의 출력은 return 이라는 키워드를 통해 이뤄집니다.

 

 

 

 

function get_member1(){
    return '1';
}
 
function get_member2(){
    return '2';
}
 
console.log(get_member1());
console.log(get_member2());

 

 

위의 예제에서 함수는 return을 이용해 각각 1과 2를 출력합니다.

 

 

 

 

 

function get_member(){
    return '1';
    return '2';
    return '3';
}
console.log(get_member());

 

 

또한 위의 코드를 실행시키면 아래와 같이 출력됩니다.

 

 

 

 

 

 

결과는 1 입니다.

 

return 을 하고 나면 함수가 종료되기 때문에, 1을 출력하고 실행은 끝이 나게 됩니다.

 

자바스크립트에서 return 값은 1개만 올 수 있습니다.

 

 

 

 

 

 

- 함수의 입력

 

 

인자(argument)는 함수로 유입되는 입력 값을 의미합니다.

어떤 값을 인자로 전달하느냐에 따라서 함수가 반환하는 값이나 메소드의 동작방법을 다르게 할 수 있습니다. 

 

 

function get_argument(arg){
    return arg;
}
 
console.log(get_argument(1));
console.log(get_argument(2));

 

 

위의 예제의 실행 결과는 다음과 같습니다.

 

 

 

 

 

 

 

한번에 여러 개의 인자값을 받을 수도 있습니다.

 

 

 

function get_arguments(arg1, arg2){
    return arg1 + arg2
}
 
console.log(get_arguments(10, 20));
console.log(get_arguments(20, 30));

 

 

 

위의 코드를 실행시키면 아래와 같은 결과가 출력됩니다.

 

 

 

 

 

 

 

 

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

 

 

 

 

매개변수와 인자는 혼용해서 사용할 수도 있지만, 엄연히 다릅니다.

 

 

인자란, 함수를 호출할 때 넣는 값을 의미하며,

파라미터는 함수에서 그 인자를 받는 변수를 의미합니다.

 

 

 

 

 

 

위의 그림에서,

 

빨간색 사각형은 매개변수를,

파란색 사각형은 인자를 의미합니다.

 

 

 

- 함수를 정의하는 다른 방법

 

 

 

자바스크립트는 함수를 정의하는 또 다른 방법을 제공합니다.

 

 

var test = function (){
    i = 0;
    while(i < 10){
        console.log(i);
        i += 1;
    }   
}
test();

 

 

함수의 정의 부분이 test 라는 변수에 들어간 것입니다.

 

 

위의 예시는 아래의 코드와 동일한 의미를 가집니다.

 

 

 

 

function test(){
    i = 0;
    while(i < 10){
        console.log(i);
        i += 1;
    }   
}
test();

 

 

 

익명함수

 

익명함수란, 이름이 없고 1회성으로 사용하는 함수입니다.

함수의 내용 정의와 호출을 동시에 하는 함수입니다.

 

(function(){
    i = 0;
    while(i < 10){
        console.log(i);
        i += 1;
    }   
})();

 

 

 

 

 

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.