클로저

2025. 1. 2. 11:14·javascript

함수와 렉시컬환경의 조합

함수가 생성 될 당시의 외부변수를 기억, 생성 이후에도 계속 접근 가능

외부변수의 은닉화 (외부함수의 변수를 변경할 수 없다.)

 

함수 내부 렉시컬환경에서 변수가 없는경우 하나씩 외부로 나가서 변수를 찾게된다. 

내부함수 -> 외부함수 -> ... -> 전역환경 

 

let one;
one = 1;

function addOne(num) {
  console.log(num + one); //인수 5 + 전역변수 one값을 가져온다
}

addOne(5);

 

함수가 생성 될 당시의 변수를 기억해서 

이후에 계속 사용할 수 있다. 

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

const add3 = makeAdder(3);
console.log(add3(2)); // 5

const add10 = makeAdder(10);
console.log(add10(5)); // 15
console.log(add3(1)); // 4

 

장단점

클로저의 장점은 함수 내부의 상태를 유지할 수 있다는 점입니다.
이는 비동기 처리나 콜백 함수에서 매우 유용하게 사용됩니다. 

 

클로저의 단점은 메모리 누수가 발생할 수 있다는 점입니다.
클로저는 함수 내부의 변수를 계속해서 참조하기 때문에, 메모리 누수가 발생할 수 있습니다.

'javascript' 카테고리의 다른 글

string 대문자, 소문자 체크하기  (0) 2023.05.05
String.charAt(index)  (0) 2023.05.05
배열의 두 요소 순서를 변경할 때  (0) 2023.05.05
Array.prototype.reduce()  (0) 2023.04.20
call, bind, apply의 this binding  (0) 2023.04.19
'javascript' 카테고리의 다른 글
  • string 대문자, 소문자 체크하기
  • String.charAt(index)
  • 배열의 두 요소 순서를 변경할 때
  • Array.prototype.reduce()
ssund
ssund
  • ssund
    ssund의 기술블로그
    ssund
  • 전체
    오늘
    어제
    • TECH (82)
      • Next.js (8)
      • React (25)
      • Vite (1)
      • javascript (17)
      • CSS (6)
      • CS (10)
      • AWS (0)
      • Jest (1)
      • CI|CD (0)
      • 알고리즘 (8)
      • Tools (1)
      • Tips (5)
  • 블로그 메뉴

    • 링크

    • 공지사항

    • 인기 글

    • 태그

      JavaScript
      styled-components
      call signatures
      배열요소순서
      웹브라우저구성
      redux
      Array.sort()
      reat-head
      서버컴포넌트
      TypeScript
      theme-provider
      app-router
      React
      nextjs
      git배포
      함수와 메서드차이
      커머스프로젝트
      global-style
      react state management
      타입스크립트
    • 최근 댓글

    • 최근 글

    • hELLO· Designed By정상우.v4.10.0
    ssund
    클로저
    상단으로

    티스토리툴바