자바스크립트 (12)

Do_Doolly·2023년 1월 23일

JavaScript

자바스크립트 TIL

목록 보기

12/15

글에 적은 내용 중 잘못된 부분은 댓글로 적어주시면 감사하겠습니다!

🔜 내부함수

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

function outter() {
  // 지역변수 title 생성
  const title = 'hello world!';
  
  // 내부함수 inner 선언
  function inner() {
    console.log(title);
  }
  inner();
}
outter();

위 예제에서 outer 함수 내에 inner 함수를 생성하고 이를 호출하는 것을 보여준다.

이 때 outer 함수 내에 선언된 inner 함수를 내부함수라고 한다.

내부함수인 inner는 outer 내에 있는 지역변수에 접근할 수 있다.

🧐 클로저 (Closure)

~~미국의 연애문화인 클로저에 대해...~~ 연애 문화의 클로저가 아닌 자바스크립트의 클로저에 대해 설명한다.

자바스크립트에서 클로저란 자바스크립트의 언어적 문법의 특징에서 비롯됐는데, 함수와 함수가 선언된 어휘적 환경의 조합이다.

이전에 자바스크립트는 Lexical Scope를 따른다고 했다. 정적인 스코프로 함수가 선언된 위치를 기억하는 것을 의미한다.

위 내부함수의 예시에서 마지막 outter 함수를 호출하는 부분을 바꿔보자

// outter 함수 정의 이후
const reuslt = outter();

result(); // outter 함수의 inner 함수 호출 따라서 hello world! 가 콘솔에 표시됨

위에서 result()는 outter 함수의 inner 함수가 호출되어 실행하는 것을 그대로 이행한다.

다른 프로그래밍 언언어에서는 title 이라는 변수가 이미 outter()가 실행될 때 소멸될 것이라 생각하지만, 자바스크립트와 같은 함수지향 프로그래밍 언어에서는 result 함수에 값으로 저장되어 실행된다!

참고로 함수를 객체와 같이 취급하는 것을 고급진 말로 일급함수 라고 한다

말로 어렵긴 한데 실은 나도 사용을 잘 안해봐서 실용적인 부분은 잘 모르겠다 😓

🔚 클로저의 응용

클로저는 보통 함수의 private method를 활용할 때 쓰인다. 자바스크립트에는 public, private와 같은 접근 지정자가 따로 없기 떄문에 클로저를 이용해서 구현한다.

// 즉시실행함수 counter 생성
const counter = (function() {
  let privateCounter = 0;
  // counter의 지역변수를 계산하는 함수 생성
  function changeBy(val) {
    privateCounter += val;
  }
  
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };
})();

console.log(counter.value()); // 0
counter.increment();
counter.increment();
console.log(counter.value()); // 2
counter.decrement();
console.log(counter.value()); // 1