23.03.23. HTML id와 변수명은 가급적 다르게 하자.

변수명에 오타냈을 때 꼬인다.

 

Issue

HTML 태그에 id를 부여해서, 사용자가 선택한 짧은 스트링을 저장해두는 용도로 썼다.

다시 불러올 때는 jQuery로 $('#id').text() 를 이용해서 불러오고, 값을 변경하면 $('#id').empty() 후 $('#id').append("저장할 값")으로 사용하는 식. DB를 사용할 필요는 없는 값이고, 서버랑 주고받을 이유도 없다고 생각했다.

 

그런데, $('#id').text()로 분명 태그 안에 있는 텍스트를 불러왔을거라 생각한 변수를 console.log로 출력해 보니, HTML 태그 전체가 출력되는 상황이 발생했다. 

 

<div id="someTag">text</div>

let someVar = $('#someTag').text()
console.log(someVar)

> text

 

로 예상했으나,

 

> <div id="someTag">text</div>

로 HTML 태그 전체가 출력되는 상황.

---

Try&Error

우선, jQuery의 .text() method의 문서를 확인했다. 문서에서 사용례나 설명에서 string을 반환하는데, 지칭한 id로 찾을 수 있는 모든 HTML 태그 안에 있는 문자열을 합쳐서 반환한다고 적혀있었다. 오.. 몰랐던 사실을 알게된 점은 좋으나, 왜 HTML 태그 전체를 반환하는지는 여전히 모르겠었다.

 

두번째는 내가 HTML 태그 id를 이용해 두번 감싸서, 안에 들어있는 전체 HTML 태그가 반환된건가? 생각했으나, 문서에도 그렇고 하위 태그의 텍스트가 반환되지 HTML 태그가 반환되는 일은 없었고, 테스트를 위해 코드를 만들어봤을 때도 문제가 없었다.

 

이쯤되면 알아차렸어야 하나, 내가 jQuery API를 잘못알거나 하는 등의 문제가 생각해서 조금 더 찾아보고 했으나 해결되지 않았다.

---

Solution

사실 예상했겠으나, 단순히 오타의 문제였다. 

<div id="someTag">text</div>

let someTag = $('#someTag').text()
console.log(someTag)

// 라고 썼어야 했으나 실제로 오타는 예를들면,

let someTeg = $('#someTag').text()
console.log(someTag)

// 와 같이 썼다.

그러다보니, someTag라는 id를 가진 HTML 태그 전체를 출력하게 된 것. 

---

Learned

사실 이 실수를 하기 전까지, id 그대로 변수로 사용할 수 있을 것이라고 생각하진 못했고 그 id를 바로 호출할 경우 HTML 태그 전체가 반환되는지도 몰랐으니 괜찮은 실수를 했다고 볼 수 있겠다.

그래도, 헛갈리지 않으려면 변수명과 id명은 달리 쓰는게 좋겠다. 

 

혹시나 해서, typeof로 어떤 타입인지 확인해보니 Object로 나왔다. 검색을 해보니,

HTMLElement 클래스의 인스턴스로, Object 타입이라고 한다. 

(즉, id를 console.log로 출력하면, HTMLElement로서, 해당되는 DOM element가 출력되는 것. 이라는 데 정확하게 이해하긴 어렵다.)