자바스크립트 이론 : 함수와 스코프

자바스크립트에서 핵심적인 요소 중 하나인 함수와 스코프에 대해 알아보겠습니다. 이 두 가지는 자바스크립트의 강력한 기능을 제공하며, 코드를 작성하고 이해하는 데 있어서 핵심적인 역할을 합니다.

함수: 코드의 조각

함수는 코드를 조직하고 재사용 가능한 단위로 만들어주는 핵심적인 개념입니다. 자바스크립트에서 함수는 function 키워드를 사용하여 정의됩니다. 간단한 함수의 예제를 통해 시작해보겠습니다.

 

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('World');

 

이 예제에서 greet 함수는 인자 name을 받아와서 해당하는 인사말을 콘솔에 출력합니다. 함수를 호출할 때 전달되는 값에 따라 다양한 결과를 얻을 수 있습니다.

스코프: 변수의 유효 범위

다음으로, 스코프는 변수의 유효 범위를 나타내는 중요한 개념입니다. 자바스크립트에서 변수는 전역 스코프와 지역 스코프로 나뉩니다.

 

let globalVar = 'I am global';

function scopeExample() {
  let localVar = 'I am local';
  console.log(globalVar); // 전역 변수에 접근 가능
  console.log(localVar);  // 지역 변수에 접근 가능
}

scopeExample();
console.log(globalVar); // 전역 변수에 접근 가능
console.log(localVar);  // 오류! 지역 변수에 접근 불가능

 

 

이 예제에서 globalVar는 전역 스코프에 선언되어 어디서든 접근할 수 있습니다. 반면에 localVar는 함수 내에서만 유효하므로 함수 외부에서 접근하면 오류가 발생합니다.

클로저: 함수와 스코프의 아름다운 조화

함수와 스코프는 함께 사용될 때 특별한 효과를 낼 수 있습니다. 클로저는 이 두 가지의 조합으로 만들어지며, 함수가 자신의 스코프 외부의 변수에 접근할 수 있는 능력을 나타냅니다.

 

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

  function innerFunction() {
    console.log(outerVar);
  }

  return innerFunction;
}

const closureExample = outerFunction();
closureExample(); // 'I am from the outer function' 출력

 

이 예제에서 innerFunction은 외부 함수인 outerFunction의 스코프에 접근할 수 있습니다. 이는 나중에 closureExample을 호출할 때 외부 변수에 여전히 접근 가능하다는 것을 의미합니다.