본문 바로가기

프로그래밍 공부/JavaScript

JavaScript - 매개변수 / 리턴 값

함수를 사용하면서 함수를 호출할 때 괄호 안에 적는 것을 매개변수라고 한다. 흔히 사용했던 alert( )와 prompt( )도 함수이다. prompt ( ) 함수를 사용하면 사용자가 입력한 문자열 메시지를 문자열 자료형 값으로 변환하는데 이렇게 함수를 호출하고 함수가 변환되는 값을 '리턴 값'이라고 한다.

 

prompt( ) -> function prompt(message?: string, _default?: string): string에서 파란색 (message?: string, _default?: string)으로 쓰인 부분을 매개변수라고 하고 뒤에 빨간색 string으로 쓰여있는 부분을 리턴 값이라고 한다. 

 

alert( ) -> function alert(message?: any): void도 마찬가지다. 쉽게 정리하자면 매개변수는 괄호 안에 넣는 것을 뜻하고 리턴 값은 함수의 실행 결과로 나오는 것을 말한다.

 

Number(value?: any): number

String(value?: any): string

Boolean(value?: any): boolean

 

매개변수와 리턴 값을 리턴 값을 갖는 함수는 아래와 같은 방법으로 만들 수 있다. 다만 모든 함수에 매개변수와 리턴 값을 사용하는 건 아니고 필요한 경우에만 선택적으로 매개변수와 리턴 값을 사용한다.

function 함수이름 (매개변수, 매개변수, 매개변수){

        함수 코드;

        return 리턴 값;

    }

위와 같은 방식으로 아래와 같은 간단한 함수를 만들 수 있다. 매개변수 x를 넣으면 x제곱을 리턴하는 함수이다.

function f(x){

        return x*x;

    }

    let answer = f(3);

    alert(answer);

함수를 작동하면 f(3)이 들어갔으므로 9라는 값이 리턴 값으로 출력이 된다.

함수.html
0.00MB

함수를 사용하는 이유는 크게 4가지가 있다.

1. 코드의 입력 수가 줄어든다.

2. 오류가 있을 때 수정이 빠르다.

3. 가독성이 좋아진다.

4. 만든 코드를 후에 또 복사해서 이용할 수 있다.

 

return의 정의는 '함수를 호출했던 위치로 돌아가라' 라는 뜻이다.

function f(x){

        return x*x;

    }

    let output=f(5);

    alert(output);

출력되는 값는 25인데, 나오게 되는 것을 살펴보면 아래와 같다.

1. let output=f(5);에 5가 입력이 되면 f라는 함수를 호출하게 된다.

2. 따라서 맨 위에 function f(x)가 function f(5)로 바뀌게 되고 위에서부터 차례대로 실행이 된다.

3. 이후에 return 키워드를 만나게 되면 return 키워드 뒤의 x*x를 들고 계산이 된다.

4. 원래의 let output=f(5);로 돌아가 x*x, 그러니까 5*5의 값인 25가 들어가 let output=25;로 바뀌게 된다.

5. 맨 마지막의 alert(output);으로 아까 4번에서 output값이 25가 되었기 때문에 alert(25);로 화면에 출력이 된다.

 

function f(x){

        alert("a");

        return;

        alert("b");

    }

    let output=f(5);

    alert(output);

위의 코드를 실행하게 되면 앞서 설명했던 코드중 2번(2. 따라서 맨 위에 function f(x)가 function f(5)로 바뀌게 되고 위에서부터 차례대로 실행이 된다.)까지는 같지만 return;앞의 alert("a");가 먼저 실행이 되고 return;뒤에 alert("b");는 이미 return;이 나와버렸으므로 함수가 종료가되어서 alert("b")는 실행이 되지 않는다. 또한 return에 function f(x)에 대한 리턴 값이 없으므로 undefined 값이 출력이된다.

 

정리하자면 function은 return은 만나는 즉시 종료가 되고, 변수가 선언된 f(x)에 대한 return; 값이 정의가 되지않으면 그대로 undefined 값으로 반환이 되는 것이다.

function f(x){

        return;

        alert("a");

        alert("b");

    }

    let output=f(5);

    alert(output);


위의 코드도 마찬가지로 return; 에 아무런 계산 값이 들어가지 않았기 때문에 output은 undefined로 나오게 되고 return; 이후의 alert("a"); alert("b");는 이미 return;으로 인해 함수가 작동을 멈췄으므로 alert로 경고창이 나오지 않는다

리턴 값.html
0.00MB