스코프

function outer(){
  var a = 1;
  console.log(a); //1
}
outer(); 

변수나 함수명을 가지고 그 값을 찾을 때 들여다 보는 곳이 '스코프'

function outer(){
  var a = 1;
    function inner(){
      var a = 2;
      console.log(a); //2
  }
  inner();
}
outer(); 

function outer(){
  var a = 1;
  var b = 'B';
    function inner(){
      var a = 2;
      console.log(b); //'B'
  }
  inner();
}
outer(); 

1)inner()에서 console.log(b)를 찍었음
2) inner()스코프에서 b를 찾아보지만 없음
3) 그 다음으로 outer()스코프에서 b를 찾았을 때 값이 있음

var d = 'x'
function outer(){
  var a = 1;
  var b = 'B';
    function inner(){
      var a = 2;
      console.log(d); //'x'
  }
  inner();
}
outer(); 

=> 전역스코프(global scope)에서 값을 찾아냄

스코프끼리 계속 연결되어 있는 것? 스코프 체인

클로저

어떤 함수가 선언한 변수를 참조하는 내부함수를 외부로 전달할 경우, 함수의 실행 컨텍스트가 종료된 후에도 해당 변수가 사라지지 않는 현상이다.

클로저는 그 본질이 계속 메모리를 차지하는 개념이므로, 사용하지 않게 된 클로저에 대해서는 메모리를 차지하지 않도록 관리해줄 필요가 있다.

//전역 범위(global scope)
var d = 'x'

function outer(){
  var a = 1;
  var b = 'B';
  //외부 함수 범위(outer functions scope)
    function inner(){//inner()은 내부 함수이며, 클로저다. 
    //지역 범위(local scope)
      var a = 2;
      console.log(b);
  }
  return inner;
}

var someFun = outer()
someFun();

• 원래는 outer() 함수가 값을 리턴하고 끝나면 그 내부에 있는 변수는 사라진다고 생각한다.
  하지만 console.log(b)가 찍힘 => 이게 클로저이다!

밖으로 꺼내져서 불러지더라도 본인이 있던 스코프를 기억하고 값을 반환할 수 있는 것이 클로저이다.

참고자료
1. https://www.youtube.com/watch?v=MbYShFxp-j0&t=39s
2. https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

커링함수

여러개의 인자를 받는 함수를 하나의 인자만 받는 함수로 나눠서 순차적으로 호출될 수 있게 체인 형태로 구성한 것을 말한다.

var curry3 = function(func) {
  return function (a){
    return function(b){
      return func(a,b);
    };
  };
};
//위의 함수와 아래의 화살표함수와 동일함 
var curry3 = func => a => b => func(a,b);

var getMaxWith10 = curry3(Math.max)(10);
console.log(getMaxWith10(8)); //10
console.log(getMaxWith10(35)); //35

커링함수가 유용한 경우

원하는 시점까지 지연시켰다가 실행하는 것이(지연실행) 요긴한 상황이라면 커링을 쓰기에 적합할 것이다.

var getInformation = function(baseUrl){//서버에 요청할 기본 url
  return function(path){//path값
    return function(id){//id값
      return fetch(baseUrl + path + '/' +id);//실 서버에 정보 요청
    };
  };
};

//ES6
vr getInformation = baseUrl => path => id => fetch(baseUrl + path + '/' + id);

보통 Restful API를 사용할 때, baseUrl은 고정되지만 path나 id 값은 매우 많을 수 있다. 이 때 baseUrl는 기억시켜두고 특정한 값만 서버 요청을 수행하는 함수를 만들어 두는 편이 효율성이나 가독성 측면에서 좋다.

var imageUrl = "http://image.com";

//이미지 타입별 요청 함수 준비 
var getImage = getInformation(imageUrl);
var getEmotion = getImage('emoticon');//http://image.com/emoticon
var getIcon = getImage('icon'); //http://image.com/icon

//실 요청
var emoticon1 = getEmoticon(100);
var emoticon2 = getEmoticon(101);
var icon1 = getIcon(204);
...

여러 프레임워크나 라이브러리에서 커링을 광범위하게 사용한다.

클로저에 대한 개념 이해와 커링함수의 Restful API에서의 사용이 신기해서 한번 정리해 보았다.