클로저는 콜백 함수와 외부 변수의 관계를 가리키는 말입니다.
====================================
클로져
:
클로져는 그냥
외부 함수가 실행 종료가 되도,
그 환경 변수를 참조할 수 있는 경우를 뜻하는것 뿐.
=====================================**
클로져는 뭐 따로 쓸려고 해서 쓰는게 아닙니다.
그냥 자연스럽게 다 쓰는게 클로져죠,
클로져는 개념입니다. 그냥
의식 못하고 쓰는 거죠
참고로
const a = () => {
console.log(window);
}
이것도 클로져에요.,,,
이 함수가 클로져에요.
클로져를 안쓰고 코딩한다는건 불가능 합니다. ㅎㅎ
현업에서 클로져 복잡하게 굳이 클로져를 쓰는게 아니고
자연스래 간단하게나마 계속
의식하지않고
클로져를 이미 쓰고 계십니다 ㅎㅎ
자바스크립트 클로저의 사용방법과 개념 설명
자바스크립트의 클로저란?
클로저는 독립적(자유)변수를 나타내는 기능입니다. 즉, 클로저의 기능은 클로저가 생성된 환경을 '기억' 하는 것입니다.
================
var passed = 3;
var add = function (inner) {
return passed + inner;
};
console.log(add(1));
결론적으로 이건데
일단
var addThree = new addTo(3);
이렇게 하셨으면
addThree 이 녀석은 함수인것도 아시죠
리턴값이 저 함수였죠
이때,
{
inner: 3,
add: function() {}
}
이런 객체가 생성되게 되요
지금 저 add 함수와
passed 변수의
영역이 같아요
그래서
var passed = 3;
var add = function (inner) {
return passed + inner;
};
console.log(add(1));
딱 이 모습의 상황이 연출된거예요
그냥 단순히 다른거 다 잊으시고,
단지 그냥
그 인자값이랑 함수의 스코프가 같았다.
이것만 남기시면 될듯해요.
==========
연습용 예제 남길꼐요>
var function1 = function() {
};
이런함수 있다고 할때
function1();
이렇게 실행시키죠
var function1 = function() {
return 1;
};
function1() === 1
이죠
var function1 = function() {
return function() {
return 1;
};
};
function1()() === 1; 이죠
var function1 = function() {
var aa=1;
return function() {
return aa;
};
};
unction1()() === 1; 이죠
var function1 = function(bb) {
var aa=bb;
return function() {
return aa;
};
};
function1(1)() === 1; 이죠
var function1 = function(bb) {
return function() {
return bb;
};
};
function1(1)() === 1;
이죠
var function1 = function(bb) {
var add = function() {
return bb;
};
return add;
};
function1(1)() === 1;
이죠
이미 위에 두개는같은 상황이죠
bb 와 add 가
같은 공간에 존재한다는 것을 보여준 코드예요
뭐 별거 없고 그게 다지요
({
aa:1,
bb:function() {
return this.aa;
}
}).bb() === 1;
네 클로져는 아니지만
혹시나 이걸 의도하셨던게 아닌가 싶었어요
var function1 = function () {
var add = function () {
return 1;
};
};
add() === 1;
거짓입니다.
아예 함수가 정의되지도 않았죠
function1 함수를 실행해줘야 정의가 되죠
var function1 = function () {
var val1 = 1;
var val2 = 2;
var val3 = calculate_a_huge_number();
var add = function () {
return 1;
};
};
function1() 를 실행을 안해주면
저 안에것들은 아예작동을 안하죠
그러면
function1();
이렇게 해준다면
일단 작동을 하고 변수와 함수들이
정의가되겠죠
그러고나면
add() === 1;
이게 참이 될까요
아뇨
저거 val1 얘네들
어떻게 접근해야할까요
var function1 = function () {
var val1 = 1;
var val2 = 2;
var val3 = calculate_a_huge_number();
var add = function () {
return val1;
};
};
var function1 = function () {
var val1 = 1;
var add = function () {
return val1;
};
};
var add2 = function() {
return val1;
};
add2() 하면 뭘리턴할까요
레퍼런스 에러가 먼저 나죠
var function1 = function () {
var val1 = 1;
var add = function () {
return val1;
};
};
var add2 = function() {
return function1;
};
이건 에러가날까요
function1 과 val1 의 차이점은
무엇이였을까요
첫번쨰 에러나는이유는 스코프가 달라서 접근이 불가해서고
두번쨰는 같은 전역 스코프니까 되요
그냥 스코프가 같을뿐이예요
var function1 = function () {
var aa = 1;
var aaa = function () {
aa++;
bbb();
};
var bbb = function () {
console.log('현제에이에이값: '+aa);
};
setInterval(aaa, 1000);
return bbb;
};
var ccc = function1();
ccc();
이런거 해보세요
방금 만들어드린 따뜻한 예제
====================
이거 커링때문일거에요
변수 전달받고 또받으면 안에있는 함수로 가서 그런거에요
function add_To(a){
return function (b) {
return a + b;
}
}
위에걸 쉽게적으면 이렇게 할 수 있는데.. 이렇게 리턴된 함수에 매개변수를 한번더 넣는다고 생각하시면 되요ㅎㅎ
