power-girl0-0

함수 본문

언어/Javascript

함수

power-girl0-0 2021. 2. 4. 17:59
728x90

생활코딩 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743)

 함수 (Function) 

하나의 로직을 재실행할 수 있도록 하는 것으로, 코드의 재사용성을 높여준다.

 함수의 형식 

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

 함수의 정의와 호출 

예제를 통해 알아보도록 하자.

함수 호출을 할 때 ( ) 괄호를 안하면 변수로 처리하기 때문에 함수 호출시에는 함수이름뒤에 ( )괄호를 적어줘야 한다.

함수를 호출하면, 자바스크립트 해석기는 numbering이라는 함수의 이름을 찾아서 함수가 갖고 있는 내용을 실행해준다.

 

해당 함수를 여러 번 호출하면 어떻게 될까?

위와 같이, 코드가 재사용되어서 호출한 함수만큼 출력된 것을 확인할 수 있다.

 함수의 효용 

함수가 없다면, 코드가 길어지고 가독성이 떨어지게 된다.

또한, 값이 변경되면 하나하나 변경해야 되는 불편함이 있다.

 

그래서 사용하는 것이 " 함수 "이다.

함수 선언만 한번 해두고, 호출하기만 하면 되기 때문이다.

 

즉, 함수는 재 사용성이 높아지며 유지보수가 용이하고 가독성이 좋다는 장점을 갖고 있다.

따라서 함수가 제대로 만들어져 있지 않다면, 유지보수가 좋지 않다는 것으로 좋은 코드가 아닐 확률이 높다.

 함수의 입력과 출력 

함수에 들어온 입력값에 따라 다른 결과가 출력된다.

 출력 

출력을 하기 위해서 'return' 을 사용한다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>

        function get_hello(){
            return 'Hello';
        }
        
        function get_hi(){
            return 'Hi';
        }
        
        alert(get_hello());
        alert(get_hi());

    </script>
</body>
</html>

함수를 호출한 부분에 return 값을 돌려준다.

즉, get_hello() 함수를 호출한 곳에서는 'Hello' 문자열이 출력되고 get_hi()함수를 호출한 곳은 'Hi' 문자열이 출력된다.

 

만약, 아래와 같이 return이 여러개 선언되어 있다면 출력되는 값은 무엇일까?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>

        function get_hello(){
            return 'Hello';
            return 'Hello123';
            return 'Hello321';
            return 'Hel1213';
            return 'Hel859';
        }

        alert(get_hello());

    </script>
</body>
</html>

return해주면 함수가 종료되었기 때문에, Hello만 출력된다.

 입력 

입력을 하기 위해서 '인자' 를 사용한다.

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

 

아래 예제를 통해서 알아보자.

 

아래 예제의 결과는 1과 2가 순서대로 출력된다.

위 결과는 1, 2가 순서대로 출력된다.

 

위 소스코드 13줄에서 get_argument함수로 1이라는 값을 전달한다.

함수로 전달된 1은 변수 arg의 값으로, 함수 안에서만 유효하다.

이에 대한 관계는 아래 사진과 같다.

그림 출처 : 생활 코딩

아래 사진은 복수 인자를 표현한 것이다.

그냥 인자를 2개 넘겨줬다고 생각하면 된다.

그림 출처 : 생활 코딩

하지만, 값을 여러개 받아와도 return값은 한개만 가능하다.

 함수를 정의하는 다른 방법 

변수에 함수를 넣어준다.

즉, 아래와 같이 함수를 정의하면 이전 방법과 똑같이 호출할 때는 변수이름 뒤에 ()괄호를 붙여주면 된다.

 익명함수 

함수 선언과 호출은 동시에 하는 것으로, 일회성이다.

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

 

728x90
저작자표시

'언어 > Javascript' 카테고리의 다른 글

객체 (Object)  (0) 2021.02.04
배열  (0) 2021.02.04
반복문  (0) 2021.02.04
논리 연산자 & boolean의 대체제  (0) 2021.02.04
prompt & 조건문 활용 예제  (0) 2021.02.04
'언어/Javascript' Related Articles more
Comments