6.5 전역 객체

📢 전역 객체를 사용하면 어디서나 사용 가능한 변수나 함수를 만들 수 있다.

 

◾️ 전역 객체는 언어 자체나 호스트 환경에 기본 내장되어 있는 경우가 많다. 

◾️ 브라우저 환경 → window

◾️ Node.js 환경 → global

◾️ 전역 객체 이름의 표준화 → globalThis

 

◾️ 전역 객체의 모든 프로퍼티는 직접 접근할 수 있다. 

console.log('Hello'); // Hello

window.console.log('Hello'); // Hello

◾️ 브라우저에서 let이나 const가 아닌 var로 선언한 전역 함수나 전역 변수는 전역 객체의 프로퍼티가 된다. 

◾️ 권장하는 방법은 아님 

var gVar = 5;

console.log(window.gVar); // 5

◾️ let을 사용하면 전역 객체를 통해 변수에 접근할 수 없다. 

let gVar = 5;

console.log(window.gVar); // 5

◾️ 변수를 전역에서 사용할 수 있게 하려면 전역 객체에 직접 프로퍼티를 추가한다. 

window.currentUser = {
  name: 'suzu'
};

console.log(currentUser.name); //suzu

// 지역변수에 currentUser가 있다면
// 지역변수와 충돌 없이 전역 객체 window에서 이를 명시적으로 가져올 수 있다. 
console.log(window.currentUser.name); // suzu

◾️ 전역 변수는 되도록 사용하지 않는 것이 좋다. 

◾️ 함수를 만들 땐 외부 변수나 전역 변수를 사용하는 것 보다 input 변수를 받고 이를 이용해 output을 만들어내게 해야한다. 

 

폴리필 사용하기

◾️ 전역 객체를 이용해 현재 사용중인 브라우저가 최신 자바스크립트 기능을 지원하는지 여부를 확인 할 수 있다. 

if(!window.Promise){
  console.log('구식 브라우저 사용 중');
}

◾️ 명세에는 있는 기능이지만 해당 기능을 지원하지 않는 오래된 브라우저를 사용하고 있다면 직접 함수를 만들어 전역 객체에 추가하는 방식으로 폴리필을 만들 수 있다. 

if(!window.Promise){
  window.Promise = ... // 모던 자바스크립트에서 지원하는 기능을 직접 구현함
}

 

📝 요약

◽️ 전역 객체를 사용하면 어디서든 접근 가능한 변수를 만들 수 있다. 
◽️ 전역 객체엔 Array와 같은 내장 객체, window.innerHeight같은 브라우저 환경 전용 변수등이 저장되어 있다.
◽️ 전역 객체는 globalThis라는 보편적인 이름으로 불린다. (비 크로미움 기반 브라우저에선 지원X)
◽️ 프로젝트 전체에서 꼭 필요한 변수만 전역 객체에 저장하도록 하고, 전역 변수는 가능한 한 최소한으로 사용하는 편이 좋다.
◽️ 모듈을 사용하고 있지 않다면, 브라우저에서 var로 선언한 전역 변수는 전역 객체의 프로퍼티가 된다. 
◽️ 이해하기 쉽고 요구사항 변경에 쉽게 대응할 수 있는 코드를 구현하려면, window.x 처럼 전역 객체의 프로퍼티 직접 접근하는 편이 좋다. 

 

---

📝 오늘 새롭게 배운 내용 📝

 

✅ 전역 - global

✅ 전역 변수가 꼭, 굳이 필요하다면 전역객체를 만들어서 사용하자. window.xxx

지역변수랑 이름이 겹쳐도 window를 붙여서 사용하면 된다.

✅ 그런데 웬만해서 전역변수는 사용하지 않는 편이 좋다. 

✅ 전역 객체를 이용하면 현재 브라우저가 최신 기능을 지원하는지 알 수 있다. 

 

 

📌 [JAVASCRIPT_INFO 전역 객체]

전역 객체