javascript 자바스크립트 var app = app || {} 의미

자바스크립트를 잘하는 개발자가 뭔가 스크립트를 모듈로 짤때 이러한 문법을 봤을것이다.

|| 는 OR를 의미한다.

var app = app || {} 중에서 

빨간색 app부분이  기존a pp객체가 있으면 유지하고 없으면 app을 {}로 빈 객체를 할당한다. 

var app = app || {} 는      

if(!app) { 

  var app={};

}

와 같은 뜻이다.

 

왜 사용할까? 

// apple.js 파일 내용
var app = {};

app.apple = function() {
  alert('I like Aplle!');
};

// orange.js 파일 내용
var app = {};

app.orange = function() {
  alert('I like Orange!');
};

한 html 파일에 첫줄 apple.js 랑 두번째줄 orange.js파일이 임포트 되있다고 할 때 html이 로드되면  apple.js의 apple함수는 사용 할 수없다. 이유는 orange.js에서 app객체를 재정의 하기 때문이다. 따라서 var app = app || {} 을 해서 app객체가 있다면 app에 다시 할당한다. 

// apple.js 파일 내용
var app = app || {};

app.apple = function() {
  alert('I like Aplle!');
};

// orange.js 파일 내용
var app = app || {};

app.orange = function() {
  alert('I like Orange!');
};

이렇게 두 js파일에 초기화만 바꿔주면 둘다 같은 app객체의 apple, orange함수를 사용 할 수 있다.

결론은 .js 파일 상단에서 볼 때 이 특정 패턴은 네임스페이스 , 즉 전역 객체를 남용하지 않고 함수와 변수를 생성할 수 있는 명명된 객체 를 생성하는 데 사용된다.