14 - 전역 변수의 문제점

2022. 9. 2.·🎨 프론트엔드 공부/JS & TS

모던 자바스크립트 Deep Dive 정리

전역 변수의 문제점

1. 암묵적 결합

▶모든 코드가 전역 변수를 참조하고 변경할 수 있음

▷변수의 유효범위가 크면 클수록 코드의 가독성은 나빠지고 의도치 않게 상태가 변경될 위험 높아짐

 

2. 긴 생명 주기

▶메모리 리소스를 오랜 기간 소비

 

3. 스코프 체인 상에서 종점에 존재

▶전역 변수는 가장 마지막에 검색되므로, 변수 검색 속도가 느려짐

 

4. 네임 스페이스 오염

▶파일이 분리되어 있어도 같은 이름의 전역변수나 전역함수가 같은 스코프에 존재할 경우 예상치 못한 에러 발생할 수 있음

 

전역 변수의 사용을 억제하는 방법

1. 즉시 실행 함수

▶모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다

▷예시

 

(function () {
  var foo = 10; // 즉시 실행 함수의 지역 변수
  // ...
}());

console.log(foo); // ReferenceError: foo is not defined

 

▷전역 변수를 생성하지 않으므로 라이브러리 등에 사용된다

 

2. 모듈 패턴

▶클로저를 기반으로 전역 변수 억제 및 캡슐화까지 구현 가능

▶캡슐화

▷프로퍼티(객체의 상태)와 메서드(프로퍼티를 조작하는 동작)를 하나로 묶는 것

▷자바스크립트에는 public, private, protected 등의 접근 제한자가 없기 때문에 (타입스크립트에는 있음)

종종 사용됨

▷예시

 

var Counter = (function () {
  // private 변수
  var num = 0;

  // 외부로 공개할 데이터나 메서드를 프로퍼티로 추가한 객체를 반환한다.
  return {
    increase() {
      return ++num;
    },
    decrease() {
      return --num;
    }
  };
}());

// private 변수는 외부로 노출되지 않는다.
console.log(Counter.num); // undefined

console.log(Counter.increase()); // 1
console.log(Counter.increase()); // 2
console.log(Counter.decrease()); // 1
console.log(Counter.decrease()); // 0

 

▷return 뒤의 반환하는 객체에 추가하지 않으면 외부에서 접근할 수 없는 private member가 된다

 

3. ES6 모듈

▶ES6 모듈에서는 전역 변수를 사용할 수 없다

▷ES6 모듈 사용을 위해 script 태그에 type="module" 어트리뷰트를 추가해줘야 한다

▷예시

 

<script type="module" src="lib.mjs"></script>
<script type="module" src="app.mjs"></script>

 

▷모듈의 확장자는 mjs로 작성

▷트랜스파일리이나 번들링 필수

▷미지원하는 브라우저도 있으므로 아직까지는 webpack 등의 모듈 번들러 사용이 일반적임

'🎨 프론트엔드 공부/JS & TS' 카테고리의 다른 글
  • 16 - 프로퍼티 어트리뷰트
  • 15 - let, const 키워드와 블록 레벨 스코프
  • 13 - 스코프
  • 12 - 함수
지식물원
지식물원
지식이 자라는 식물원!
  • 지식물원
    지식물원
    지식물원
  • 전체
    오늘
    어제
    • 분류 전체보기 (514) N
      • 🎨 프론트엔드 공부 (251) N
        • JS & TS (90) N
        • HTML & CSS (22)
        • React & Next (49)
        • Vue & Nuxt (22)
        • 기타 (68)
      • 🤓 기술 학습 & 공부 기록 (116)
        • Node.js (0)
        • Python (37)
        • 백엔드 (0)
        • 딥러닝 (1)
        • 컴퓨터 일반 (72)
        • 개발 인프라 (6)
      • 👨‍💻 프로젝트 경험 (6)
        • Work (0)
        • Toy (6)
      • ⚙️ 개발 팁 & 노하우 (21)
        • 프론트엔드 (6)
        • 기타 (15)
      • ☕️ 커리어 & 인터뷰 준비 (88)
        • 코딩 테스트 (88)
      • 📰 기술 트렌드 & 생각 정리 (4)
      • 📚 기타 (25)
        • 마케팅 (15)
        • 비개발서적 (10)
  • 블로그 메뉴

    • 태그
  • 링크

  • 공지사항

    • 모바일 접속 시 코드 하이라이팅 깨질 때
  • 인기 글

  • hELLO· Designed By정상우.v4.10.3
지식물원
14 - 전역 변수의 문제점
상단으로

티스토리툴바