JavaScript의 외부 함수와 내부 함수 매개변수

외부 함수와 내부 함수 모두 매개변수를 받도록 해봅시다:

javascriptfunction test(num) {
  function func(localNum) {
    console.log(localNum);
  }
}

외부 함수의 매개변수를 내부 함수 호출에 전달해 봅시다:

javascriptfunction test(num) {
  function func(localNum) {
    console.log(localNum); // 1을 출력합니다
  }
  
  func(num); //!! 매개변수를 전달합니다
}

test(1); // 숫자를 매개변수로 전달합니다

결과적으로 내부 함수에서는 부모 함수의 외부 변수인 num과 내부 함수의 로컬 변수인 localNum에 접근할 수 있습니다.

이 두 변수는 동일한 값을 갖게 됩니다:

javascriptfunction test(num) {
  function func(localNum) {
    console.log(num); // 1을 출력합니다
    console.log(localNum); // 1을 출력합니다
  }
  
  func(num);
}

test(1);

이 둘의 차이점은 다음과 같습니다: 내부 함수에서 변수 num을 변경하면 외부 함수에서도 변경됩니다:

javascriptfunction test(num) {
  function func(localNum) {
    num = 2; // 변수 num을 변경합니다
  }
  
  func(num);   // 매개변수를 전달합니다
  console.log(num);  // 2를 출력합니다
}

test(1); // 숫자를 매개변수로 전달합니다

반면 변수 localNum는 로컬 변수입니다. 이 변수의 변경은 외부 함수에 아무런 영향을 미치지 않습니다. 게다가 localNum 변수 자체도 내부 함수 외부에서는 보이지 않습니다:

javascriptfunction test(num) {
  function func(localNum) {
    localNum = 2; // 변수 num을 변경합니다
  }
  
  func(num); // 매개변수를 전달합니다
}

test(1); // 숫자를 매개변수로 전달합니다

javascriptfunction test(num) {
  function func(localNum) {
    console.log(localNum);
  }
  
  func(num);
}

test(1);

javascriptfunction test(num) {
  function func(localNum) {
    console.log(localNum);
  }
  
  func(num + 1);
}

test(1);

javascriptfunction test(num) {
  function func(localNum) {
    console.log(num);
  }
  
  func(num + 1);
}

test(1);

javascriptfunction test(num) {
  function func(localNum) {
    localNum = 2;
  }
  
  func(num);
  console.log(num);
}

test(1);

javascriptfunction test(num) {
  function func(localNum) {
    localNum = 2;
  }
  
  func(num);
  console.log(localNum);
}

test(1);

javascriptfunction test(num) {
  function func(localNum) {
    num = 2;
  }
  
  func(num);
  console.log(num);
}

test(1);