Cleaning Code Tip

이 글은 수시로 추가할 예정

 

1. 반복되는 string 입력을 최소화하라.

함수, 변수의 사용 등은, 내가 spell을 틀릴 일이 거의 없다.

자동 완성을 사용할 뿐더러, 틀리게 되면 해당 함수가 존재하지 않기 때문에(운나쁘게 존재하면 어쩔수없고)

오류가 출력된다.

그렇지만 문자열을 틀린다면?

문자열은 오류를 반환하지 않는다. 이는 상황을 정말 성가시게 만들 것임.

if(a.className === "active") {
	a.className = "";
} else {
	a.className = "active";
}

여기서 내가 active를 actice로 적어버리면? 문법 오류가 아니기 때문에 찾기가 성가셔진다.

따라서 반복되는 문자열의 사용이 존재한다면,

const activated = "active";
if(a.className === activated) {
	a.className = "";
} else {
	a.className = activated;
}

이렇게 변수를 지정해주고 해당 변수를 사용하자는 말이다.

2. Class Name을 변경하지 마라. ClassList를 사용하자

위의 코드를 보면 classname을 함부로 바꾸고 있다.

그렇지만 대부분의 코드는 classname을 기반으로 element를 선택하고 작동할것이다.

저렇게 맘대로 classname을 지웠다가 바꿨다가 해버리면, 기존에 내가 추가해둔 해당 class의 스크립트들이 무용지물이 되는 사태가 발생한다는 것이다.

따라서 classList를 사용한다. class인데 값을 여러개 허용한다. 추가도, 제거도, 반환도 가능하다.

const activated = "active";
if(a.classList.contains(activated)) {
	a.className.remove(activated);
} else {
	a.className.add(activated);
}

이렇게 사용할 수 있게 된다.

그저 classList에 해당 값을 제거하고 추가하게 됨으로써 같은 기능을 더욱 안정적으로 수행할 수있게 되는 것.

 

* classlist에 정의된 함수 toggle을 이용해

h1.classist.toggle("clicked");

이 한 줄로 끝내버릴 수 있다. (해당 문자열이 단 한 번 사용되기 때문에 다시 문자열로 대체한다.)

그러니 내가 구현하려는 기능이 이미 존재하는 함수인지를 확인하는게 중요하겠다...