함수를 사용하면서 함수를 호출할 때 괄호 안에 적는 것을 매개변수라고 한다. 흔히 사용했던 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라는 값이 리턴 값으로 출력이 된다.
함수를 사용하는 이유는 크게 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로 경고창이 나오지 않는다
'프로그래밍 공부 > JavaScript' 카테고리의 다른 글
JavaScript - 콜백 함수 (0) | 2019.12.03 |
---|---|
JavaScript - 내부 함수 (0) | 2019.12.02 |
JavaScript - 익명 함수 / 선언적 함수 (0) | 2019.12.02 |
JavaScript - while 반복문 / for 반복문으로 구구단 출력 (0) | 2019.12.02 |
JavaScript - for 반복문 / while 반복문을 이용한 별찍기 (0) | 2019.11.30 |