지역 변수의 문제점

렐루·2023년 4월 12일
0

변수 선언은 선언문이 어디에 있든 상관없이 가장 먼저 실행.
런타임 이전 단계에서 자바스크립트 엔진에 의해 먼저 실행.

전역 변수에 한정된 것. 함수 내부에서 선언한 변수는 함수가 호출된 직후에 함수 몸체의 코드가 한 줄씩
순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행된다.
함수가 종료되면 함수 내부 선언 변수도 소멸되어 생명 주기가 종료된다.
따라서 함수 내부에서 선언된 지역 변수는 함수가 호출되어 실행되는 동안에만 유효하다.

지역 변수의 생명 주기는 함수의 생명 주기와 일치한다.

함수 몸체 내부에서 선언된 지역 변수의 생명 주기는 함수의 생명 주기와 대부분 일치하지만 지역 변수가 함수보다 오래 생존 경우도 있다.

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름
변수의 생명 주기는 메모리 공간이 확보된 시점부터 메모리 공간이 해제되어 가용 메모리 풀에 변환되는 시점.

함수 내부에서 선언된 지역 변수는 함수가 생성한 스코프에 등록된다. 물리적인 실체 렉시컬 스코프

할당된 메모리 공간은 더 이상 그 누구도 참조하지 않을 때 가비지 콜렉터에 의해 해제되어 가용 메모리 풀에 반환된다. 즉 누군가가 메모리 공간을 참조하고 있으면 해제되지 않고 확보된 상태로 남아 있게 된다.

호이스팅은 스코프 단위로 동작한다.
전역은 전역에서 유효, 지역 변수는 지역 스코프의 선두로 끌어 올려진 것처럼 동작.
호이스팅 변수 선언이 스코프의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유의 특징을 말한다.

전역 변수의 생명 주기

전역 코드는 명시적인 호출 없이 실행
var 키워도로 선언한 전역 변수는 전역 객체의 프로퍼티가 된다. 전역 변수의 생명 주기가 전역 객체의 생명 주기와 일치한다는 것을 말한다.

전역 객체

코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체다.
클라이언트 사이드 환경 : window, 서버 사이드 환경 : global 객체를 의미한다.
환경에 따라 전역 객체를 가리키는 다양한 식별자에서 globalThis 로 통일되었다.

전역 객체는 표준 빌트인 객체와 환경에 따른 호스트 객체, 그리고 var 키워드로 선언한 전역 변수와 전역 함수를 프로퍼티로 갖는다.

전역 변수의 문제점

모든 코드에 대해 암묵적 결합을 허용하는 것. 유효 범위가 클수록 코드의 가독성은 나빠지고 의도치 않은 상태 변경 위험성도 높아진다.
생명 주기가 길어 메모리 리소스도 오랜 기간 소비한다.
스코프 체인 상에 종점에 존재 => 전역 변수의 검색 속도가 가장 느리다.
네임스페이스 오염 => 파일이 분리되어도 하나의 전역 스코프를 공유한다.

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

즉시 실행 함수

함수 정의와 동시에 호출되는 즉시 실행 함수는 단 한번만 호출된다.
모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다.

네임스페이스 객체

전역에 네임스페이스 역할을 담당할 객체를 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티에 추가하는 방법

모듈 패턴

클래스를 모방해서 관련이 있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만든다
모듈 패턴은 클로저를 기반으로 동작한다.
전역 변수의 억제는 물론 캡슐화까지 구현할 수 있다.

캡슐화 : 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 동작할 수 있는 메서드를 하나로 묶는 것.
캡슐화는 객체의 특정 프로퍼티나 메서드를 감출 목적으로 사용하기도 한다. => 정보 은닉

const Counter = (function () {
  let num = 0;

  return {
    increase() {
      return ++num;
    },
    decrease() {
      return --num;
    },
  };
})();

console.log(Object.keys(Counter)); // [ 'increase', 'decrease' ]

console.log(Counter.increase()); // 1 
console.log(Counter.decrease()); // 0
profile
프론트 공부중입니다!

0개의 댓글