[1장] 4.1 스코프와 클로저

[suhjuho]

1. 클로저가 어떤 목적으로 사용되는지 예시와 함께 설명해주세요(클로저의 장점)

[seohag]

클로저는
(1) 데이터 은닉화(캡슐화): 함수 내부에 변수를 숨겨 외부에서 직접 접근 불가하게 만들 수 있습니다.
(2) 상태 유지: 함수가 종료된 후에도 변수를 기억해서 특정 상태를 유지하는데 유용합니다.
(3) 모듈 패턴 구현: 복잡한 애플리케이션을 구성 요소로 나누어서 관리하기 쉽게 만들 수 있고,
(4) 콜백 함수와 비동기 처리: 비동기 작업이나 이벤트 핸들링에서 유용합니다. (비동기 작업이 완료된 후에도 특정 변수 참조 가능)

(1) 변수 은닉화 예제

function createCounter() {
  let count = 0; // 외부에서 접근할 수 없는 변수

  return {
    increment: function() {
      count++;

      return count;
    },
    decrement: function() {
      count--;

      return count;
    }
  };
}

const counter = createCounter();

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

// 외부에서 count에 직접 접근할 수 없습니다.
console.log(counter.count); // undefined

(2) 상태 유지 예제

function createAdder(x) {
  return function(y) {
    return x + y; // x는 createAdder 함수 렉시컬 스코프에 존재합니다.
  };
}

const add5 = createAdder(5);

console.log(add5(2)); // 7
console.log(add5(10)); // 15

(3) 모듈 패턴 예제

const User = (function() {
  let name = "sungjun"; // private 변수입니다

  return {
    setName: function(newName) {
      name = newName;
    },
    getName: function() {
      return name;
    }
  };
})();

console.log(User.getName()); // sungjun
User.setName("minji");
console.log(User.getName()); // minji

(4) 콜백 함수 예제

function fetchData(url, callback) {
  setTimeout(function () {
    const data = { name: "seoha", age: 27 };
    callback(data);
  }, 1000);
}

function handleResponse(data) {
  console.log("응답받은 데이터:" , data);
}

fetchData("https://api.example.com/user", handleResponse);
// 1초 후 "응답받은 데이터: { name: "seoha", age: 27 }" 출력