📃 프론트엔드 인터뷰 문제 답해보기 #10 클로저는 무엇이며 왜 사용하나요? + Execution Context + Lexical Environment

📃 프론트엔드 인터뷰 문제 답해보기 #11 클로저는 무엇이며 왜 사용하나요?

Prologue

깃허브를 돌아다니다가 예전에 프론트엔드 개발자 인터뷰 질문이라는 레포지토리를 본적이 있다. 사실 그 당시에는 그냥 스타만 눌러놓고 큰 관심이 없었지만 지금부터 하나씩 풀어보려 합니다.

물론 많은 답들이 이미 이 레포지토리에 작성되어 있긴 한데, 작성되지 않은 것들도 있고 내 답이랑 모범답안을 비교하는 것도 좋을 것 같아서 한번 풀어보려 합니다.

문제 선정

기존 레포지토리에는 문제의 분류가 아래와 같이 되어있습니다.

1. General Questions
2. HTML Questions
3. CSS Questions
4. JS Questions
5. Accessibility Questions (external link)
6. Testing Questions
7. Performance Questions
8. Network Questions
9. Coding Questions
10. Fun Questions

매일 1가지씩 돌아가며 풀 건데, General Questions 항목에서 너무 일반적인 문제는 풀지 않을 것이다. 너무 일반적인 문제의 정의는 사람마다 답이 다를 수 있는 문제입니다.

이를테면...

What did you learn yesterday/this week? (어제/이번주에 무엇을 배웠나요)
What excites or interests you about coding? (무엇이 당신을 코딩하고 싶게 만드나요?)
What is a recent technical challenge you experienced and how did you solve it?(최근에 겪은 기술적인 어려움과 그것을 어떻게 해결했는지 알려주세요)

이러한 것들은 답변하지 않습니다. 이런 문제는 그때그때 답이 달라질 수 있습니다.

참고

나의 답변은 높은 확률로 틀릴 수도 있으며, 아니면 맞게 가다가 중간에 이상한 길로 빠질 수도 있다. 댓글에 자신만의 답을 올려주면 매우 고마울 것 같습니다.

Q: 클로저는 무엇이며 왜 사용하나요?

What is a closure, and how/why would you use one?

A: 렉시컬 환경과 함수의 조합이며, 모듈패턴, 부분적용, 커링에 쓰입니다.

클로저는 함수가 선언된 렉시컬 환경과 함수의 조합입니다. "렉시컬"이란 단어는 렉시컬 스코핑이 소스코드 내에서 변수가 사용 가능한 곳을 결정하기 위해 변수가 선언된 위치를 사용한다는 것을 참조합니다. 클로저는 내부 함수로 외부 함수의 변수에 접근할 수 있는 함수를 말합니다. 클로저는 외부 함수가 반환된 후에도 외부 함수의 변수 범위 체인에 접근할 수 있는 함수입니다.

기본 예제

아래는 MDN에 있는 Closure의 예제 코드입니다.

function makeFunc() {
  var name = 'Mozilla';
  function displayName() {
    alert(name);
  }
  
  return displayName;
}

var myFunc = makeFunc();
myFunc();

일반적으로 함수가 값을 반환한 이후에는 다시 그 함수의 내부 변수에 접근할 수 없다고 생각하는데 Closure를 구성하면 가능합니다. 클로저는 만들어진 시점에서 환경에 존재하는 지역 변수들을 기억합니다. 위에서는 makeFunc가 동작할 때, myFunc는 displayName의 인스턴스를 갖습니다. displayName의 인스턴스는 name 변수가 들어있는 자신의 렉시컬 환경을 기억합니다.

Function Factory 예제

Function Factory란 어떤 함수를 만들어주는 함수 공장입니다.

function makeAdder(x){
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));
console.log(add10(2));

모듈 예제

var myCounterModule = (function() {
  var counter = 0;
  return {
    increase: function() {
      alert(++counter);
    },
    decrease: function() {
      alert(--counter);
    },
    getCounter: function() {
      alert(counter);
      return counter;
    }
  }
})();

위는 숫자를 세어주는 카운터입니다. 누구도 counter라는 변수에 직접 접근은 불가능하지만, 메소드를 통하여 해당 값을 더하거나 뺄 수 있습니다.

위의 패턴은 IIFE라고도 불립니다.

커링 예제

커링은 여러 개의 인자를 받아 진행하는 함수를 각 하나의 인자를 갖고 있는 함수들로 변형하는 테크닉을 의미합니다.

function addTwo(a, b) {
  return a + b;
}

addTwo(1, 2); // 3

function addTwo(a) {
  return function (b) {
    return a + b;
  };
}

addTwo(1)(2); // 3

두 코드 중 위의 경우가 일반적인 함수이고 아래의 경우가 커링을 적용한 함수입니다.

'이 짓해서 어따 써먹냐?' 하는 분들이 있을 수 있는데 아래 링크를 참조하면 좋습니다.
https://www.facebook.com/notes/kevin-lee/currying-%EC%96%B4%EB%94%B0-%EC%8D%A8%EB%A8%B9%EB%83%90%EA%B5%AC%EC%9A%94/214522735556858/

위의 링크에도 나와있지만,

1. 함수의 Argument를 유연성있게 무한 확장 가능합니다.

function addInfiteArguments(a) {
    return function (b) {
        if(typeof b === 'number')
            return addTest(a + b);
        
        return a;
    }
}

addInfiteArguments(1)(2)(3)(4)(5)(6)(7)(8)(9)(10)(); // 55

2. 실제 함수의 실행을 마지막 정보가 입력될 때까지 무기한 뒤로 미룰 수 있습니다.