[JavaScript] 데이터타입, 클로저(Closure)

1. 데이터타입

자바스크립트의 데이터 타입은 크게 두 가지로 나뉩니다.

 

1. 기본 데이터 타입(Primitive Data Types)

• 숫자(Number): 정수와 실수를 포함한 모든 숫자 값을 나타냅니다.
• 문자열(String): 문자들의 시퀀스로 이루어진 데이터를 나타냅니다.
• 불리언(Boolean): true(참) 또는 false(거짓) 값을 나타냅니다.
• undefined: 값이 할당되지 않은 변수를 나타냅니다.
• null: 값이 없음을 나타냅니다.
• 심볼(Symbol): 유일하고 변경 불가능한 기본 데이터 타입입니다.

 

2. 객체(Object)

• 객체는 키(key)와 값(value)의 쌍으로 이루어진 속성(property)의 집합입니다.
• 배열(Array), 함수(Function), 정규 표현식(RegExp) 등도 객체의 일종입니다.
• 객체는 참조 타입으로, 변수에는 객체의 메모리 주소가 할당되며, 해당 주소를 통해 객체에 접근합니다.

 

 

2. 클로저(Closure)

클로저는 함수와 그 함수가 선언된 렉시컬 환경(Lexical Environment)의 조합입니다.

클로저는 함수가 자신이 생성될 당시의 스코프(렉시컬 스코프)에서 선언된 변수에 접근할 수 있는 기능입니다.

함수 내부에서 선언한 변수는 해당 함수 내에서만 유효한 지역 변수로 간주됩니다. 그러나 클로저를 사용하면 함수가 반환된 후에도 해당 함수의 렉시컬 환경이 유지되어 함수 외부에서도 변수에 접근할 수 있습니다.

 

클로저의 주요 특징은 다음과 같습니다:

• 내부 함수가 외부 함수의 변수에 접근할 수 있습니다.
• 외부 함수의 실행이 종료되더라도 내부 함수가 외부 함수의 변수에 접근할 수 있습니다.
• 클로저를 통해 접근한 변수는 메모리에서 계속 유지됩니다.

클로저는 주로 비동기 처리, 정보 은닉, private 변수 등을 구현하는 데 사용됩니다. 예를 들어, 함수 내부에서 비동기 작업을 수행하고 그 결과를 외부에서 사용해야 할 때 클로저를 이용하여 결과를 유지하고 접근할 수 있습니다.

클로저는 자바스크립트의 강력한 기능 중 하나이며, 함수와 스코프에 대한 이해가 필요합니다.

 

클로저의 사용예시

1. 비동기 작업과 콜백 함수
- 비동기 작업을 처리할 때 클로저를 사용하여 콜백 함수에 데이터를 유지하고 전달할 수 있습니다. 이를 통해 비동기 작업이 완료된 후에도 해당 데이터를 활용할 수 있습니다.

function fetchData(url, callback) {
  // 비동기 작업 수행
  fetch(url)
    .then(response => response.json())
    .then(data => {
      // 콜백 함수 내에서 클로저 사용
      callback(data);
    });
}

function processData(data) {
  // 클로저를 통해 fetchData 함수 외부의 변수에 접근
  console.log(data);
}

fetchData('https://api.example.com/data', processData);

 

2. 정보 은닉(Encapsulation)

- 클로저를 사용하여 변수를 외부에서 접근할 수 없도록 은닉화할 수 있습니다. 이를 통해 변수에 직접 접근하지 않고도 함수를 통해 간접적으로 변수를 조작할 수 있습니다.

function createCounter() {
  let count = 0;

  return function() {
    // 클로저를 통해 count 변수에 접근 및 조작
    count++;
    console.log(count);
  };
}

const counter = createCounter();
counter(); // 1
counter(); // 2

 

3. 모듈 패턴(Module Pattern)

- 클로저를 사용하여 모듈화된 코드를 구현할 수 있습니다. 클로저를 통해 모듈 내부의 변수와 메소드를 캡슐화하고, 외부에서 접근할 수 있는 공개 인터페이스를 제공할 수 있습니다.

const calculator = (function() {
  let result = 0;

  function add(num) {
    result += num;
  }

  function subtract(num) {
    result -= num;
  }

  function getResult() {
    return result;
  }

  return {
    add,
    subtract,
    getResult
  };
})();

calculator.add(5);
calculator.subtract(2);
console.log(calculator.getResult()); // 3