icon안동민 개발노트

함수와 스코프

 자바스크립트에서 함수와 스코프는 프로그램의 구조와 동작을 결정짓는 핵심 개념입니다.

 이 절에서는 함수의 정의와 사용, 그리고 스코프의 개념과 동작에 대해 자세히 알아보겠습니다.

함수 정의와 호출

 자바스크립트에서는 세 가지 주요 방식으로 함수를 정의할 수 있습니다.

 1. 함수 선언식

function greet(name) {
  return `Hello, ${name}!`;
}

 2. 함수 표현식

const greet = function(name) {
  return `Hello, ${name}!`;
};

 3. 화살표 함수 (ES6+)

const greet = (name) => `Hello, ${name}!`;

 함수 호출

console.log(greet("Alice")); // 출력: Hello, Alice!

매개변수와 인수

  • 매개변수(Parameter) : 함수 정의에서 사용되는 변수
  • 인수(Argument) : 함수 호출 시 전달되는 실제 값

 기본 매개변수

 ES6부터 매개변수에 기본값을 설정할 수 있습니다.

function greet(name = "Guest") {
  return `Hello, ${name}!`;
}
 
console.log(greet()); // 출력: Hello, Guest!

 나머지 매개변수

 함수에 전달된 여러 인수를 배열로 받을 수 있습니다.

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
 
console.log(sum(1, 2, 3, 4)); // 출력: 10

반환 값

 함수는 return 문을 사용하여 값을 반환할 수 있습니다.

 명시적인 return이 없으면 undefined를 반환합니다.

 여러 값을 반환하려면 객체나 배열을 사용할 수 있습니다.

function getPersonInfo() {
  return {
    name: "Alice",
    age: 30,
    city: "New York"
  };
}
 
const { name, age } = getPersonInfo();

스코프

 스코프는 변수의 접근성과 생존 기간을 결정합니다.

  1. 전역 스코프 : 어디서든 접근 가능한 변수
  2. 함수 스코프 : 함수 내에서만 접근 가능한 변수
  3. 블록 스코프 (ES6+) : let과 const로 선언된, 블록 내에서만 접근 가능한 변수
let globalVar = "I'm global";
 
function exampleFunction() {
  let functionVar = "I'm function-scoped";
  
  if (true) {
    let blockVar = "I'm block-scoped";
    var functionScopedVar = "I'm function-scoped too";
  }
 
  console.log(blockVar); // 오류: blockVar is not defined
  console.log(functionScopedVar); // 정상 작동
}
 
console.log(globalVar); // 정상 작동
console.log(functionVar); // 오류: functionVar is not defined

스코프 체인과 렉시컬 스코프

 자바스크립트는 렉시컬 스코프를 사용합니다.

 이는 함수가 정의된 위치에 따라 스코프가 결정된다는 의미입니다.

 스코프 체인은 내부 스코프에서 외부 스코프로 변수를 찾아가는 과정입니다.

let x = 10;
 
function outer() {
  let y = 20;
  
  function inner() {
    let z = 30;
    console.log(x + y + z);
  }
  
  inner();
}
 
outer(); // 출력: 60

클로저

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

 이를 통해 private 변수와 같은 개념을 구현할 수 있습니다.

function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}
 
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

 이 예제에서 counter 함수는 createCounter의 렉시컬 환경에 있는 count 변수에 계속 접근할 수 있습니다.

호이스팅

 호이스팅은 변수와 함수 선언이 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 자바스크립트의 특성입니다.

console.log(x); // undefined (오류가 아님)
var x = 5;
 
// 위 코드는 실제로 다음과 같이 해석됩니다.
// var x;
// console.log(x);
// x = 5;

 함수 선언식은 전체가 호이스팅되지만, 함수 표현식은 변수 선언만 호이스팅됩니다.

 호이스팅으로 인한 문제를 방지하기 위한 Best Practices

  • let과 const를 사용하여 변수 선언 (TDZ로 인해 호이스팅 문제 방지)
  • 함수와 변수를 사용하기 전에 선언
  • 함수 표현식 사용 고려

즉시 실행 함수 표현식 (IIFE)

 IIFE는 정의되자마자 즉시 실행되는 함수입니다.

(function() {
  let privateVar = "I'm private";
  console.log(privateVar);
})();

 IIFE의 주요 사용 이유

  • 변수를 전역 스코프로부터 보호
  • 모듈 패턴 구현
  • 비동기 코드 실행

 자바스크립트의 함수와 스코프는 언어의 핵심 개념으로, 효과적인 코드 구성과 실행에 중요한 역할을 합니다. 함수는 코드의 재사용성과 모듈화를 가능하게 하며, 다양한 정의 방식을 통해 유연한 프로그래밍을 지원합니다.

 스코프는 변수의 가시성과 생명주기를 제어하여 코드의 안정성과 예측 가능성을 높입니다. 특히 렉시컬 스코프와 클로저의 이해는 고급 자바스크립트 프로그래밍을 위해 필수적입니다.

 호이스팅은 자바스크립트의 독특한 특성 중 하나로, 이를 제대로 이해하고 관리하는 것이 중요합니다. let과 const의 사용, 그리고 선언을 사용 전에 하는 습관은 호이스팅 관련 문제를 예방하는 데 도움이 됩니다.

 IIFE는 모듈화와 변수 보호에 유용한 패턴으로, 특히 레거시 코드나 라이브러리 개발에서 자주 사용됩니다. 하지만 최신 자바스크립트에서는 모듈 시스템을 사용하는 것이 더 권장됩니다.

 함수와 스코프의 올바른 이해와 사용은 깔끔하고, 유지보수가 용이하며, 효율적인 자바스크립트 코드를 작성하는 데 핵심적입니다. 이러한 개념들을 마스터함으로써, 개발자는 더 복잡한 애플리케이션을 구축하고 더 고급 자바스크립트 기술을 활용할 수 있게 됩니다.

이전으로다음으로