What I Learned
  • Introduction
  • Introduction
  • Javascript
    • 클로저 (closure)
    • 프로토타입 (Prototype)
    • 정규표현식 (RegExp)
    • 날짜 (Date)
    • jQuery 분석
    • 스코프 (this)
    • 성능 최적화 (Optimization)
  • Style
    • CSS
      • Prevent user select
      • Aspect Ratio
      • Sticky Footer
    • SASS
      • for loop
      • mixin example
      • Media Query
  • Web
    • 웹의 동작 과정
    • Cross Browser
    • Document Reflows
    • Open Graph
    • 이미지 압축 (Image optimization)
    • SPA, SSR 비교
  • Algorithm and Data Structure
    • 자료구조 (Data Structure)
      • 큐 (Queue)
      • 스택 (Stack)
      • 링크드 리스트 (Linked List)
    • 기초 이론
      • 복잡도 분석
    • 수학 (Math)
      • factorial (계승)
      • 피보나치 수 (Fibonacci)
    • 정렬 (Sorting)
      • 버블 정렬 (Bubble Sort)
      • 선택 정렬 (Selection Sort)
      • 삽입 정렬 (Insertion Sort)
      • 합병 정렬 (Merge Sort)
      • 퀵 정렬 (Quick Sort)
    • 탐색 (Search)
      • 순차 탐색 (linear search)
      • 이진 탐색 (Banary search)
    • 문제 풀이
      • 땅따먹기
      • 가장 큰 원소의 합 구하기
      • JS with HTML
  • Software Engineering
    • OOP
    • Development Process
    • TDD / BDD
  • Interview
    • HTML
    • CSS
    • Javascript
    • Other
    • General Questions
  • DevOps
    • gulp
  • PHP
    • Basic
Powered by GitBook
On this page
  1. Javascript

클로저 (closure)

클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 말한다.

function outter(){
  var title = 'Hello in outter';
  return function(){
    // 외부 함수 `outter`의 내부 변수 `title`을
    // 리턴되는 내부 함수에서 접근할 수 있다.
    // 즉 외부함수의 스코프에 있는 변수에 접근할 수 있다.
    return title;
  }
}

var inner = outter();
inner(); // 'Hello'
function movie(name){
  return {
    setName: function(_name){
      name = _name;    
    },
    getName: function(){
      return name;
    },
  }
}
var m1 = movie('Matrix');
m1.getName(); // 'Matrix'
m1.setName('매트릭스'); // 매트릭스

movie의 인자로 받는 name 변수는 외부에서 접근 불가하지만, 내부에서는 사용할 수 있는 private 변수가 된다.

var arr = [];
for(var i=0; i<5; i++) {
  arr[i] = function(){
    return i;
  }
}

for (var index in arr) {
	arr[index](); // 모두 5
}

위와 같이 바꾸면 리턴되는 내부 함수가 외부 함수의 콘텍스트에 접근할 수 있기 때문에 정상 작동한다.

var arr = [];
for(var i=0; i<5; i++) {
  arr[i] = (function(id){
    return function(){
      return id;
    };
  })(i)
}

for (var index in arr) {
	console.log( arr[index]() ); // 0 ~ 4 출력
}

arr에 할당되는 함수가 외부 함수의 변수에 접근할 수 없기 때문에 위와 같은 결과가 나온다.

---

함수를 호출하면?

함수를 호출하면 실행 컨텍스트와 스코프 체인이 생성된다. 함수를 실행하면 값을 읽거나 쓸 변수를 스코프 체인에서 검색한다. 스코프 체인은 변수 객체를 가리키는 포인터의 목록이며, 객체를 직접 포함하는 것은 아니다.

함수 실행이 끝나면?

함수 실행이 끝나면 활성화 객체는 파괴되고, 메모리에는 전역 스코프만 남는다. 외부함수가 실행을 마치고 익명함수를 반환하면, 익명함수의 스코프체인은 외부함수의 활성화 객체와 전역변수 객체를 포함하도록 초기화된다.

PreviousJavascriptNext프로토타입 (Prototype)

Last updated 7 years ago