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

var를 지양하자

var를 지양하고 const를 사용하자.

• var : 함수 스코프, 재선언 o, 재할당 o
• let : 블록 스코프, 재선언 x, 재할당 o
• const : 블록 스코프, 재선언 x, 재할당 x

let과 const는 TDZ도 있어 안전하게 코드 작성 가능

var 스코프 예제

전역 스코프까지 영향을 주게 됨.
이유 : var는 함수 스코프인데 if문은 함수가 아니기 때문

var global = '전역';

if(global === '전역'){
	var global = '지역';
  
  	console.log(global); // 지역
}

console.log(global); // 지역

var를 let으로 바꾸면 잘 작동한다.
이유 : let은 블록 스코프이기 때문

let global = '전역';

if(global === '전역'){
	let global = '지역';
  
  	console.log(global); // 지역
}

console.log(global); // 전역

const는 재할당만 금지되고 객체나 배열 같은 레퍼런스 객체들을 조작할 때는 이상이 없다.
(객체나 배열에 접근해서 값을 추가하거나 변경할 수 있음.)
따라서 let 보다 더 안전한 const를 사용하는 것이 좋다.

전역 공간 사용을 최소화하자

전역은 최상위를 뜻하고, 여기에는 브라우저(window)와 NodeJS(global)가 있다.

아래처럼 전역에 변수를 선언할 경우 생기는 문제가 있다.

index.js

var globalVar = 'global';

console.log(globalVar); // 'global'
console.log(window.globalVar); // 'global' -> window 객체에도 저장됨!

다른 파일에서도 접근이 가능하게 된다.
(파일을 나눴는데 코드 스코프가 나뉘지 않음. -> 코드가 모르는 사이 중복될 수 있다!)

index2.js

console.log(globalVar); // 'global'
console.log(window.globalVar); // 'global'

해결 방법

1. 전역 변수를 만들지 않기
2. 지역 변수만 만들기
3. window, global을 조작하지 않기
4. const, let 사용하기
5. IIFE(즉시 실행 함수), Module, Closure 와 같이 스코프를 나누는 방법 사용하기

임시 변수 제거하기

임시 변수 : 스코프 안에서 전역 변수처럼 활용되는 변수

임시 변수도 함수가 커지면 전역 변수와 다름없는 상황이 벌어질 수 있다. (함수가 작으면 괜찮음)

function getElements(){
	const result = {}; // 임시 객체, const라 괜찮을 것 같지만 아님
    
    result.title = document.querySelector('.title');
    result.text = document.querySelector('.text');
    
    return result;
}

개선

임시 객체가 생기면 계속 CRUD가 일어나게 될 가능성 있음.

function getElements(){
    return {
    	title: document.querySelector('.title'),
     	text: document.querySelector('.text'),
    };
}

임시 변수를 가지고 함수 안에서 다양한 연산을 하면 값이 어떻게 바뀔지 예측하기 어려운 문제도 있음.
=> 배열 고차 함수를 활용해 개선

임시 변수를 제거해야 하는 이유

• 명령형으로 가득한 로직이 나옴.
• 어디서 어떻게 잘못되었는지 디버깅이 어려움
• 추가적인 코드를 작성하고 싶은 유혹에 빠질 수 있음(유지 보수가 어려움)

해결책

• 함수 나누기
• 바로 반환하기
• 고차 함수 사용하기(map, filter, reduce)
• 선언형으로 작성하기

호이스팅

: 런타임시 선언을 최상단으로 끌어올려 주는 것.
: var로 선언한 변수가 초기화가 제대로 되어 있지 않았을 때 undefined로 최상단에 끌어올려질 수 있는 것(선언부만 최상단으로 옮겨지는 것)
-> 코드 작성시 예측하지 못한 결과가 발생하는 것

예제

var global = 0;

function outer(){
  console.log(global); // undefined
  var global = 5;
  
  function inner(){
  	var global = 10;
    
    console.log(global); // 10
  }
  
  inner();
  
  global = 1;
  
  console.log(global); // 1
}

outer();

위에서 undefined가 출력되는 이유는?

아래와 같이 동작하기 때문.

  var global;
  console.log(global); // undefined
  global = 5;

함수도 호이스팅 된다.

var sum;

console.log(typeof sum); // function

function sum(){
	return 1+2;
}

아예 변수 선언시에 할당을 하여 초기화를 완료하면 정확히 분리할 수 있다.

var sum = 10;

console.log(typeof sum); // number

function sum(){
	return 1+2;
}

따라서 함수를 선언할 때도 const를 쓰는게 좋다.(함수 표현식)

const sum = () => {
	return 1+2;
}

해결 방법

1. var 대신 let, const 사용하기
2. 함수 표현식 사용하기