<리팩토링(Refactoring)>
- 전과 동일하게 작동하지만 코드 자체를 좀 더 효율적으로 바꾸는 과정
- 가독성을 높이고 유지 보수하기 쉽게 만들며, 중복된 부분을 최대한 없애는 방향으로 코드를 개선
- 소프트웨어의 규모가 커질수록 틈틈이 리팩토링 과정을 거쳐야 좋은 프로그램을 만들 수 있다.
<리팩토링 예시>
→ 이 예시 코드의 윗부분에 버튼이 하나 있고, 아래에 버튼을 하나 더 만들고 싶어 아래쪽에 버튼을 추가한 모습이다.
원래는 누를 때마다 day/night이 바뀌어가며 나오도록 짠 코드인데 위에 이미 input 태그의 id 값을 night_day로
설정했기 때문에, 아래에 똑같은 코드를 복사 붙여 넣기 해 night_day가 두 개가 되어 제대로 작동하지 않고 있다.
→ 위의 문제를 해결하기 위해 id값을 night_day2로 바꾸니까 버튼의 글자가 누를 때마다 night/day로 바뀌며 제대로 작동하고 있다.
그러나 만약 버튼을 2개가 아니라 1억 개를 만든다면 이런 식으로 하나하나 다 바꿔줄 수 없을 것이다.
그래서 이러한 불편함을 없애기 위해 아래와 같이 특수한 키워드를 사용한다.
→ onclick과 같은 event 안에서 실행되는 코드들은 사실상 자기 자신을 가리키고 있다.
다시 말해, 위의 예시에서는 document.querySelector('night_day2')가 onclick event가 속해있는 태그인
input 태그를 가리키고 있는 것이다.
→ 이때, 불필요한 중복을 피하고 간단히 표기하기 위해 this라는 키워드를 사용한다.
document.querySelector('night_day2').value
↓
this.value
→ this로 대체하게 되면 참조하려고 전에 추가해놓은 id값(id="night_day2")은 필요가 없어지므로 제거한다.
아직도 document,querySelector('body') 부분이 중복된다.
→ 중복을 피하기 위해, target이라는 이름의 새로운 변수를 생성해주고, 그 값을 중복을 피하고자 하는 부분인 document.querySelector('body')로 지정해준다.
→ 이제 중복되는 부분을 target으로 대체해주면,
1) 코드의 양을 줄일 수 있고
2) 변수의 값에 해당하는 코드만 바꿔주면(ex. document.querySelector('h1')) target 변수를 쓰고 있는
모든 코드가 한 번에 바뀌는 굉장한 효과를 가진다. (target 변수가 1억 개 있다고 상상해보자)
