🦎 JavaScript

[JS] 중첩 함수(Nested Function)

하나둘세현 2023. 2. 13. 17:34
728x90

function fruitProcessor(apples, oranges) {
  console.log(apples, oranges);
  const juice = `juice with ${apples} apples and ${oranges} oranges.`;
  return juice;
}

일정한 개수의 사과와 오렌지를 받아 그걸 바탕으로 주스를 생성하고 값을 반환했다. 


중첩 함수

함수안에서 다른 함수 호출해보기


그러나 이번에는 frunitProcessor를 통해 작은 과일 조각만으로 주스를 만들 수 있는 시나리오로 해보겠다.

function cutFruitPieces(fruit) {
  return fruit * 4;
}

과일주스를 만들기 전 다른 기계가 필요하다.

 

1. function cutFruitPieces(fruit) {

과일을 여러 기능으로 자르는 기능을 function cutFruitPieces라고 하겠다. 

이 함수는 과일을 받을 것이다. 
2. return fruit * 4;

그 다음 자른 과일을 네 조각으로 돌려놓을 것이다. 그래서 *4를 하였다.
}

이제 과일을 조각내는 기계를 만들었다.

 

function cutFruitPieces(fruit) {
  return fruit * 4;
}

function fruitProcessor(apples, oranges) {
  const applePieces = cutFruitPieces(apples);

  console.log(apples, oranges);
  //밑에 문자열은 아직 수정안함
  //const juice = `juice with ${apples} apples and ${oranges} oranges.`;
  //return juice;
}

그리고 frunitProcessor에서 사과와 오렌지를 받으면 새로 만든 기계로 받은 사과와 오렌지를 조각으로 자른다.

 

1. function fruitProcessor(apples, oranges) {

frunitProcessord에서 사과와 오렌지를 받으면 새로 만든 기계로 받은 사과와 오렌지를 두조각으로 자른다. 
 2. cutFruitPieces(apples); →  const applePieces = cutFruitPieces(apples);

사과가 몇개 들어왔는지 확인을 한다. 그리고 cutFruitPieces 함수를 applePieces라는 변수로 저장한다.

오렌지 역시 위의 코드와 똑같이 작성해준다. 

 

function cutFruitPieces(fruit) {
  return fruit * 4;
}

function fruitProcessor(apples, oranges) {
  const applePieces = cutFruitPieces(apples);
  const orangesPieces = cutFruitPieces(oranges);

  console.log(apples, oranges);
  //밑에 문자열은 아직 수정안함
  //const juice = `juice with ${apples} apples and ${oranges} oranges.`;
  //return juice;
}

  const applePieces = cutFruitPieces(apples);
  const orangesPieces = cutFruitPieces(oranges); 

이 두 코드를 보면 처음으로 함수 안의 함수를 다른 함수 안의 함수로 호출했다. 

 

function cutFruitPieces(fruit) {
  return fruit * 4;
}

function fruitProcessor(apples, oranges) {
  const applePieces = cutFruitPieces(apples);
  const orangesPieces = cutFruitPieces(oranges);

  console.log(apples, oranges);
  //밑에 문자열은 아직 수정안함
  //const juice = `juice with ${apples} apples and ${oranges} oranges.`;
  //return juice;
}

fruitProcessor(2, 3);

fruitProcessor(2, 3);

furitProcess를 2와 3으로 호출하면 function cutFruitPieces(fruit) ← 여기 부분(첫번째 줄) 함수가 호출될것이다. 

그럼 이제 cutFruitPieces 함수가   

const applePieces = cutFruitPieces(apples); ← 여기서 1번
 const orangesPieces = cutFruitPieces(oranges); ← 여기서 2번

총 2번 호출이 된다. 

 

이제 이 주스를 문자열에 있는 apples과 oranges를 바꿔야한다. 

function cutFruitPieces(fruit) {
  return fruit * 4;
}

function fruitProcessor(apples, oranges) {
  const applePieces = cutFruitPieces(apples);
  const orangesPieces = cutFruitPieces(oranges);

  console.log(apples, oranges);
  const juice = `juice with ${applePieces} picee of apple and ${orangesPieces} picee of orange.`;
  return juice;
}

fruitProcessor(2, 3);

applePieces와 orangesPieces의 값을 받고 싶음으로 문자열을 수정했다. 

const juice = `juice with ${applePieces} picee of apple and ${orangesPieces} picee of orange.`;

↑ 수정했다. 

function cutFruitPieces(fruit) {
  return fruit * 4;
}

function fruitProcessor(apples, oranges) {
  const applePieces = cutFruitPieces(apples);
  const orangesPieces = cutFruitPieces(oranges);

  console.log(apples, oranges);
  const juice = `juice with ${applePieces} picee of apple and ${orangesPieces} picee of orange.`;
  return juice;
}

console.log(fruitProcessor(2, 3));

큰솔에 문자열이 출력된다. 결과가 함수에서 반환되어 문자열이 작동하는 것이다. 

728x90