2021_10_08_TIL

const hello = document.querySelector('.hi h1');


function handleTitleClick() {
    const currentColor= hello.style.color;
    let newColor = hello.style.color;
    if (currentColor === 'blue') {
        newColor = 'orange';
    }
    else {
        newColor = 'blue';
    }
}


hello.addEventListener('click', handleTitleClick);

 

이렇게 작성하면 잘 실행될 줄 알았는데 원하는대로 결과가 나오지 않았다.

 

 

마침 나와 같은 궁금증을 가진 사람이 있었고, 여러가지 답변이 있었다.

↓

h1.style.color = newColor 라고 한 이유가 궁금합니다.

const currentColor = h1.style.color 라고 한 건 이해가 갑니다. 그렇다면 같은 방식으로 newColor = h1.style.color가 되어야 하는게 아닌가라고 생각을 해 봤는데 이렇게 하면 에러가 뜨더군요...왜 newColor = h1.style.color는 안 되는건가요?

 

 

위에 대한 노마드 코더의 답변이다.

 

const currentColor = h1.style.color
currentColor is a copy of the value of `h1.style.color` , they are not connected, just a copy of the value.

 

그러니까 이렇게 변수를 선언하는 것은 값의 복사이다. 따라서 코드와 함께 생각해보면 newColor 부분은 hello 객체가 아니라 그저 색의 값을 갖고 있을 뿐이다. 그래서 색이 안바뀌는 것!

 

 

 

 

 

그래서 다음과 같이 변수 선언을 하고....

 

function handleTitleClick() {
    const currentColor= hello.style.color;
    let newColor;
    if (currentColor === 'blue') {
        newColor = 'orange';
    }
    else {
        newColor = 'blue';
    }
    hello.style.color = newColor;
}

 

끝에 hello 객체에다가 newColor 의 값을 대입하면 제대로 동작하는 것을 알 수 있다.

 

 

 

 

 

 

도움이 되는 댓글이 있어서 같이 공부하기 위해 가져왔다.

 

변수 2가지에 대해 헷갈려하시는 것에 대한 제 의견을 말씀드려보도록 하겠습니다.


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

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

3. 다들 아시겠지만 프로그래밍언어에서 "="(equal) 표시는 오른쪽에 있는 값을 왼쪽에 대입한다는 뜻입니다. 이를 염두에 두시면 코드를 이해하는데 편하실 것 같습니다.

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