BKJang
commented
5 years ago 네임스페이스 패턴(Namespace Pattern)과 IIFE
전역 변수를 많이 쓰면 안좋다고 흔히들 말한다. 그 이유를 알 수 있는 간단한 예를 보자.
var x = 100;
function test() {
x = 10;
console.log('10이 나오겠지?', x);
}
test();
console.log('100을 출력해볼까 ?', x);
/*
10이 나오겠지? 10
100을 출력해볼까 ? 10
*/지역 스코프에서 전역변수를 참조할 수 있으므로 전역변수의 값도 변경할 수 있다. 내부 함수의 경우에는, 전역변수는 물론 상위 함수에서 선언한 변수에 접근/변경이 가능하다.
프로젝트가 클수록, 협업이 이루어질수록 전역 변수가 많아지면 원하는 결과가 아닌 다른 결과가 나타날 수 있다.
네임스페이스 패턴(Namespace Pattern)
네임스페이스 패턴은 말 그대로 이름 공간을 선언하여 다른 공간과 구분하는 패턴이라고 보면 된다.
var APP_GLOBAL = {
name : 'BKJang',
age : '25',
getInfo : function() {
console.log('name :', this.name, 'age :', this.age);
}
}
console.log(APP_GLOBAL); //{name: "BKJang", age: "25", getInfo: ƒ}
console.log(APP_GLOBAL.name, APP_GLOBAL.age); //BKJang 25
APP_GLOBAL.getInfo(); //name : BKJang age : 25이처럼 전역 변수 사용을 위해 전역 객체 하나를 만들어 사용하는 것이다.
즉시 실행 함수 표현식(IIFE, Immediately-Invoked Function Expression)
즉시 실행 함수를 사용하면 함수가 실행되고 전역에서 사라진다. 이 방법으로 라이브러리를 많이 만들곤 한다.
(function moduleFunction() {
var a = 3;
function helloWorld(){
console.log('Hello');
}
helloWorld(); //Hello
})();
helloWorld(); //Uncaught ReferenceError: helloWorld is not defined즉시실행함수가 실행되고 전역에서 사라지기 때문에 그 밖에선 출력 값이 에러가 발생하는 것을 볼 수 있다.
var singleton = (function () {
var a = 3;
function helloWorld(){
console.log('Hello');
}
return {
a : a,
sayHello: helloWorld
}
})();
singleton.sayHello(); //Hello
console.log(singleton.a); //3
위와 같이 반환 값을 변수에 담아 전역 변수를 한 번 만 사용하여 전역 변수의 사용을 줄일 수도 있다.
:pray: Reference