[클린코드 자바스크립트] 변수 다루기

☑️ 전역 공간의 사용 최소화

전역 공간은 코드가 실행되는 최상위 환경을 말하며 브라우저인지 node.js인지에 따라 이 환경으로 어디서든 접근이 가능하기 때문에 이 전역 공간을 더럽히게 되면 예상치 못한 버그가 발생하기 쉽다.

• browser(window)

• node.js(global)

오류1: 파일로 코드를 구분하더라도 전역으로 선언된 변수명이 동일한 경우, 서로의 코드에 영향을 미쳐 예상치 못한 버그를 발생시킬 수 있다.

// 상황1. 파일명으로 코드를 구분한 상황에서 index1.js에 전역으로 선언된 변수를 index2.js에서 실행할 경우, 어떤 오류도 발생되지 않고 실행된다. 이는 코드가 파일 기준으로 나뉘는게 아니고 스코프 기준으로 나뉘기 때문이다.
 
// index1.js : 헤더 
var globalVar = 'globalVar';
 
// index2.js : 바디
console.log(globalVar); // 'globalVar'

오류 2: 브라우저 WEB API로 정의된 예약어를 전역 변수로 선언, 할당할 경우. 코드 작성시에는 문제가 없으나 runtime 중 오류가 발생할 수 있다.

// 상황2. 브라우저 WEB API로 정의된 예약어를 전역 변수로 선언할 경우. JS 자체에서는 오류로 인식되지 않아 실제 WEB API를 실행해야 하는 상황에서 예상치 못한 오류가 발생할 수 있다.
 
// index1.js : 헤더 
var setTimeOut = 'setTimemout';
 
// index2.js : 바디
setTimeout(() => console.log('1초'), 1000); // typeError

요약: 1)전역 변수를 사용하지 않고 2)지역 변수만 사용하며 3)window 혹은 global에 접근하여 조작하지 않아야 한다. 이러한 것은 4)const, let을 사용하는 것만으로도 어느정도 해소되는데 마지막으로 5)IIFE나 Module, Closure 개념을 사용하여 scope를 나누는 방식 또한 이러한 전역 공간 사용의 최소화에 도움이 된다.

☑️ 임시변수 제거하기

임시변수란 특정 Scope 안에서 전역변수처럼 활용되는 변수를 말한다. 함수 안에 정의한 변수더라도 함수의 크기가 커지는 상황이 오면 그 안에서 변수를 CRUD 하고 싶어지는 유혹에 빠질 수 있고 이러한 유혹이 추후 여러가지 side effect의 원인이 될 수도 있다.

☑️ 임시변수를 사용할 경우

• 명령형으로 가득한 코드가 되기 쉽다.

• 디버깅이 어려운 코드가 되기 쉽다.

• 추가적인 코드를 작성하기 쉬운 환경을 제공한다. (let, temp...)

기존에는 간단한 함수 로직이었더라도 추후 여러가지 비지니스 상황의 변화로 조금씩 함수를 수정할 필요성이 발생할 수 있다. 그 때 기존의 함수 기능 + 부가적인 기능이 추가되는 형태가 되버리면 기존 함수를 사용하고 있던 곳에서 버그가 발생할 수 있어 아무리 조금만 추가하면 되는 기능이더라도 하나의 함수에서 최소의 기능만 담당하도록 설계하는 것이 중요하다.

// 임수 변수의 CRUD를 최소화하는 예시
// CRUD가 가능한 상태
function getElements () {
  const tempObj = {};
  tempObj.title = document.getElementSelector('.title');
  tempObj.text = document.getElementSelector('.title');
 
  return tempObj;
}
 
// CRUD가 불가능한 상태
function getElements () {
  return {
    title: document.getElementSelector('.title'),
    text: document.getElementSelector('.title'),
  };
}

출처: 클린코드 자바스크립트-장현석