세모이
개발 계발
세모이
전체 방문자
오늘
어제
  • 분류 전체보기 (83)
    • 알고리즘 (1)
    • 자바스크립트 (29)
    • 리액트 (10)
    • HTML&CSS (2)
    • TIL (26)
    • 파이썬 (8)
    • Dev (1)
    • 데일리 (3)
      • 2023 (3)
    • 에러일기 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 모던 자바스크립트 deep dive
  • 옵셔널 체이닝
  • 자바스크립트 strict mode
  • 시멘틱 태그
  • 자바스크립트 빌트인 객체
  • 자바스크립트 깊은 복사 얕은 복사
  • html 신기한 태그
  • 모던 자바스크립트
  • 리액트 key
  • 자바스크립트 프로토타입
  • const let 키워드와 블록레벨 스코프
  • 자바스크립트 함수와 일급 객체
  • &&연산자
  • 개발자 도구 Network
  • 자바스크립트 프로퍼티 어트리뷰트
  • 모던 자바스크립트 deep deive
  • 함수
  • 자바스크립트
  • 자바스크립트 생성자 함수에 의한 객체 생성
  • 자바스크립트 전역 변수의 문제점

최근 댓글

최근 글

티스토리

반응형
hELLO · Designed By 정상우.
세모이

개발 계발

TIL

클로저

2022. 4. 19. 14:42
반응형

클로저 간단히 이해하기

MDN에서의 정의 - 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합이다

위 정의에서 말하는 '함수'란 반환된 내부함수를 의미하고 그 함수가 선언될 때의 '렉시컬 환경'이란 내부 함수가 선언됐을 때의 스코프를 의미한다.

즉 클로저란? 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수이다.

function func(){
    let number=10;
    return function(){
        console.log(number++);
    }
}

let test=func();
test(); // 10
test(); // 11
test(); // 12

위의 예처럼 자신을 포함하고 있는 외부 함수보다 내부함수가 더 오래 유지되는 경우, 외부 함수 밖에서 내부함수가 호출되더라도 외부함수의 지역변수에 접근할 수 있는데 이러한 함수를 클로저라고 한다.

 

클로저의 장점

  1. 전역 변수의 억제 - 전역 변수가 많을 시 예상치 못한 오류와 부수 효과가 생길 수 있다.
  2. 현재 상태를 기억하고 최신 상태를 유지하기 좋음
  3. 캡슐화 - 변수를 함수에 가두어 사용하기 때문에 정보은닉의 효과가 있다.

클로저의 단점

클로저는 메모리를 지속적으로 사용하므로 남발 시 비효율적인 메모리 사용을 하게되고 변수에 접근하려면 해당 클로저로 새성한 스코프들을 탐색해서 찾아야한다.

출처 - https://poiemaweb.com/js-closure

반응형

'TIL' 카테고리의 다른 글

이벤트 버블링 & 캡처링 & 위임  (0) 2022.04.19
SSR vs CSR  (0) 2022.04.04
브라우저 렌더링 과정  (0) 2022.04.04
자바스크립트 데이터 타입  (0) 2022.03.15
WebRTC ver.1  (0) 2022.03.14
    'TIL' 카테고리의 다른 글
    • 이벤트 버블링 & 캡처링 & 위임
    • SSR vs CSR
    • 브라우저 렌더링 과정
    • 자바스크립트 데이터 타입
    세모이
    세모이
    개발 공부!

    티스토리툴바