#3.6 CSS in Javascript

1. currentColor는 getter로써, 최근 color값을 복사하는 역할을 한다. 그렇기에 의미론적으로 봤을 때 const로 선언하는 것이 적절하다.

2. newColor는 setter로써, 변수에 대입된 색상값을 h1.style.color에 최종적으로 할당하는 역할을 한다. 그리고 이것도 의미론적으로 봤을 때 값이 변경될 수 있다는 것을 염두에 두기 위해 let으로 선언하는 것이 적절하다.

3. 프로그래밍언어에서 "="(equal) 표시는 오른쪽에 있는 값을 왼쪽에 대입한다는 뜻이다.

4. (참고) 함수 내에서 선언된 변수는 함수 밖에서는 존재하지 않는다. 그렇기 때문에 const currentColor로 변수 선언을 하더라도, 함수가 호출될 때 마다 새로운 값을 받을 수 있다.

이를 토대로 코드를 순차적으로 이해하면,

1) click event 발생 및 함수 실행

2) currentColor 변수 선언 후 h1.style.color 값 복사 (getter)

3) newColor 변수 선언

4) currentColor 현재 값 확인

5) 조건에 따라 newColor에 "tomato" or "blue" 값 대입

6) 마지막으로 h1.style.color에 newColor값 대입 (setter)