리팩토링(refactoring)(2) - 함수 & 객체

이번엔 전 시간에 배웠던 함수와 객체를 사용해서 리팩토링을 해볼 것입니다.

리팩토링을 할 코드는 저번에 리팩토링을 한번 거친 리팩토링(refactoring) 코드를 사용할 것입니다

이 코드를 함수와 객체를 사용해서 두번째 리팩토링을 진행해 보도록 하겠습니다

우선 중독되는 코드를 함수로 만들어 주겠습니다

하지만 실행 결과 버튼을 처음 클릭시 아무 반응이 없고 두번째 클릭하니 배경과 글자색은 바뀌지만 버튼명은 안바뀌는것을 확인 할 수 있습니다 왜 이런걸까요?

함수를 만들기 전까지 사용했던 this는 태그 안에서 특정 값들을 읽을때 사용가능한 것이였습니다

하지만 함수로 만든 후에는 태그를 벗어났기 때문에 사용할 수 없는것입니다. 그럼 함수에 매개변수를 주고 함수가 태그안에서 불러질때 매개변수에 this가 적용되도록 수정해보겠습니다

정상적으로 작동하는 것을 확인 할 수 있습니다

이제 이어서 리팩토링을 진행하겠습니다 이번엔 함수와 객체 둘다 적극 활용해 보겠습니다

위의 사진과 같이 Body객체와 Link 객체 두개를 만들어서 각 객체에 알맞는 함수들을 만들어서 넣어줬습니다

Body객체에는 body 배경색 글자색을 바꿔주는 함수를 Link에는 Link 글자색을 바꿔주는 함수를 만들었습니다

그후 만든 객체에서 필요한 함수들을 꺼내서 사용하는 모습을 볼 수 있습니다. 

Body.함수명, Link.함수명

다음은 모든 과정이 적용된 완성된 코드입니다

 

정상적으로 작동하는 것을 확인 할 수 있습니다.