📝
서은 STUDY_SCRIPT
  • JAVASCRIPT 기록
  • JAVASCRIPT 문법정리
    • 데이터 저장하기
    • 데이터 불러오기
    • 데이터 실행하기
    • 데이터 제어하기
    • 면접질문 정리
  • PHP를 이용한 사이트 작업
    • PHP와 MySQL
      • 댓글쓰기
      • 회원가입
      • 로그인
      • 게시판
        • 페이지네이션 & 게시글보기
        • 수정/삭제/목록/검색
  • 생활코딩 JavaScript
    • JavaScript 입문수업
      • Basic
        • 자바스크립트 기본 세팅
        • 데이터타입
        • 변수
        • 연산자
        • 조건문
        • 반복문
        • 함수
        • 배열
        • 객체
        • 모듈
        • 정규표현식
      • 함수지향
        • 유효범위
        • 값으로서 함수
        • 값으로서 콜백
        • 클로저
        • arguments
        • 함수의 호출
      • 객체지향
        • 생성자와 new
        • 전역객체
        • this
        • 상속
        • Prototype
        • 표준내장객체의 확장
        • Object
        • 데이터 타입
        • 복제 & 참조
    • JavaScript Basic
      • 자바스크립트란?
      • 데이터타입
      • 변수와 대입연산자
      • 제어할 태그 선택
      • 비교연산자와 불리언
      • 조건문 if
      • 리팩토링
      • 배열 [ ]
      • 반복문 while
      • 배열과 반복문
        • 배열과 반복문의 활용
      • 함수
        • 함수의 활용
      • 객체 { }
        • 객체와 반복문 for~in
        • 프로퍼티와 메소드
        • 객체의 활용
      • 파일로 쪼개서 정리정돈
      • 라이브러리 & 프레임워크
      • UI & API
    • Web Browser
      • JavaScript란?
      • BOM
        • 전역객체 window
        • 사용자와 커뮤니케이션
        • Location 객체
        • Navigator 객체
        • 창 제어
      • DOM
        • 제어 대상 찾기
        • jQuery
        • HTMLElement
        • Element 객체
          • 식별자 API
          • 조회 API
          • 속성 API
        • Node 객체
          • Node 관계 API
          • Node 종류 API
          • Node 변경 API
          • jQuery 노드 변경 API
          • 문자열로 노드 제어
        • HTMLCollection
      • 이벤트
        • 이벤트 등록
        • 이벤트 전파(버블링과 캡처링)
        • 이벤트 기본 동작 취소
        • 이벤트 타입
      • 네트워크 통신
        • Ajax
        • JSON
  • NOMAD JAVASCRIPT
    • VanillaJS
      • Why JS?
      • ES5, ES6
      • Basic
        • Alert & Console
        • Variable
        • Data Types
        • Array & Object
      • Function
      • DOM
        • Event & Event handler
        • Conditional
        • Function Practice
      • Momentum App
        • Making a JS Clock
        • Saving the User Name
        • To-Do List
        • Image Background
        • Getting Weather
  • DREAM CODING
    • 자바스크립트 기초 강의 (ES5+)
      • JavaScript 역사
      • async & defer / Strict Mode
      • Variable / Hoisting / Data Type
      • Operator / if / Loop
      • Function
        • 함수의 선언
        • 함수의 표현
      • Class
      • Object
      • Array
      • Array API
      • JSON
      • Callback
      • Promise
      • Async & Await
  • WEB BOS
    • #JavaScript30
Powered by GitBook
On this page
  • 클로저(Closure)
  • 1. 클로저와 내부함수
  • 2. 클로저의 특성
  • 3. 프라이빗 변수(private variable)
  • 4. 클로저의 응용
  • 클로저 참고

Was this helpful?

  1. 생활코딩 JavaScript
  2. JavaScript 입문수업
  3. 함수지향

클로저

클로저(Closure)

내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것

1. 클로저와 내부함수

자바스크립트는 함수 안에서 또 다른 함수를 선언할 수 있음

function outter(){ //외부함수
    function inner(){ //내부함수
        var title = 'coding everybody'; 
        alert(title);
    }
    inner();
}
outter(); //coding everybody
//내부함수 inner에서 title을 호출했을때, 
//외부함수 outter의 지역변수에 접근가능함을 보여줌

2. 클로저의 특성

  • 클로저(closure)는 내부함수와 밀접한 관계를 가지고 있음

  • 내부함수는 외부함수의 지역변수에 접근 할 수 있음

외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있음 이러한 메커니즘 → 클로저

function outter(){
    var title = 'coding everybody';  
    return function(){        
        alert(title);
    }
}
inner = outter();
inner(); //coding everybody
//이미 외부함수는 소멸되었지만, 외부함수의 지역변수 title이 소멸되지 않았음

3. 프라이빗 변수(private variable)

어떠한 정보를 아무나 수정하지 못하도록 방지하는 변수 (객체의 외부에서는 접근 할 수 없는 외부에 감춰진 속성이나 메소드를 의미)

  • Private 속성을 통해 객체의 내부에서만 사용해야 하는 값이 노출됨으로서 생길 수 있는 오류를 줄일 수 있음

  • 클로저는 객체의 메소드에서도 사용 가능

  • 동일한 외부함수 안에서 만들어진 내부함수나 메소드(get_title / set_title)는 외부함수의 지역변수(title)를 공유

  • JavaScript는 기본적으로 Private한 속성을 지원하지 않는데, 클로저의 이러한 특성으로 Private한 속성을 사용할 수 있음

function factory_movie(title){ //매개변수는 함수 속에서 지역변수로 사용
    return {
        get_title : function (){ //내부함수
            return title;
        },
        set_title : function(_title){
            title = _title //클로저는 객체로도 사용 가능
        }
    }
}
ghost = factory_movie('Ghost in the shell');
matrix = factory_movie('Matrix');
 //접근하는 title값이 서로 다름
 
alert(ghost.get_title());  //Ghost in the shell
alert(matrix.get_title()); //Matrix
//factory_movie의 지역변수를 가져오게 됨 

 
ghost.set_title('공각기동대'); 
 
alert(ghost.get_title());  //공각기동대
alert(matrix.get_title()); //matrix

 
// factory_movie는 오직 get_title과 set_title라는 
// 메소드를 통해서만 접근이 가능한 함수

4. 클로저의 응용

var arr = []
for(var i = 0; i < 5; i++){ 
//i의 값은 이 함수의 외부함수가 아님
    arr[i] = function(){
        return i;
    }
}
for(var index in arr) {
    console.log(arr[index]());
} //55555

/* 이 함수를 내부함수로 하는 외부함수를 정의하고 
그 외부함수의 지역변수 값을 내부함수가 참조하도록 하면 01234를 얻을 수 있음 */

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]());
} //01234

클로저 참고

Previous값으로서 콜백Nextarguments

Last updated 3 years ago

Was this helpful?

https://developer.mozilla.org/ko/docs/JavaScript/Guide/Closures
http://ejohn.org/apps/learn/#48
http://blog.javarouka.me/2012/01/javascripts-closure.html