return, 매개변수

1) return

• return : 함수를 통해 처리된 결과를 반환시켜주는 명령어
• 함수 안에서 return을 만나게 되면 해당 함수를 호출한 곳으로 결과 데이터를 반환해주고 함수는 종료됨
• 실행문을 강제 종료하는 역할을 수행하기도 함(≒ 반복문's break문)

return 함수를 쓰든・안쓰든 값은 출력이 되지만, return 함수를 쓰면 함수 외부에서도 결과값이 유효함
→ 함수 안에서 계산한 결과값을 return을 통해 함수 호출한 쪽으로 되돌려줌 (return 함수를 쓰지 않으면 그 결과값은 함수안에서 끝나고 종료됨)

function process() {
    var kor = 90;
    var eng = 90;
    var math = 90;
    var avg = (kor + eng + math) / 3;
    return avg;
}
console.log('홍길동 학생의 평균은 ' + process());    //홍길동 학생의 평균은 90

 

 

2) 매개변수

함수를 호출할 때 전달하는 변수

 

① 매개변수가 있는 함수의 형식

=====형식 1 _선언적 함수=====
function 함수명(매개변수1, 매개변수2, ...) {
    실행문;
}
함수명(매개변수1 값, 매개변수2 값, ...);

=====예시 1=====
function getAvg(s1, s2) {
    var agv = (s1 + s2) / 2;
    return avg;
}
console.log(getAvg(90, 80));    //85

=====형식 2 _익명 함수=====
var 변수명 = function(매개변수1, 매개변수2, ...) {
    실행문;
};
변수명(매개변수1 값, 매개변수2 값, ...);

=====예시 2=====
var getAvg = function(s1, s2) {
    var avg = (s1 + s2) /2;
    return avg;
};
console.log(getAvg(90, 80));    //85

=====형식 3 _익명 함수_즉시 실행 함수=====
(function(매개변수1, 매개변수2, ...) {
    실행문;
}
)(매개변수1 값, 매개변수2 값, ...);

=====예시 3=====
(function(s1, s2) {
    var avg = (s1 + s2) / 2;
    console.log(avg);    //85
}
)(90, 80);

 

② 매개변수의 개수가 정해지지 않은 함수

매개변수가 있는 함수 : 보통 매개변수 개수가 정해져 있음

→ BUT 매개변수의 개수를 정할 수 없는 함수를 만들어야하는 경우, arguments 객체를 사용하여 함수를 만듦

* arguments 객체 : 함수에 전달되는 매개변수 값을 저장해줌

function showSubject(){
    console.log(arguments[0] + ', ' + arguments[1]);    //html, css
    console.log(arguments.length);    //2
}
showSubject('html', 'css');

함수 안에서 arguments 객체를 사용하면 매개변수 값들을 배열(Array 객체)이라는 형태로 저장함

 

매개변수 값들은 arguments 객체에 다음과 같은 형태로 저장됨

arguments
[0]	[1]
'html'	'css'

function showSubject(){
    for (i = 0; i < arguments.length; i++) {    //arguments.length = 4
        console.log(arguments[i]);    //html css javascript jQuery
    }
}
showSubject{'html', 'css', 'javascript', 'jQuery');
/*arguments.length는 arguments에 저장되어있는 배열의 개수임*/

 

 

3) 화살표 함수(Arrow function)

• '=>'을 이용하여 함수를 간결하게 표현할 때 사용 (function 키워드를 생략하고 부등호 '='와 '>'을 합쳐 코딩)
• 항상 익명 함수 형식으로 표현함
• 단일 실행문(in 함수의 중괄호)일 경우, 함수의 중괄호{ }와 return을 생략할 수 있음

=====일반 함수 예시1=====
var doMultiplication = function(s1, s2) {
    return s1 * s2;
}
console.log(doMultiplication(2, 5));    //10

=====화살표 함수 형식1=====
/*단일 실행문; 함수의 중괄호({})와 return을 생략할 수 있음*/
var 변수명 = (매개변수1, 매개변수2) => 실행문1;
실행문;

=====화살표 함수 예시1=====
var doMultiplication = (s1, s2) => s1 * s2;
console.log(doMultiplication(2, 5));    //10

=====일반 함수 예시2=====
function doMultiplication(s1, s2) {
    var avg = (s1 + s2) / 2;
    return avg;
}
console.log(doMultiplication(2, 5));    //3.5

=====화살표 함수 형식2=====
var 변수이름 = (매개변수1, 매개변수2) => {
    실행문1
    실행문2
}
실행문;

=====화살표 함수 예시2=====
var doMultiplication = (s1, s2) => {
    var avg = (s1 + s2) / 2;
    return avg;
}
console.log(doMultiplication(2, 5));    //3.5

 

 

 

 

 

출처 : ⎡반응형 웹 실전 프로젝트 가이드 (김광수, 조혜경)⎦