클로져(Closure)

p-q·2021년 9월 28일
0

JavaScript

목록 보기
2/11

클로져?

함수의 실행이 끝난 뒤에도 함수에 선언된 변수의 값을 접근할 수 있는 자바스크립트의 성질

function addCounter() {
	var counter = ;
    
    return function() { // 함수 반환
    	return counter++;
    };
}

위 코드처럼 함수를 변수나 인자로 넘길 수 있는 자바 스크립트의 성질(일급객체)

console.log(addCounter());

f () {
	return counter++;
    }

addCounter() 함수의 역할을 addCounter() 함수를 실행 했을 때 함수를 반환하는것!!

function addCounter() {
  var counter = 0;

  return function() {
    return counter++;
  };
}

addCounter();
console.log(counter); // Uncaught ReferenceError: counter is not defined

다음과 같이 실행시
addCounter() 함수의 실행이 끝난 시점에서
counter라는 변수는 더이상 접근할 수 없는 상태가 된다.
함수 안에 선언한 변수는 함수 안에서만 유효 범위를 갖게 되는것!!!!

function addCounter() {
	var counter = 0;
    
    return function() {
    	return counter++;
    };  
 }
 
 var add = addCounter();
 add(); // 0 counter = 0
 add(); // counter = 0 counter++ counter = 1
 add(); // counter = 1 counter++ counter = 2

addCounter() 라는 함수를 add 라는 변수에 담아놨기 때문에
add 변수 자체가 함수처럼 동작하며 이를 기술적 용어로 표현하면
'add변수가 addCounter()가 반환한 함수를 참조하고있다.'

TIP

함수형 프로그래밍?
함수형 프로그래밍이란 특정 기능 구현을 위해 함수의 내부 로직은 변경하지 않은 상태로 여러 개의 함수를 조합하여 결과를 도출하는 프로그래밍 패턴이다.

function add(num1, num2) {
  return num1 + num2;
}

function curry(fn, a) {
  return function(b) {
    return fn(a, b);
  };
}

var add3 = curry(add, 3);
add3(4); // 7

출처 : [https://joshua1988.github.io/vue-camp/]

profile
ppppqqqq

0개의 댓글