일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 코드스테이스
- frontend
- 참조자료형
- 코드스테이츠
- JS
- cta버튼
- Javascript #코드스테이츠
- 자바스크립트
- CDD
- 계산기
- css in js
- Router
- cta button
- 프로토타입
- codestates
- self reliance
- Prototype
- OOP
- css
- WAI-ARIA
- 객체지향
- html
- codestate
- JavaScript
- 호스트인식
- condestates
- 원시자료형
- 프론트엔드
- 회고
- 개발자
- Today
- Total
jh.nrtv
전역객체(Global Object)란? - 모든 변수가 전역객체의 property일까? 본문
들어가며
코드리뷰 시간에 팀 리드분께서 전역 객체에 대해서 살짝 말씀해 주셔서 이번 기회에 정리하고자 한다.
전역객체란?
전역객체 : 모든 요소들이 소속된 객체로, 최상위에 존재하기 때문에 어디서든 접근이 가능하다.
JS는 소스코드를 실행하기 전에 최상위에 위치한 전역객체를 만든다.
전역객체는 전체 코드에서 단 한개만 존재할 수 있으며 constructor가 없기에 새로 생성할 수 없다.
또한 실행 환경에 따라서 달라진다. 예를 들어 브라우저라면 window, node라면 global이다.
전역 객체는 전역 스코프를 가진다.
전역객체는 자식 객체를 사용할 때 생략할 수 있다.
예를 들어 아래 두 객체는 동일하게 동작한다.
window.document
document
우리가 매우 익숙하게 사용하는 alert( "..."), setTimeout(..), localStrage(..) 등도 모두 앞에 window 전역객체가 생략되어 있었다.
전역객체는 생략하는 것이 일반적이나,
사용자가 정의한 변수와 전역 객체의 자식 객체 이름이 충돌하는 경우, 명확히 전역 객체를 기술하는 것이 혼동을 방지할 수 있다.
그렇다면 모든 객체가 전역 객체의 속성 property로 들어갈까?
JS에서 객체는 독립적으로 생성되고 사용된다. 따라서 전역 객체의 '속성'으로서 직접적으로 포함되지는 않는다.
다만, 스코프 체인으로 인해 간접적으로 접근할 수 있을 뿐이다.
* 스코프 체인: 변수, 객체 등을 검색할 시 해당 스코프에서 찾지 못하면 상위 스코프로 이동해서 찾는 것
var, let, const 키워드 모두 window 객체에서 접근할 수 있을까?
전역 객체에 대해서 공부하면서
변수 선언 키워드에 따라서 아래와 같이 다르게 동작함을 확인할 수 있었다.
똑같이 개발자 도구에서 선언했으나, var 키워드는 window 객체 내에 포함되어 window.user1으로 접근할 수 있지만,
let, const는 window.user 형태로 접근할 수 없는 것으로 보인다.
아래 링크에서 답을 찾을 수 있었다. (역시 god-이응모선생님... ㅠㅠ )
그 이유는 각 변수의 scope에 의한 것인데,
var는 함수레벨 스코프이기에 var키워드로 선언된 변수를 전역 변수로 사용하면 전역 객체의 프로퍼티가 된다.
하지만 let , const 키워드 블록레벨 스코프를 사용하기 때문에
전역 변수로 사용하더라도 전역 객체의 프로퍼티가 아니다.
let 전역변수는 보이지 않는 개념적인 블록 내에 존재하게 된다.
공부를 하면서 생각지도 못하게 기본 개념과 연결되는 것을 경험하면서
기본기가 이렇게 중요하구나 하고 느끼게 되고, 반성하게 되는 것 같다.
참조
'javascript' 카테고리의 다른 글
[JavsScript] Array 순회 메서드 정리 (0) | 2023.12.19 |
---|---|
[JavaScript] 'Node.js는 모듈화를 통한 캡슐화를 지향한다' 의 의미?( 응집도, 결합도, CommonJS ) (0) | 2023.12.01 |
[JavaScript] JS의 프로퍼티(property) / instance 프로퍼티, static 프로퍼티 (0) | 2023.10.25 |
[JavaScript] HTML형식을 순수 string 형식으로 바꾸는 Javascript 코드 (0) | 2023.07.25 |
[JavaScript] JS 의 내장객체 Set (0) | 2023.04.17 |