[ES6] 21. funtion과 파라미터 return 연관성

[ES6] 21. funtion과 파라미터 return 연관성
 
배열 안에 객체 안에 함수를 사용하여 `return`하는데, 이번에는 파라미터와 함수의 연관성으로 연결된 예시 코드를 보여드리겠습니다.

아래 예시 코드에서는 `Product`라는 생성자 함수를 사용하여 객체를 만들고, `getTotalPrice` 함수를 속성으로 가지고 있습니다. `getTotalPrice` 함수는 `count`라는 파라미터를 받아서 해당 `Product` 객체의 `price`와 파라미터 `count`를 곱한 값을 리턴합니다.

function Product(name, price) {
  this.name = name;
  this.price = price;
  this.getTotalPrice = function (count) {
    return this.price * count;
  };
}

const product1 = new Product("Macbook Pro", 2000);
const product2 = new Product("iPad", 500);

document.write(`Total price of 3 ${product1.name}: $${product1.getTotalPrice(3)}<br>`); // Total price of 3 Macbook Pro: $6000
document.write(`Total price of 5 ${product2.name}: $${product2.getTotalPrice(5)}<br>`); // Total price of 5 iPad: $2500

document.write(`Total price of 2 ${product1.name}: $${product1.getTotalPrice(2)}<br>`); // Total price of 2 Macbook Pro: $4000
document.write(`Total price of 4 ${product2.name}: $${product2.getTotalPrice(4)}<br>`); // Total price of 4 iPad: $2000

 

위의 예시에서는 `getTotalPrice` 함수가 파라미터 `count`를 받아서 계산을 수행합니다. `getTotalPrice` 함수는 `Product` 객체의 `price`와 파라미터 `count`를 곱하여 `return`합니다.

`product1.getTotalPrice(3)`과 `product2.getTotalPrice(5)`를 호출하면, 각각 `"Total price of 3 Macbook Pro: $6000"`과 `"Total price of 5 iPad: $2500"`이 출력됩니다.

즉, 객체 안에 `function(파라미터)`를 사용하여 `return`하는 예제를 보면, 해당 객체를 사용하여 여러 가지 작업을 수행할 수 있고, `function(파라미터)`를 사용하여 필요한 값을 받아와서 처리할 수 있습니다. 위의 예시에서는 `Product` 객체의 `getTotalPrice` 함수에서 파라미터 `count`와 `Product` 객체의 `price`를 연관시켜서 계산을 수행하도록 했습니다.

 

myfuntion(),

${result}                ,호출 두개는 호출에 쓰인다.

${ myfuntion() }

 
 
함수(Function)은 JavaScript 코드를 여러 차례 사용할 때 코드 중복을 줄이는 방법입니다. 함수를 사용하면 자주 사용되는 코드를 함수로 선언하여 재사용이 가능합니다. 

예를 들어, 다음과 같이 함수를 작성할 수 있습니다. 

```
function sum(num1, num2) {
  return num1 + num2;
}
```

위 함수는 두 개의 인수(num1, num2)를 받아들이고, 두 개의 인수를 더한 값을 반환합니다(return). 

이제 이 함수를 호출하여 사용할 수 있습니다. 다음과 같이 sum 함수를 호출하고 변수에 할당하여 값을 저장할 수 있습니다. 

```
let result = sum(4, 6);
console.log(result);  // 10 출력 
```

위 코드에서, sum 함수를 호출하고 인수로 4와 6을 전달합니다. sum 함수가 실행되고, 두 개의 인수를 더한 값을 반환합니다. 이 반환된 값을 변수 result에 저장하고(console.log(result)) 출력하여 결과가 10이라는 것을 확인할 수 있습니다. 

함수는 하우스 규칙과 비슷합니다. 함수 내에서 선언되는 변수는 이 함수 안에서만 유효합니다. 함수가 반환한 값에 접근하려면 반환문(return)을 사용해야 합니다. 반환하지 않은 함수는 undefined를 반환합니다. 

함수를 호출할 때 인수를 전달하지 않으면, 함수는 undefined를 반환합니다. 

예를 들어, 다음은 함수를 호출하지 않는 예입니다.

```
function withoutArgs() {
  console.log("No arguments passed");
}

withoutArgs();  // "No arguments passed" 출력
```

위 함수를 호출하면 인수가 없으므로, 함수 내에서 "No arguments passed"가 출력됩니다. 

이러한 방법으로 함수, 반환문(return), 변수, 함수 호출 등을 사용하여 자바스크립트 코드를 작성할 수 있습니다.  
 

