코딩하는 김딸기

04-6. 클로저 본문

자바스크립트/Likelion_JS

04-6. 클로저

김딸기* 2024. 10. 5. 17:34

클로저 (Closure)

  • 정의: 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합을 의미합니다. 즉, 클로저는 특정 함수가 정의된 위치의 변수를 기억하고, 그 변수를 나중에 사용할 수 있게 해주는 기능입니다.
  • 중요성: 클로저는 자바스크립트의 중요한 개념으로, 다양한 프로그래밍 언어에서도 사용됩니다. 클로저는 자바스크립트에서 자동으로 제공되며, 개발자가 특별히 코드를 작성할 필요는 없습니다.
  • 이해를 위한 선행 지식:
    • 실행 컨텍스트: 함수가 실행될 때, 그 함수의 실행 환경을 포함한 객체입니다. 이는 매개변수, 로컬 변수, 그리고 내부 함수 등을 포함합니다.
    • 렉시컬 환경: 함수가 선언된 위치를 의미합니다. 이는 코드 작성 시의 위치를 기반으로 하며, 함수 실행 시의 동적인 환경과는 다릅니다.

실행 컨텍스트 (Execution Context)

  • 정의: 실행 컨텍스트는 함수가 실행되기 위한 정보를 포함한 객체입니다. 함수가 호출될 때, 매개변수 값, 로컬 변수, 로컬 함수 등이 이 컨텍스트에 저장됩니다.
  • 스택 구조: 실행 컨텍스트는 함수 호출 순서에 따라 스택 구조로 유지됩니다. 즉, 마지막에 호출된 함수의 실행 컨텍스트가 가장 먼저 제거되는 구조입니다.

렉시컬 환경 (Lexical Environment)

  • 정의: 렉시컬 환경은 함수가 선언된 위치를 의미합니다. 예를 들어, innerFun()이 outerFun() 함수 안에 선언되었다면, innerFun()의 렉시컬 환경은 outerFun()입니다.

클로저의 필요성

  • 클로저는 특정 함수가 렉시컬 환경 외부에서 호출될 때 유용합니다. 이는 함수가 정의된 환경의 정보를 기억하여, 해당 변수를 사용할 수 있게 해줍니다.

캡슐화 (Encapsulation)

  • 정의: 캡슐화는 관련된 프로퍼티와 메서드를 하나로 묶는 객체 지향 프로그래밍의 개념입니다. 자바스크립트에서는 생성자 함수나 클래스를 통해 캡슐화된 프로그램을 작성합니다.
  • 목적: 캡슐화를 통해 코드의 관리와 유지보수를 용이하게 하고, 외부에 내부 정보를 숨겨 정보 은닉을 할 수 있습니다.
  •  

즉시 실행 함수 (Immediately Invoked Function Expression, IIFE)

  • 정의: 즉시 실행 함수는 선언하자마자 호출되는 함수입니다. 일반적으로 함수는 선언 후에 호출되지만, IIFE는 이름 없이 선언되고 바로 호출됩니다.
  • 목적: IIFE를 사용하여 변수를 즉시 실행 함수로 묶어 특정 범위에서만 사용되게 하고, 전역 변수의 오염을 방지할 수 있습니다.
  • 예시:
  •  
    코드 복사
    (function () { let data = 10; function myFun() { console.log(data); } myFun(); // 10 })(); // data = 20; // Error // myFun(); // Error
  • javascript
  • 라이브러리에서의 사용: 라이브러리 코드에서 IIFE를 사용하면, 라이브러리 내에서만 사용하고자 하는 변수를 외부에 노출하지 않아 의도치 않은 문제를 방지할 수 있습니다.
  • 다른 예시:
  • javascript
    코드 복사
    const counter = (function () { let count = 0; return function (argFun) { count = argFun(count); return count; }; })(); let increment = (no) => ++no; let decrement = (no) => --no; console.log(counter(increment)); // 1 console.log(counter(increment)); // 2 console.log(counter(decrement)); // 1

이렇게 각 개념을 체계적으로 정리하여 설명하였습니다. 각 개념이 서로 어떻게 연결되는지를 이해하면, 자바스크립트를 더욱 효과적으로 활용할 수 있습니다. 추가적으로 궁금한 점이나 더 알고 싶은 내용이 있다면 언제든지 질문해 주세요!

'자바스크립트 > Likelion_JS' 카테고리의 다른 글

05-2. Ajax, Axios  (0) 2024.10.05
05-1. JavaScript 비동기  (0) 2024.10.05
04-5. 클래스  (0) 2024.10.05
04-4. 다양한 OOP 기법  (0) 2024.10.05
04-3. 프로토 타입  (0) 2024.10.05