1008 TIL (인수와 매개변수)

오늘도 화이테에에에엥!!!!!!!
참조: 수코딩 자바스크립트 강좌 유튜브

함수를 조금 더 깊게 배워보는 시간을 가져보겠습니다.

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

위에 코드는 frintBanana라는 함수가 선언되어져있고, 이 함수를 printBanana();이렇게 호출하게 되면 콘솔창에 Banana라는 문자열이 출력되게 됩니다. 그런데 만약 여기서 Banana라는 문자열도 출력하고 싶지만 apple이라는 문자열도 출력하고 싶다면 어떻게 할 수 있을까요?

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

간단하게 위 처럼 코드를 하나 더 만드는 형태로 작성할 수 있습니다. 이렇게 코드를 작성하게 되면 printBanana라는 함수를 출력하게 되면 Banana라고 출력이 되고. printApple이라는 함수를 출력하게 되면 apple이라는 함수가 출력되게 됩니다. 내가 출력하고자 하는 과일이름의 함수를 적절하게 호출해주면 되겠죠?

그런데 이런 방법에는 치명적인 단점이 존재합니다. 그것은 바로 서로 다른 과일 이름을 출력하려 할 때마다 똑같은 형식을 가지고 있는 함수를 여러개 만들어줘야한다는 것인데요.
예를 들어 수 많은 과일 이름을 가진 함수들이 존재한다고 생각해 보십시오. 메론/망고/오렌지/딸기 등등...
서로 다른 과일이름을 출력하기 위해서 이렇게 같은 형식의 함수를 찍어내듯이 선언하는 건 유지보수나 성능적인 측면에서도 좋은 코드가 아니게 됩니다.
따라서 우리는 이럴 때 함수를 호출할 때 함수로 데이터를 전달해주는 형태로 함수를 사용함으로써 이러한 단점을 해결할 수 있습니다.

함수를 호출할 때 어떠한 데이터를 함수로 전달해줄 수가 있습니다.

function printFruit(name){
  console.log(name);
}
printFruit('banana'); //문자열 'banana'를 함수로 전달

function printFruit(name){
condores.log(name);
이 부분에서 임의의 변수 이름을 소괄호 안에다가 지어주게 되면
이 변수 이름으로 함수를 호출할 때 전달받은 데이터를 사용하겠다.
라는 의미가 되는겁니다. 따라서 printFruit 함수 내에 name이라는 변수 이름은 함수를 호출할 때 전달받은 값이 들어가게 되므로
이 코드에서는 banana가 출력이 되게 됩니다.

자 다시 코드로 돌아와서 아까 작성했던 코드를 간단하게 수정해보도록 하겠습니다.

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

아까처럼 그냥 호출하는 게 아니라 함수를 호출할 때 printFruit('banana'); 이렇게 데이터를 전달해 줍니다. 여기서는 printFruit라는 함수에 banana라는 문자열을 전달해 준건데요. 이렇게 함수를 호출할 때 전달하는 데이터는 함수를 선언하는 부분에 소괄호에서 변수에 이름을 지어주게 되면 함수를 호출할 때 전달했던 데이터가 소괄호 안에 있는 변수에 들어가게 됩니다.
따라서 이 들어가진 변수의 이름을 이 함수에 영역 중괄호 안에서 그대로 사용할 수 있게 되는 건데요. 이 banana라는 수동으로 적었던 문자열을 부분을 console.log(name); 이렇게 변수의 이름으로 대체를 하게 되면 그 후 우리가 이렇게 함수를 작성하게 되었을 때

function printFruit(name){ // 2. banana라는 값이 name에 들어감
  console.log(name); // 3. 최종적으로 결과는 'banana'가 나옴
}
printFruit('banana'); // 1. 이 함수를 호출하게 되면

banana가 잘 출력이 되는걸 볼 수 있습니다.

우리는 이렇게 함수를 작성함으로써 내가 만약 다른 과일을 출력하고 싶다라고 한다면

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

각각 banana와 apple이 출력되는 것을 볼 수 있습니다. 따라서 우리가 앞에서 보았던 것처럼 서로 다른 과일이름을 출력하기 위해서 똑같은 형식의 함수를 여러개 찍어내듯이 사용할 필요가 없어지게 된 겁니다. 굉장히 유용한 형태입니다.

여기서 추가적으로 알려드리면 데이터는 한 개만 넘겨줄 수 있는게 아니고, 넘겨주고 싶은 데이터의 갯수 만큼 (,)를 기준으로 해서 넘겨준다면 한 개 두 개 뿐만 아니라 개수 제한 없이 내가 원하는 개수만큼 함수를 선언하는 쪽으로 데이터를 전달해줄 수 있습니다.

function printFruit(name, price) {
  console.log(name+"는 "+ price +"원 입니다.");
}
printFruit('banana', 2000);

첫번째 banana라는 문자열을 소괄호 안에 있는 첫 번째 변수에 저장하게 되는 거구요, 콤마를 기준으로 두 번째 숫자에 해당하는 2000이라는 숫자는 소괄호 안에 price라는 변수에 저장이 되게 되는 겁니다. 따라서 이 코드를 실행해보면
'banana는 2000원 입니다.' 가 출력되게 됩니다.

그리고 이 함수에 전달하는 형태는 우리가 앞에서 배웠던 자바스크립트에서 사용할 수 있는 자료형은 모두 다 데이터로 전달할 수 있기때문에

function printFruitArr(arr) { // 매개변수
 console.log(arr[0]+"는 "+ arr[1] +"원 입니다."); 
}
printFruitArr(['banana', 2000]); // 인수

function printFruitObj(obj) { // 매개변수
 console.log(obj.name +"은 "+ obj.price +"원 입니다.");
}
printFruitObj({name:'apple', price:3000}); // 인수

위에 코드와 같이 배열로도 전달해도 되고, 객체로 전달해도 됩니다.
자바스크립트에서 사용할 수 있는 모든 자료형 형태를 이 함수쪽에 데이터로 전달해줄 수 있습니다.

함수를 호출할 때 데이터로 넘겨주는 부분을 인수 라고 부르고
함수를 선언하는 쪽에서 넘겨주는 인수를 받기 위해서 임의의 변수를 지어주는 부분을 매개변수 라고 합니다.

return문 잠깐

function sum(number1, number2){
  return number1 + number2;
}

const sum_result_1 = sum(10, 20); // 30 반환
const sum_result_2 = sum(20, 30); // 50 반환

const sum_result = sum_result_1 + sum_result_2; // 30 + 50 

console.log('총 합은 '+ sum_result + "입니다."); // 80

return문을 만들면 값을 다시 쓸 수 있게 반환하게 된다. 그래서 다른 변수에 넣을 수도 있고, 그 변수를 또 다른 변수에 또 넣을 수도 있게 된다.

하지만

function printReturn() {
  console.log('return 실행 전');
  return;
  console.log('return 실행 후');
}
printReturn();

return문을 값을 정해주지 않고 따로 쓰게 된다면, return문 뒤에 있는 코드가 몇 줄이던 실행되지 말아라 라는 뜻이 됩니다.