스코프를 활용한 코드 구조화

13 Sep 2023

javascript

코드를 구조화하는 것은 코드의 가독성과 재사용성을 향상시키는 중요한 요소입니다. 스코프(scope)는 변수와 함수의 유효 범위를 결정하는데 사용되며, 코드를 구조화하는 데에도 유용하게 활용할 수 있습니다.

스코프를 활용한 코드 구조화를 위해 다음과 같은 방법들을 살펴보겠습니다:

함수 스코프(Function Scope): 함수를 사용하여 코드를 그룹화하고 스코프를 만들 수 있습니다. 함수 내에서 선언된 변수들은 해당 함수 내에서만 유효하며, 외부에서 접근할 수 없습니다. 이를 활용하여 코드의 일부분을 응집력있게 그룹화할 수 있습니다.

function calculateArea(radius) {
  const PI = 3.14159; // 함수 스코프 변수
  const area = PI * radius * radius;
  return area;
}

console.log(calculateArea(5)); // 78.53975
console.log(PI); // ReferenceError: PI is not defined

모듈 스코프(Module Scope): 자바스크립트 모듈 시스템을 활용하여 코드를 모듈로 분리할 수 있습니다. 모듈은 자신만의 독립적인 스코프를 가지며, 모듈 내에서 정의된 변수와 함수들은 해당 모듈 내에서만 접근 가능합니다. 이를 통해 코드 파일의 크기를 줄이고, 코드를 더욱 재사용 가능하도록 구조화할 수 있습니다.

// math.js 모듈
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js 모듈
import { add, subtract } from 'math.js';

console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2

블록 스코프(Block Scope): let과 const 키워드를 사용하여 블록 스코프 변수를 만들 수 있습니다. 블록 스코프 변수는 해당 블록 내에서만 유효하며, 블록을 벗어나면 접근할 수 없습니다. 이를 활용하여 반복문이나 조건문과 같은 코드 블록 내에서만 사용되는 변수를 만들 수 있습니다.

function calculateArea(radius) {
  if (radius > 0) {
    let PI = 3.14159; // 블록 스코프 변수
    let area = PI * radius * radius;
    console.log(area); // 78.53975
  }
  console.log(area); // ReferenceError: area is not defined
}

calculateArea(5);

스코프를 활용하여 코드를 구조화하면 변수와 함수의 충돌을 방지하고, 재사용 가능한 코드를 작성할 수 있습니다. 적절한 스코프를 사용하여 코드를 구조화하는 것은 프로그램의 유지 보수성과 확장성을 향상시킬 수 있는 중요한 요소입니다.

#스코프 #자바스크립트