Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- 모던자바스크립트
- 모두의 파이썬
- ReactDOM.render is no longer supported in React 18. Use createRoot instead
- 인프런
- 노드에 리액트 추가하기
- 리액트
- 자바스크립트
- react오류
- DB Browser
- Concurrently
- spring-boot
- props
- 따라하며 배우는 노드 리액트 기본 강의
- JS 개념
- 타자 게임 만들기
- intllij 내 Bean을 찾지 못해서 발생하는 오류
- googleColaboratory
- 웹 게임을 만들며 배우는 리액트
- react
- 거북이 대포 게임
- 계산맞추기 게임
- You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"
- Colaboratory 글자 깨짐
- node.js로 로그인하기
- Python
- node.js 설치
- vs code 내 node
- Spring-Framework
- Do it 자바스크립트 + 제이쿼리 입문
- intellij
Archives
- Today
- Total
프로그래밍 삽질 중
[JS - node.js] 클로저(closer)란? 본문
* 초보자를 위한 Node.js 200제 - 김경록, 정지현 지음 중급 내용(이하 노드 200제) 참고
* mozilla 참고(https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures)
클로저(closer) 개념
- 노드 200제 : 내부 함수가 참조하는 외부함수의 지역변수가 외부함수가 리턴된 이후에도 유효성이 유지될 때,
이 내부함수를 클로저라고 한다, 클로저는 외부함수 변수의 값이 아닌 참조를 저장하는 식
- mozilla : 함수와 함수가 선언된 어휘적 환경의 조합
자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성하기 때문이다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.
[예시 - 노드 200제]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function grandParent(g1, g2) { //함수 실행 시 순차적으로 리턴됨
const g3 = 3;
return function parent(p1, p2) {
const p3 = 33;
return function child(c1, c2) {
const c3 = 333;
return g1 + g2 + g3 + p1 + p2 + p3 + c1 + c2 + c3;
};
};
}
const parentFunction = grandParent(1, 2);
const childFunction = parentFunction(11, 22);
console.log(childFunction(111, 222)); //1 + 2 + 3 + 11 + 22 + 33 + 111 + 222 + 333 === 738
|
cs |
[예시 - mozilla]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
//예1
function makeFunc() {
var name = "Mozilla";
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
//myFunc변수에 displayName을 리턴함
//유효범위의 어휘적 환경을 유지
myFunc();
//리턴된 displayName 함수를 실행(name 변수에 접근)
//예2
function makeAdder(x) {
var y = 1;
return function(z) {
y = 100;
return x + y + z;
};
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
//클로저에 x와 y의 환경이 저장됨
console.log(add5(2)); // 107 (x:5 + y:100 + z:2)
console.log(add10(2)); // 112 (x:10 + y:100 + z:2)
//함수 실행 시 클로저에 저장된 x, y값에 접근하여 값을 계산
|
cs |
[예시 복습] - /**/부분은 결과
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
function sky(question) {
var weather1 = 'rain';
return function sky2(question2) {
var weather2 = 'sunny';
return function sky3(question3) {
var weather3 = 'windy';
return question + " : " + weather1 + " " + question2 + " : " + weather2 + " " + question3 + " : " + weather3;
}
}
}
const result1 = sky('비오는 날씨는? : ');
const result2 = result1('맑은 날씨는? : ');
console.log(result2('오늘의 날씨는? : '));
/*
[결과]
비오는 날씨는? : : rain 맑은 날씨는? : : sunny 오늘의 날씨는? : : windy
*/
function money(x) {
var color = 'green';
return function(y) { //클로저에 x의 환경(값)이 저장됨
color = 'orange';
return x + y ;
};
}
var result3 = money('test1 : ');
var result4 = money('test2 : ');
console.log(result3('만원'));
console.log(result4('오만원'));
//클로저에 x와 y의 환경이 저장됨
/*
[결과]
test1 : 만원
test2 : 오만원
*/
|
cs |