안녕하세요. Tay 입니다.
함수의 내부에서 함수를 정의하는 것이 가능합니다. 그것을 내부함수 라고 합니다.
내부 함수(inner function)
함수 내부에 정의된 함수
1) index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!-- <script src="function.js"></script> -->
<!-- <script src="hoisting.js"></script> -->
<!-- <script src="arrow.js"></script> -->
<!-- <script src="use-function.js"></script> -->
<!-- <script src="callback.js"></script> -->
<script src="inner.js"></script>
</body>
</html>
2) inner.js
function grand() {
var a = 20;
var b = 300;
var c = 5000;
function parent() {
var a = 100;
var b = 400;
function child() {
var b = 200;
console.log(a);
console.log(b);
console.log(c);
}
child();
}
parent();
}
grand();
child();grand 함수 안에 parent 함수 안에 child 함수를 선언했다.
결과 :
- grand 함수를 정의한다. (1)
- grand 의 내부함수 parent 정의한다. (2)
- parent 의 내부함수 child 가 정의된다. (3)
- 외부에서 grand 를 실행한다. (100, 200, 5000 출력)
- 외부에서 child 를 실행한다. (에러 발생)
위 내용을 함수 스코프와 함께 확인해보자.
함수 스코프
함수의 범위 라고 생각할 수 있다.
그림 실력보다, 내용에 집중하자.
- 각각의 박스가 각 함수의 스코프이다. 즉, 해당 함수의 범위를 나타낸다.
- 기본적으로 함수 스코프 밖에서는 함수 스코프 안에 선언된 모든 변수나 함수에 접근이 불가하다.
- 내부 함수는 자신을 둘러싼 외부 함수의 변수나 함수에 접근이 가능하다.
자, 그럼 외부에서 내부 함수를 호출하는 것은 불가능할까? 한번 확인해보자.
외부에서 내부 함수 호출하기
내부 함수를 리턴하기
- inner.js
function grand() {
var a = 20;
var b = 300;
var c = 5000;
function parent() {
var a = 100;
var b = 400;
function child() {
var b = 200;
console.log(a);
console.log(b);
console.log(c);
}
//child();
return child;
}
//parent();
return parent;
}
// grand();
// child();
var parent = grand();
console.log(parent);
var child = parent();
console.log(child);
child();각각의 함수를 호출하고, 결과로 return 된 inner 함수를 호출하는 예제이다.
위 함수의 구조
- grand 함수 안에 parent 내부 함수가 있다.
- parent 함수 안에 child 내부 함수가 있다.
- child 함수는 console log 를 수행한다.
- parent 함수는 child 내부 함수를 return 한다.
- grand 함수는 parent 내부 함수를 return 한다.
위 코드의 구조
- grand 함수를 실행하고, 리턴 값 parent 함수를 parent 함수 변수에 할당한다.
- parent 함수 변수 로그 출력
- parent 함수를 실행하고, 리턴 값 child 함수를 child 함수 변수에 할당한다.
- child 함수 변수 로그 출력
- child 내부 함수를 실행한다.
결과는 어떻게 출력 될까?
결과 :
로그 1번에 parent 함수가 출력되고, 로그 2번에 child 함수가 출력됐다.
마지막으로 child( ); 가 수행됐다.
즉, 외부 함수변수에 내부 함수 변수값을 리턴하면, 외부 함수변수는 내부 함수를 참조한다.
이 글은 개인 공부목적으로 작성되었습니다.
정보가 잘못 되거나 궁금한 사항은 댓글로 부탁드립니다!! 읽어주셔서 감사합니다.
'JavaScript > Basic-Javascript' 카테고리의 다른 글
| 자바스크립트 정리하며 배우기[22] - This[1] : 함수와 this, this 의 개념, this 와 that (0) | 2020.02.25 |
|---|---|
| 자바스크립트 정리하며 배우기[21] - Arguments : 유동적인 함수 만들기 (0) | 2020.02.20 |
| 자바스크립트 정리하며 배우기[19] - 콜백 함수(callback) (0) | 2020.02.03 |
| 자바스크립트 정리하며 배우기[18] - 함수의 프로토타입(prototype property)과 constructor (0) | 2020.01.31 |
| 자바스크립트 정리하며 배우기[17] - 일급객체 함수 활용 방법 (0) | 2020.01.28 |
