[JavaScript 문법] 7일차: 스코프와 클로저

스코프란?

스코프는 변수, 함수, 객체가 접근할 수 있는 범위를 나타냅니다. JavaScript에는 전역 스코프와 지역 스코프가 있으며, ES6 이후에는 블록 스코프도 추가되었습니다.

전역 스코프

전역 스코프는 코드 전체에서 접근할 수 있는 범위를 의미합니다. 전역 변수는 함수 외부에서 선언된 변수입니다.

 

예제

let globalVar = 'I am global';

function test() {
  console.log(globalVar); // 'I am global'
}

test();
console.log(globalVar); // 'I am global'

 

지역 스코프

지역 스코프는 함수 내부에서만 접근할 수 있는 범위를 의미합니다. 지역 변수는 함수 내부에서 선언된 변수입니다.

 

예제

function test() {
  let localVar = 'I am local';
  console.log(localVar); // 'I am local'
}

test();
// console.log(localVar); // 오류: localVar는 정의되지 않음

 

블록 스코프

블록 스코프는 코드 블록(예: if 문, for 문) 내부에서만 접근할 수 있는 범위를 의미합니다. let과 const 키워드는 블록 스코프를 가집니다.

 

예제

if (true) {
  let blockVar = 'I am block-scoped';
  console.log(blockVar); // 'I am block-scoped'
}

// console.log(blockVar); // 오류: blockVar는 정의되지 않음

클로저란?

클로저는 함수가 정의된 스코프 외부에서 호출될 때에도 해당 스코프의 변수에 접근할 수 있는 기능을 의미합니다. 클로저는 함수와 그 함수가 선언될 당시의 렉시컬 환경의 조합입니다.

 

클로저의 예제

function outerFunction() {
  let outerVar = 'I am outer';

  function innerFunction() {
    console.log(outerVar); // 'I am outer'
  }

  return innerFunction;
}

const closureFunction = outerFunction();
closureFunction(); // 'I am outer'

 

클로저의 활용 예제

클로저는 상태를 유지하거나 캡슐화를 구현하는 데 유용합니다.

function createCounter() {
  let count = 0;

  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

 

클로저와 렉시컬 환경

JavaScript는 렉시컬 스코핑을 따릅니다. 이는 함수가 어디서 호출되는지가 아니라, 어디서 정의되는지에 따라 스코프가 결정된다는 의미입니다.

 

예제

let x = 10;

function outerFunction() {
  let x = 20;

  function innerFunction() {
    console.log(x); // 20
  }

  return innerFunction;
}

const closureFunction = outerFunction();
closureFunction();

클로저의 장점과 단점

장점

1. 데이터 은닉: 클로저를 사용하여 변수나 함수를 은닉할 수 있습니다.
2. 상태 유지: 클로저를 사용하여 함수 호출 간 상태를 유지할 수 있습니다.

단점

1. 메모리 누수: 클로저를 잘못 사용하면 메모리 누수가 발생할 수 있습니다.
2. 디버깅 어려움: 클로저는 디버깅이 어려울 수 있습니다.

클로저 사용 팁

1. 명확한 목적: 클로저를 사용하는 목적을 명확히 합니다. 주로 데이터 은닉이나 상태 유지에 사용됩니다.
2. 메모리 관리: 클로저를 사용한 후 필요 없을 때에는 참조를 제거하여 메모리를 관리합니다.

예제

function createCounter() {
  let count = 0;

  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

// 메모리 관리: 더 이상 사용할 필요가 없을 때 참조를 제거
counter = null;

 

결론

스코프와 클로저는 JavaScript에서 중요한 개념으로, 변수의 유효 범위와 함수의 렉시컬 환경을 이해하는 데 도움이 됩니다. 이번 글에서는 전역 스코프, 지역 스코프, 블록 스코프, 클로저의 기본 개념과 활용 방법에 대해 배웠습니다. 다음 글에서는 객체 기초에 대해 알아보겠습니다.

다음 글에서 만나요!