[CS] 클린코드: 변수다루기

클린코드: 변수다루기

해당 글은 유데미 자바스크립트 클린코드를 수강하고 정리하는 글입니다! 😎

자바스크립트는 런타임 도중 값이 휙휙 자유롭게 바뀔 수 있는 언어다. 이는 개발자에게 큰 자유도를 선사하지만, 그만큼 값을 추적하기 어렵고 버그가 생길 수 있는 위험이 생긴다.
안전하고 가독성 좋은 코드를 작성하기 위해 클린코드를 배워보자! 좋은 코드를 작성하기 위해 의식적인 노력을 하고, 어떤 상황, 대상 등의 케이스에 따라 어느 코드가 더 베스트인지 고민하는 자세를 가지자!🖤

var를 지양하자

• 자바스크립트의 변수 선언 키워드엔 var, const, let이 있다.
• var는 함수 스코프를 가지며, 재선언이 가능하다.
• 변화를 추적하기 어렵기 때문에 되도록 const, let를 쓰자!

전역 공간 사용 최소화

• 전역 객체의 프로퍼티를 등록해 전역 공간을 사용하게 되면, 전역 객체가 오염되게 된다.
• 전역 객체가 가지고 있는 메소드를 나도 모르게 바꿔버리는 경우가 생길수도 있다.
• 지역 변수를 사용하고 window, global를 조작하지 말자!

임시 변수 제거하기

• 아래와 같은 코드는 result에 무엇이 추가되고, 제거되고 변경되어있는지 계속 추적해야한다.

function getElements() {
	const result = {}; // 이게 바로 임시변수, 임시객체!
	result.title = document.querySelector('.title');
	result.text = document.querySelector('.text');

	return result;
}

• 개선된 아래의 코드는 임시객체를 없앰으로써 프로퍼티 추가나 삭제를 신경쓰지 않아도 된다.

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

• 임시 변수를 사용하기 되면, 명령형으로 가득한 코드를 작성하게 된다.
• 임시 변수의 변화를 추적하기 어려워 디버깅이 힘들다.
• 마음대로 코드를 변화시키기 쉽다. (구조를 바꾸는 것보다 한 줄 추가하는게 쉬우니까!)
• 이를 해결하기 위해 함수나누기, 바로 반환하기, 고차 함수 사용하기, 선언형 프로그래밍하기 등의 방법이 있다.

호이스팅 피하기

• 호이스팅이란 런타임시 변수, 함수의 선언과 할당이 분리된것을 의미한다.
• const, let는 호이스팅이 발생해도 TDZ가 있기에 가급적 var는 지양하자!
• 함수 선언문은 호이스팅이 발생하기 때문에 함수 표현식을 사용하자!