안녕하세요. 신기한 연구소입니다.
이번 포스팅은 함수 중첩에 대한 이야기입니다.
자바스크립트는 함수를 만들 때 함수 내 함수를 또 선언할 수 있습니다.
이를 함수를 중첩할 수 있다고 표현하는데요.
어떤 함수를 선언하고 그 내부에 다른 함수를 선언한다는 의미로 외부 함수, 내부 함수라는 용어를 사용합니다.
중첩된 함수
내부 함수는 외부 함수내 포함이 되며 외부 함수 내에서만 사용이 가능합니다.
즉 폐쇄된 함수인데 자바스크립트에서 클로저(closure)를 형성하는 구조입니다.
내부 함수는 외부 함수에서만 호출할 수 있습니다.
이 내부 함수는 외부 함수의 블록 범위의 변수와 결합해서 클로저(closure)를
형성할 수 있는데 클로저는 다시 자세히 포스팅하겠습니다.
쉽게 이해하자면 내부 함수가 자신을 포함(관리)하는 외부 함수의 인수나 변수를
물고 외부 함수의 수명이 끝났음에도 물고 있는 외부 함수의 변수를 내부 함수가
반환하지 않고 가지고 있으면서 폐쇄시킨다는 의미입니다.
중요한 것은 내부 함수는 자신을 품고 있는 외부 함수의 인수나 변수에
접근해서 사용할 수 있지만,
외부 함수는 내부 함수의 인수나 변수에 접근할 수 없다는 것입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
function outer(a){
var oa = 'out';
function inner(i) {
var ia = 'in';
return oa + "==" + i;
}
console.log(ia);
return inner(a);
}
console.log(outer('ok'));
|
cs |
이번 예제를 보면 외부 함수 outer와 내부 함수 inner를 선언하고 활용하는 것을 볼 수 있습니다.
하지만 이 예제는 오류가 납니다.
이유는 8번 라인이 문제입니다.
외부 함수 outer에서 내부 함수 inner의 변수인 ia를 사용했기 때문입니다. 내부 함수는 외부 함수의 변수인 oa를 사용할 수 있지만 외부 함수는 내부 함수의 변수에 접근할 수 없기에 8번 라인처럼 사용하면 오류가 발생하게 됩니다. 정의되지 않은 변수라는 오류가 발생하는데 외부 함수에서는 없는 변수를 사용했기 때문에 일어나게 됩니다.
그럼 내부 함수 내부에는 또 다른 함수를 만들 수 있을까요?
자바스크립트는 내부 함수 내에도 다시 함수를 정의할 수 있습니다. 중첩이 여러 번 되는 다중 중첩이 가능하다는 의미입니다. 하지만 너무 깊은 단계로 중첩이 이루어진다면 관리하기 불편할 수도 있답니다. 그래서 꼭 필요한 경우에만 이해하기 쉽도록 잘 정리해서 구현해야 하겠지요.
|
1
2
3
4
5
6
7
8
9
10
|
function stepOne(a){
function stepTwo(b){
function stepThree(c){
console.log( a + b + c);
}
stepThree(5);
}
stepTwo(3);
}
stepOne(2);
|
cs |
이 결과는 10이 나옵니다.
이렇게 함수 내부에 함수를 선언하고 또다시 그 내부에 함수를 선언할 수 있습니다.
이를 다중 중첩이라고 합니다.
주의할 점은 접근할 수 있는 범위(스코프, scope)입니다.
stepThree는 그 상위인 stepTwo, stepOne의 범위 내 모두 접근이 가능합니다.
이것을 체이닝 한다고 합니다. 체인처럼 연결된 고리를 따라서
위로 접근할 수 있다는 의미입니다.
하지만 stepOne은 stepTwo와 stepThree에 접근할 수 없습니다.
stepTwo는 stepOne은 접근 가능하지만 stepThree는 접근할 수 없습니다.
stepThree는 stepTwo와 stepThree를 폐쇄하게 됩니다.
즉 클로저를 형성한다는 의미입니다.
클로저라는 용어가 자주 나오는데
다음 포스팅에서 클로저에 대해 자세히 다뤄보겠습니다.
자바스크립트는 함수 언어라 해도 무방할 정도로
함수가 중요한 역할을 합니다.
일급객체이기도 한 함수는
자바스크립트로 프로그래밍하는데
정말 중요한 역할을 하기 때문에
다양한 기능과 특징을 잘 이해해서
실제 코딩 시 멋지게 사용하면 좋겠네요.
함수 이야기로 6탄을 만들었지만 아직도
함수에 대한 이야기는 남아있습니다.
모두 즐 코딩하세요.
'Software > JavaScript' 카테고리의 다른 글
| [자바스크립트]함수 이야기 8탄, 매개변수(parameters)와 인수(arguments) (0) | 2022.09.25 |
|---|---|
| [자바스크립트]함수 이야기 7탄, 클로저 사용하는 방법, 이해하기 편 (Closure) (0) | 2022.09.12 |
| [자바스크립트]함수 이야기 5탄 - 재귀 함수와 함수 스택 이해하기. (0) | 2022.08.22 |
| [자바스크립트]함수 이야기 4탄 - 함수 범위 스코프(scope) 이해하기. (0) | 2022.08.15 |
| [자바스크립트]함수 이야기 3탄 - 함수를 호출하는 방법 (0) | 2022.07.31 |
