자바스크립트 함수와 스코프

함수

함수는 일련의 작업을 수행하는 코드 블록이다. 자바스크립트 함수와 스코프의 개념을 이해하면 변수의 유효 범위를 효과적으로 관리할 수 있고, 모듈화된 코드를 작성할 수 있다.

function functionName(parameter1, parameter2, ...) {
  // 함수 내용
  // ...
  return result;
}

위의 코드에서 functionName은 함수의 이름이며, parameter1, parameter2 등은 함수에 전달되는 매개변수이다.

함수 내용은 중괄호({}) 안에 작성되며, 함수가 반환해야 하는 결과는 return 키워드를 사용하여 지정한다.

 

함수의 스코프

스코프는 변수 및 함수의 유효 범위를 나타낸다. 자바스크립트에서는 함수에 따라 스코프가 결정되며, 스코프는 전역 스코프와 지역 스코프로 나뉜다.

전역 스코프

함수 밖에서 정의된 변수는 전역 스코프에 속한다.

전역 스코프에 선언된 변수는 어디서든지 접근할 수 있다.

let globalVariable = '전역 변수';

 

지역 스코프

함수 내에서 정의된 변수는 해당 함수의 지역 스코프에 속한다.

지역 스코프에 선언된 변수는 함수 내에서만 접근할 수 있다.

function myFunction() {
  let localVariable = '지역 변수';
  console.log(globalVariable); // 전역 변수에 접근 가능
  console.log(localVariable); // 지역 변수에 접근 가능
}

 

console.log(globalVariable); // 전역 변수에 접근 가능
console.log(localVariable); // 에러: 지역 변수에 접근 불가

globalVariable은 전역 스코프에 선언되었으므로 어디서든 접근할 수 있다.

반면에 localVariable은 myFunction 지역 스코프 내에서 선언된 지역 변수이기 때문에 함수 외부에서는 접근할 수 없다.

클로저와 스코프

클로저는 함수와 그 함수가 선언될 당시의 스코프의 조합이다.

클로저를 사용하면 함수 내에서 선언한 변수를 호출하여 외부에서 접근할 수 있게 된다.

function outerFunction() {
  let outerVariable = '외부 변수';

  function innerFunction() {
    console.log(outerVariable); // 외부 변수에 접근 가능
  }

  return innerFunction;
}

let closure = outerFunction();
closure(); // 출력 결과: 외부 변수

innerFunction은 outerFunction 내부에서 선언되었고, outerVariable에 접근한다.

outerFunction은 innerFunction을 반환하고, 반환된 함수를 closure 변수에 할당한 후 호출하면 outerVariable에 접근할 수 있다.

 

클로저의 활용

아래는 클로저를 사용하여 외부 변수에 접근하고 조작하는 예시이다.

// counter 함수 정의
function counter() {
  let count = 0;

  // increment 함수 정의
  function increment() {
    count++;
    console.log(count);
  }

  // decrement 함수 정의
  function decrement() {
    count--;
    console.log(count);
  }

  // increment와 decrement 함수를 가진 객체를 반환
  return {
    increment: increment,
    decrement: decrement
  };
}

// counter 함수를 호출하여 counterInstance 객체 생성
let counterInstance = counter();

counterInstance.increment(); // 출력 결과: 1
counterInstance.increment(); // 출력 결과: 2
counterInstance.decrement(); // 출력 결과: 1

counter 함수는 두 개의 내부 함수 increment와 decrement를 정의한다. increment와 decrement 함수는 count라는 외부 변수에 접근할 수 있다. counter 함수는 이 두 함수를 속성으로 가진 객체를 반환하게 된다.

그리고 counter 함수를 호출하여 반환된 객체를 counterInstance 변수에 할당한 후, increment와 decrement 함수를 호출한다. 이 때, increment와 decrement 함수는 클로저로서 외부 변수 count에 접근하여 값을 증가시키거나 감소시키며, 변경된 값을 출력한다.

코드를 실행하면 increment 함수를 호출할 때마다 count 값이 증가하고, decrement 함수를 호출할 때마다 count 값이 감소하는 것을 확인할 수 있다.