javascript window self 사용관련

여러 홈페이지를 돌아다니다 보면 self.a.textContent = "좋아요" 같은 코드를 볼 수도 있습니다. 여기에서 self란 뭘까요?

self 란?

self란 window 자신을 반환하는 속성으로 window와 self는 같은 의미입니다. 즉, (window === window.self)는 true가 나옵니다.

global object인 window는 생략이 가능하기 때문에 window === self 도 true가 됩니다.

요소의 id 속성은 window 객체의 속성처럼 접근할 수 있습니다. document.getElementById()를 사용하지 않아도 접근 가능하다는 말이죠.

<div id="test"></div>
<div id="good"></div>

<script>
window.test.textContent = "Nice to meet you";
self.good.textContent = "Good Night";
</script>
Code language: HTML, XML (xml)

위와 같은 코드의 결과값은 각각의 div 태그에 Nice to meet you, Good Night이 입력되게 됩니다.

하지만 document.getElementById() 메서드 사용하지 않고 요소의 id 속성을 window 객체의 전역 속성처럼 접근하는 방식은 좋은 방식이 아닙니다.

만약 id 속성과 같은 이름의 식별자(변수나 함수)가 있으면, id 속성과 식별자의 이름이 충돌하여 코드가 올바로 동작하지 않기 때문입니다.

<div id="good"></div>
  
<script>
  function good(){
    window.good.textContent = "Hello my name is 'good'"
  }
  good();
</script>
Code language: HTML, XML (xml)

위의 코드는 실행되지 않습니다. id의 이름과 함수 good()이름이 같은데 window.good~~ 방식을 사용해서 서로 충돌을 일으켰기 때문입니다.

function good(){
 document.getElementById('good').textContent = "my name is 'good'"
}
good();
Code language: JavaScript (javascript)

하지만 위에처럼 함수 안에서 document.getElementById()를 사용하면 정상 작동이 됩니다.

오늘은 self와 document.getElementById()의 활용에 대해 알아봤습니다.