리팩토링 작업 - 중복 제거와 this 키워드

리팩토링이란?

비효율적인 코드를 가독성이 높고, 유지보수가 편리하며, 중복된 코드의 수가 낮은 효율적인 코드로 개선하는 작업이다. 틈틈이 리팩토링 작업을 하는 것이 좋은 프로그래머의 자세이자 좋은 프로그램을 만들 수 있다.

[목표] 비효율적인 코드를 제거하는 리팩토링 작업 학습

우선, Night 버튼 기능을 웹 페이지 하단에서도 동작하도록 해보자

이때, 하단 버튼을 클릭하면 버튼의 값이 바뀌는 대상은 상단에 위치한 버튼이다. 그 이유는 input 태그의 id의 값이 동일하기 때문이다. 이 경우 하단 버튼의 id 값을 'night_day2'로 수정하면 정상 작동한다.

그러나, 버튼이 여러 개라면 수많은 버튼을 일일이 변경해줘야 하는 불편함이 발생한다. 이 불편함을 해결하기 위해 this 키워드를 사용한다.

 

this 키워드

자기 자신을 가리키는 키워드이다. (onclick 이벤트가 속해있는 태그 자신을 말한다.)

변경 전) onclick="if(document.querySelector('#night_day').value === 'night') { ~ }"

변경 후) onclick="if(this.value === 'night') { ~ }"

위와 같이 this 키워드를 사용하게 되면 태그의 id 값을 참조할 필요가 없으므로 id 값을 삭제한다.

 

[추가] 작업 후 남은 중복 제거

코딩을 잘하는 사람은 중복을 발견하고, 제거하여 효율성 높은 코드를 만드는 것이다. 따라서, 위의 작업 후 남은 중복을 제거하는 작업을 해보겠다.

변경 전)

변경 후) target 변수에 중복되는 값을 넣고 활용하면 가독성이 좋아진 코드로 수정된다.

 

 

 

📚참고문헌

www.youtube.com/watch?v=vwRkFRke7ls&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=18

생활코딩 Javascript