Javascript) function(2) 매개인자, 매개변수, arguments, 리턴값처리(undefined), 나머지 파라미터, 매개변수의 기본값 처리

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

매개인자, 매개변수

 

HTML 코드

<button onclick="test3();">매개인자 | 매개변수</button>

 

Javascript 코드

 

매개인자 (argument 값) - 함수 호출부

매개변수 (parameter 공간) - 함수 선언부

- 자바 스크립트 함수의 매개변수의 순서, 타입이 일치하지 않아도 오류가 발생하지 않음

const test3 = function() {
    console.log(add(3, 5));
    console.log(add(3));
    console.log(add(3, 5, 7));
    console.log(add('hello', 'world'));
}

const add = function(a, b) {
    console.log(`a = ${a}, b = ${b}`);
    return a + b;
}

add() 함수는 매개인자로 a, b를 받으며 각각 매개인자를 넘겨주었습니다.

 

add(3) → 매개인자로 '3' 하나를 넘겨주어도, b는 undefined 처리 되어 NaN 결과가 출력

add(3, 5, 7) → 매개인자로 '3', '5', 7' 받을 수 있는 매개변수보다 더 많이 넘겨주어도 7은 무시하고 3 + 5 = 8 출력

add('hello', 'world) → 매개인자로 'hello', 'world'를 넘겨주어 'hello'+'world' = 'helloworld' 출력

 

---

arguments

 

HTML 코드

<button onclick="test4();">argument</button>

 

Javascript 코드

 

숨은 참조 arguments를 통해서 호출 시 전달된 모든 인자에 접근 가능

- arguments는 모든 인자를 담은 유사 배열!

const test4 = function() {
    console.log(addAll(1, 2, 3));
    console.log(addAll(10, 20));
    console.log(addAll('hello', 'world', 'byebye', 'world'));
}
const addAll = function() {
    console.log(arguments);
}

전달된 모든 인자를 담은 유사배열 (prototype:object)이 리턴되는 것을 확인할 수 있습니다.

 

각 전달된 인자를 + 연산해보기

const test4 = function() {
    console.log(addAll(1, 2, 3));
    console.log(addAll(10, 20));
    console.log(addAll('hello', 'world', 'byebye', 'world'));
}
const addAll = function() {
    // console.log(arguments);
    let sum = 0;
    [...arguments].forEach(function(elem) {
        sum += elem;
    });
    return sum;
}

[...arguments]를 이용하여 유사배열을 배열로 변환하여 forEach()메소드를 통해 각 인자에 접근하여 + 연산을 하였습니다.

하지만 sum의 초기값을 0으로 세팅하였기 때문에 문자열이 넘어왔을 때는 0 + 'hello' = '0hello' 처리 (숫자 + 문자열은 숫자를 문자로 자동형변환 처리하여 연산작업) 하여 '0helloworld~'가 출력되었습니다.

 

삼항연산자를 통해서 숫자일 때는 0으로 초기값을 세팅, 문자일 때는 ''로 초기값을 세팅해보겠습니다.

const test4 = function() {
    console.log(addAll(1, 2, 3));
    console.log(addAll(10, 20));
    console.log(addAll('hello', 'world', 'byebye', 'world'));
}
const addAll = function() {
    // console.log(arguments);
    let sum = typeof arguments[0] === 'number' ? 0 : '';
    [...arguments].forEach(function(elem) {
        sum += elem;
    });
    return sum;
}

typeof로 넘어온 모든 인자 중 0번지(arguments[0])를 검사하여 'number'이면 0을 대입, 그렇지 않으면 ''를 대입하도록 하였습니다.

'hello' 앞에 0이 없어진 것을 확인할 수 있습니다.

 

---

리턴 값 처리

 

HTML 코드

<button onclick="test5();">리턴값처리</button>

 

Javascript 코드

 

모든 함수는 암묵적으로 undefined를 리턴

const test5 = function() {
    console.log(foo());
}
const foo = function(){};

foo() 함수에 리턴 값이 없지만 함수를 호출한 결과 undefined가 리턴된 것을 확인할 수 있습니다.

암묵적으로 undefinded를 리턴한다는 것을 알 수 있습니다.

 

foo() 함수에 console.log(123)을 입력하고 호출하니 123과 undefined가 같이 호출 됩니다.

 

const test5 = function() {
    console.log(foo());
}
const foo = function(){
    return 'foo함수';
};

명시적으로 리턴 값을 지정해주면 지정한 리턴 값이 리턴되는 것을 확인할 수 있습니다.

이로써 함수에는 return undefined; 가 암묵적으로 존재한다는 것을 알 수 있습니다.

 

---

나머지 파라미터 Rset Parameter (ES6)

- 모양은 전개연산자와 동일하지만, 사용 위치가 다름

(전개연산자는 배열 요소를 배치 시킬 때 사용 - 값으로써 사용)

- 매개변수 선언부에 사용 (공간으로써 사용)

- 전달된 인자를 하나의 배열에 모아서 처리

- 마지막에 한 번만 사용 가능

 

HTML 코드

<button onclick="test6();">나머지 파라미터</button>

 

Javscript 코드

 

[...파라미터]

const test6 = function() {
    info('홍길동', 33, '농구', '축구');
    info('신사임당', 33, '뜨개질', '칼질', '물수제비');
    info('세종대왕', 55);
};
const info = function(name, age, ...hobbies) {
    console.log(hobbies);
}

이름, 나이, 취미를 넘겨주는 함수를 생성하였을 때, 어떤 사람은 취미가 1개 이상일수도 그리고 취미가 없을 수도 있습니다.

넘겨 받아야하는 매개인자의 수가 다를 때를 대비하여 나머지 파라미터를 이용하여 인자를 받아줄 수도 있습니다.

전달된 인자들 중 나머지 인자들을 하나의 배열에 모아서 처리하므로 배열 형태로 넘어온 것을 확인할 수 있습니다.

단, 마지막에 단 한 번만 사용 가능하므로 유의!!

 

const test6 = function() {
    info('홍길동', 33, '농구', '축구');
    info('신사임당', 33, '뜨개질', '칼질', '물수제비');
    info('세종대왕', 55);
};
const info = function(name, age, ...hobbies) {
    // console.log(hobbies);
    console.log(`이름 : ${name}
나이 : ${age}
취미 : ${hobbies}`);
}

 

---

매개변수부의 기본 값 처리 (ES6)

- 해당 자리에 매개인자가 전달 되지 않았을 경우, 기본 값으로 처리

 

HTML 코드

<button onclick="test7();">매개변수의 기본값 처리</button>

 

Javascript 코드

const test7 = function() {
    sayName('신사임당');
    sayName();
}
const sayName = function(name = '홍길동') {
    console.log(`${name}님, 반갑습니다.`);
}

매개변수부에 매개변수 = 기본값을 입력해주어 값이 없을 때를 대비하여 기본 값을 설정해줄 수 있습니다.

 

만일 기본값 처리가 되지 않았을 경우, 값이 없을 땐 undefined로 처리됩니다.

const test7 = function() {
    sayName('신사임당');
    sayName();
}
const sayName = function(name) {
    console.log(`${name}님, 반갑습니다.`);
}