21.12.28 어려웠던 부분 정리

노마드코더님 강의를 들으면서 이해가 어려웠던 부분 정리

위 코드는 querySelector로 hello클래스의 h1태그를 h1변수로 받아와서

h1.addEventListener로 "클릭했을때 handleTitleClick함수를 실행한다."는 코드이다.

클릭할때마다 파란색과 토마토색이 왔다갔다 변화되는 코드인데

h1.style.color가 너무 많이 반복되니 더 깔끔하고 좋은 코드를 만들어 보자.

이렇게 바꾼다고 하셨는데 let newColor부터 이해가 어렵다.

이를 이해하기 위해 알아야 할것.

1. currentColor는 getter로써, 최근 color값을 복사하는 역할이므로 const로 선언하는 것이 의미상 적절

2. newColor는 if조건문을 거치면서 변수에 대입된 색상값을 h1.style.color에 최종적으로 할당하는 역할. 그리고 이것도 의미상 let으로 선언하는것이 적절하다.

3. "="(equal) 표시는 오른쪽에 있는 값을 왼쪽에 대입한다는 뜻. 단순히 왼쪽과 오른쪽이 같다 고 생각하는 것보다 오른쪽에 있는 값을 왼쪽에 대입한다 라고 생각하면 위의 코드를 이해하기 쉽다.