NameSpace(네임스페이스)

nais·2021년 12월 7일
0
post-thumbnail

네임스페이스를 공부하게된 계기

작은 규모의 HTML/CSS 프로젝트 시에 팀원들과 소스를 합쳤을 때 HTML 태그의 class 명칭이 겹쳐서 원하는 태그가 제대로 동작하지 않은 경험이 있었습니다.

자바스크립트의 협업 시에도 변수 혹은 함수들을 다른 사람들과 겹치지 않도록 하기 위해서는 어떠한 방법이 있는지 알아본 결과가 바로 네임스페이스(네임스페이스 패턴) 이었습니다.

네임스페이스란?

네임스페이스는 이름이 존재하는 공간이라고 보시면 될거같습니다.
만약에 김철수라는 동명 이인이 있다고 할 때 서울에 사는 김철수씨와 전주에 사는 김철수씨라는 서로 다른 지역으로 구분할 수 있습니다

이는 두 사람이 서로 다른 지역에 (공간에) 존재했기 때문에 쉽게 구별 가능합니다

이처럼 자바스크립트에서도 프로그램을 개발하거나,협업을 하다보면 전역 변수를 선언하게 되면 아까 말씀드렸던 동명이인들 즉 변수, 함수 , 객체 등을 정의 하다 충돌할수 있습니다 이러한 경우를 대비해서 이름이 존재하는 공간을 정의하는 기능을 제공하는 것이라는 걸 알게 되었습니다.

👍 수 많은 함수, 객체, 변수들의 코드 내의 이름 충돌을 막아주는 방법!!

C++ 이나 Java 같은 경우에는 아예 namespace라는 키워드를 이용해서 변수, 함수 ,객체의 네임스페이스를 따로 지정할 수 있지만 자바스크립트에는 이러한 기능이 존재하지 않습니다 그래서 이와 비슷하게 개념을 구현할수 있는 방법들이 있습니다

네임스페이스의 구현방법

1)즉시 실행 함수

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

(function () {
  var foo = 10;
})();


console.log(foo); 

실행결과

-> 전역변수가 생성되지 않아서 foo를 출력할 수 없음을 확인했습니다

2)네임 스페이스 함수 역할 담당 객체 생성

선언된 객체에 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가하는 방법입니다 !!

var NAMESPACE = {};
NAMESPACE.name = "sian";
console.log(NAMESPACE.name);

실행결과

그런데 깊은 계층으로 구성할 경우에는 가독성이 떨어질 것 같다는 생각이 들었습니다

ex) 12월의 데일리 테스트의 합계를 저장하는 프로퍼티를 언더바 구분 형식으로 변환 할 경우

NAMESPACE.December_daily_test_total  

3) 모듈 패턴

  • 클래스를 모방해서 관련있는 변수와 함수를 모아서 즉시실행함수로 감싸는 하나의 모듈입니다

  • 모듈 패턴의 특징은 전역 변수 억제는 물론 캡슐화까지 구현 할 수 있습니다

캡슐화란(encapsulation) 뭘까?

객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것입니다

👩‍🏫 클로저를 활용한 모듈 패턴

  • 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조 할 수 있다 -> 이러한 중첩 함수를 클로저 라고 부릅니다
  • 변할 수 있는 값을 안전하게 변경하고 유지하기 위해서 사용
  • 의도치않게 변경되는 사례를 막고 특정 함수에게만 상태 변경을 허용한다

const counter = (function() {
  let counter = 0;
  
  return function(predicate){ // 전달받은 함수로 상태값 변경을 위임한다 
    
    counter = predicate(counter);
    return counter;
  };
})(); 


function increase(n){
  return ++n;
}

function decrease(n){
  return --n;
}

// 즉시 실행 함수로  독립적인 (1개의) 렉시컬 환경이 공유되고 있다 
console.log(counter(increase));//1
console.log(counter(increase));//2

console.log(counter(decrease));//1
console.log(counter(decrease));//0  counter 의 값이 공유되고 있다 

4) ES6 모듈

모듈과 번들러 도입 방법을 배운 후 기입 예정

결론

파일이 분리되어 있는 상태라도 자바스크립트의 특성상 전역 스코프를 공유한다는 점에서 파일 내 동일한 이름으로 명명된 전역 변수나 전역 함수가 같은 스코프 내에 존재할 경우 예상치 못한 에러를 겪을 수 있으므로 네임스페이스를 잘 구현하여 막아보도록하자

Reference

모던자바스크립트 - 전역변수의 문제점

profile
왜가 디폴트값인 프론트엔드 개발자

0개의 댓글