[Javascript] 함수의 인수와 매개변수 개념(함수 깊게 파악하기)

이전에 배웠던 함수를 조금 더 깊게 배워보자.

---

함수의 인수(argument)란?

함수의 인수(argument)란 
함수가 호출될 때 함수로 값을 전달해주는 변수를 가리킨다. 대부분의 함수는 하나 이상의 매개변수를 가지며, 매개변수가 없는 함수도 존재한다.

매개 변수(parameter) 란?

매개변수(parameter)란 
함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미한다.
인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 값을 말한다.

 

---

함수의 인수

예제)

먼저 예제를 입력해보자.
나는 banana를 출력하고 싶어 바나나를 썼다.

function apple(){
  console.log("banana");
}
apple();

이 때 여기서 apple도 출력하고 싶고 동시에 banana도 출력하고 싶다면?
 
여러 개의 데이터를 만들어서 출력하게 된다.
내가 출력하고 싶은 만큼 데이터를 입력할 수밖에 없다.
하지만 이 방법은 유지보수나 성능적인 측면에서도 좋은 코드는 아니다.

function apple(){
  console.log("banana");
}
apple();

function banana(){
  console.log("apple");
}
banana();

 
이럴 때는, 함수를 호출 할 때 함수로 데이터를 전달해주는 형태로 함수를 사용함으로써 단점을 해결할 수 있다. 
우리가 여태까지 배웠던 함수는 호출할 때 어떠한 데이터든 함수로 전달해줄 수가 있었다.
 
원리)

function apple(name){
	console.log(name);
}
apple('banana'); <=함수를 호출할 때 'banana'로 호출함

--------------------------------------------------------------------

이 부분에서(name)는 임의의 변수 이름을 소괄호에다 지어주게 되면
'banana'로 함수를 호출할 때 전달받은 데이터를 사용하겠다라는게 된다.

function apple(name){
	console.log(name);
}

 
 
자 그럼 간단하게 수정해보자.

function apple(name){
  console.log('banana');
}
apple('banana');

여기서 apple은 'banana'라는 문자열을 전달해준 것이다.
이렇게 함수를 호출할 때 전달한 데이터는 함수를 선언하는 부분에 소괄호에 변수에 이름을 지어주게 되면
함수를 호출할 때, 전달했던 이 데이터가 소괄호 안에 있는 변수에 들어가게된다.
 
따라서 출력하고 싶은 과일명이 많다면 이렇게 호출할 때 전달하는 데이터를 다르게만 변경하면 서로 다르게 출력 되는 것을 확인할 수 있다.

function apple(name){
  console.log(name);
}
apple('banana');
banana('apple');

 
아직 이해가 안된다면? 한글판으로 보자... 한글로 보면 바로 이해 가능할 것이다.

function 지얌이(개명하고싶은이름){
  console.log(개명하고싶은이름);
}
지얌이('손나은');
지얌이('김태희');

---

매개 변수

함수의 인수를 이용하여 매개변수를 만들어보자.

function apple(name, price){
	console.log(name + "는" + price + "원 입니다.");
}
apple('banana', 5000);
apple('엽기떡볶이', 14000);

첫번째 banana와 엽기떡볶이는 첫번째 (name) 소괄호 변수안에 저장이 되어있고
콤마를 기준으로 두번째는 (price)  소괄호 변수안에 저장이 되는것이다.
 

전달하는 방법) 배열 / 객체

 
배열 형태

function appleArr(arr) {
	console.log(arr[0] + "는" + arr[1] + "원 입니다.");
}
appleArr(['banana', 5000]);

-[0], [1]은 인덱스이다. 따라서 banana는 0번째에 있으므로 arr[0]이 되는 것이고, 5000은 1번째에 있으므로 arr[1]이 되는 것이다. 
 
객체 형태

function appleObj(obj){
  console.log(obj.name + "은" + obj.price + "원 입니다.");
}
appleObj({name: 'apple', price: 5000});

-함수내부에서 객체처럼 사용했다.
 
맨 마지막에 데이터를 넘겨줄 때 사용한 이 부분을 자바스크립트에서는 인수라고 부르고,
함수를 선언한 쪽에서 넘겨준 인수를 받기 위해서 임의의 변수 이름을 지어준 것을 매개변수라고 한다.

appleArr(['banana', 5000]);
appleObj({name: 'apple', price: 5000});

=> 함수의 인수

function appleArr(arr) 
function appleObj(obj)

=> appleArr(arr) 괄호 안 매개변수
=> appleObj(obj) 괄호 안 매개변수