---

funtion 변수 {

return "안"
}

return "밖"

의 개념 
 
중 
funtion은  변수로 보내는 매개체이고,
변수는 funtion의 return을 받는 매개체이다.
 

// 함수 내부에서 변수를 선언한 경우
function myFunction1() {
  var inside = "안";
  return inside;
}

console.log(myFunction1()); // 출력 결과: "안"
console.log(inside); // 출력 결과: Uncaught ReferenceError: inside is not defined

// 함수 외부에서 변수를 선언한 경우
var outside = "밖";

function myFunction2() {
  return outside;
}

console.log(myFunction2()); // 출력 결과: "밖"
console.log(outside); // 출력 결과: "밖"

위 코드에서 `myFunction1` 함수 내부에서 `inside` 변수를 선언하고, `myFunction2` 함수 외부에서 `outside` 변수를 선언했습니다. `myFunction1` 함수를 호출하면 `inside` 변수의 값인 "안"이 반환됩니다. 하지만 `inside` 변수는 함수 내부에서만 유효하기 때문에, 함수 외부에서 `inside` 변수를 사용하려고 하면 `Uncaught ReferenceError`가 발생합니다.

반면에 `myFunction2` 함수를 호출하면 `outside` 변수의 값인 "밖"이 반환됩니다. `outside` 변수는 함수 외부에서 선언되었기 때문에, 함수 내부에서도 사용할 수 있습니다. 따라서 함수 외부에서 `outside` 변수를 출력하면 "밖"이 출력됩니다.
 

---

funtion의 팥과 붕어빵 틀의 이해도  (1),

// 함수를 팥과 붕어빵으로 비유한 예시
function makeBun(paste) {
  var bun = "붕어빵";
  return bun + "에 " + paste + "을 넣었습니다.";
}

var result = makeBun("팥");
console.log(result); // 출력 결과: "붕어빵에 팥을 넣었습니다."

result = makeBun("크림");
console.log(result); // 출력 결과: "붕어빵에 크림을 넣었습니다."

위 코드에서 `makeBun` 함수는 `paste`라는 입력값을 받아서, "붕어빵에 [입력값]을 넣었습니다."라는 문자열을 반환합니다. 함수를 호출할 때 입력값으로 "팥"이나 "크림" 등을 전달하면, 해당 문자열이 출력됩니다. 이렇게 함수는 입력값을 받아서 출력값을 반환하는 기능을 수행합니다.

예시 코드에서 `result` 변수는 `makeBun` 함수의 결과값, 즉 붕어빵에 해당합니다. `makeBun("팥")` 함수 호출 결과인 "붕어빵에 팥을 넣었습니다."가 `result` 변수에 저장되어 출력됩니다. 이후 `makeBun("크림")` 함수를 호출하면, "붕어빵에 크림을 넣었습니다."가 출력됩니다. 이렇게 함수를 사용하여 입력값을 처리하고 결과값을 반환하는 것이 함수의 기본적인 역할입니다.
 

funtion의 팥과 붕어빵 틀의 이해도  (2),

funtion을 팥과 붕어빵으로 비유하면, 팥은 입력값으로 들어오는 데이터를 관리하고 처리하는 역할을 하며, 붕어빵은 함수에서 처리된 결과값을 나타냅니다. 팥은 함수 내에 작성된 코드에서 입력값을 받아서 처리를 하고, 처리가 완료된 결과값을 붕어빵에 담아서 돌려줍니다.
예를 들어서, 다음과 같이 add 함수를 구현한다면,
function add(a, b) { 
  return a + b;
}
여기서 a와 b는 팥의 역할을 하고, return 값인 a + b는 붕어빵의 역할을 합니다. 이제 이 함수를 사용하여 다음과 같이 값을 구할 수 있습니다.
var result = add(3, 5);
console.log(result); // 8
이 코드에서 3과 5는 add 함수에 넘겨지는 입력값입니다. 그리고 result는 add 함수의 결과값, 즉 붕어빵입니다. 이 코드를 실행하면, 콘솔에는 8이 출력됩니다. 이렇게 함수를 사용해서 입력값을 처리하고 결과값을 돌려주는 과정이 팥과 붕어빵으로 비유할 수 있습니다.

매개변수로 사용자 입력값을 받아서 계산을 시킬 도구         = funtion 정보를 담아서 매개변수 값을 받아서 화면에 출력시킬 도구 = 변수