몽상실현개발주의

[Udemy/CleanCode] 2.07 전역 공간 사용 최소화 본문

Language/Javascript

[Udemy/CleanCode] 2.07 전역 공간 사용 최소화

migrationArc 2022. 9. 8. 11:24

  • 전역공간
    • 최상위 공간
    • Gobal & Window
      • Browser 환경 - window
      • Node 환경 - Global

 

 

  • 전역공간 사용 문제점
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./index.js"></script>
    <script src="./index2.js"></script>
  </body>
</html>
var globalVar = "global";

console.log(globalVar);

// 런타임 환경 (실행하는 환경) 도 변경 가능
console.log(window.globalVar);

var setTimeout = "setTimeout";

function setTimeout() {
  console.log("function");
}

const array = [10, 20, 30];
for (var index = 0; index < array.length; index++) {
  const element = array[index];
}
// 파일을 나눈다고 Scope 가 나뉘지 않음
// 접근가능
console.log(window.globalVar);

// 접근가능
console.log(globalVar);


// setTimeout 함수가 오염됨
setTimeout(() => {
  console.log("1초");
}, 1000);

- 전역공간에 쉽게 접근이 가능

- 런타임 환경에서의 전역공간 환경 변경 가능

 

 

 

  • 전역공간 오염 방지 방법
    • IIFE - 즉시 실행 함수
    • module
    • Closure
    • const & let

 

  • 요약
    • 어디서나 접근이 가능하기 때문 전역 공간 오염을 고려해야 함
      • 런타임 환경 분리가 되어있지 않음
    • 전역변수 사용 X
    • 지역변수 사용 O
    • window / global 영역을 조작 X
    • const, let 사용
    • IIFE, Module, Closure 사용
저작자표시

'Language > Javascript' 카테고리의 다른 글

[Udemy/CleanCode] 2.09 호이스팅 주의하기  (0) 2022.09.08
[Udemy/CleanCode] 2.08 임시변수 제거하기  (0) 2022.09.08
[Udemy/CleanCode] 2.06 function scope & block scope  (0) 2022.09.08
[Udemy/CleanCode] 2.05 var 를 지양하자  (0) 2022.09.08
[Udemy/CleanCode] 1.03 Javascript Everywhere  (0) 2022.09.07
'Language/Javascript' Related Articles more
Comments