글로벌 변수와 지역 변수의 차이점 및 DOM 기초
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
초보자~중급자 JavaScript 개발자, 웹 프론트엔드 학습자
핵심 요약
- 글로벌 변수는 함수/블록 외부에서 선언되며, 모든 스코프에서 접근 가능 (예:
let petName = 'Rocky'
) - 자동 생성 글로벌 변수는
var
,let
,const
없이 함수 내부에서 선언된 변수 (예:fruit = 'apple'
) - 지역 변수는 함수 내부에서 선언되며, 외부 접근 시 오류 발생 (예:
function myFunction() { let localVar = 10 }
) - DOM 조작은
getElementById()
같은 메서드를 통해 HTML 요소 접근 가능 (예:document.getElementById('id명')
)
섹션별 세부 요약
1. 글로벌 변수의 정의 및 특성
- 함수/블록 외부에서 선언된 변수는 전역 스코프 적용
- ES6 이전에 함수 내부에서
var
,let
,const
없이 선언된 변수는 자동으로 글로벌 변수로 생성 (예:fruit = 'apple'
) - 글로벌 변수는 모든 함수/블록에서 접근 가능하나, 버그 발생 위험 증가
2. 지역 변수의 정의 및 특성
- 함수 내부에서 선언된 변수는 해당 함수의 스코프에 제한됨
- 동일한 이름의 지역 변수는 다른 함수에서 서로 영향 주지 않음 (예:
function a() { let x=1 }
vsfunction b() { let x=2 }
) - 지역 변수를 사용하는 것이 글로벌 변수보다 코드 가독성과 유지보수성 향상
3. 변수 사용 방법
- 함수 내부에서 생성된 변수는 지역 변수로, 외부 접근 불가
var
키워드 생략 시 글로벌 변수로 생성되며, 디버깅 어려움 유발- 함수 간 데이터 전달은 매개변수 전달 권장 (예:
function foo(x) { ... }
)
4. DOM(문서 객체 모델) 개요
- DOM은 HTML/XML 문서의 구조, 콘텐츠, 스타일을 동적으로 조작하기 위한 표준 인터페이스
- W3C DOM은 Core DOM, XML DOM, HTML DOM 3가지로 분리
- HTML DOM은 HTML 요소를 객체로 접근, 속성 변경, 이벤트 처리 가능
5. `getElementById()` 메서드
- 지정된 ID를 가진 HTML 요소를 반환 (예:
document.getElementById('myId')
) - 요소가 존재하지 않을 경우
null
반환 - 웹 개발에서 가장 흔히 사용되는 DOM 조작 메서드
결론
- 글로벌 변수는 피하고, 매개변수를 통해 지역 변수 전달하는 것이 좋음 (예:
function foo(x) { ... }
) - DOM 조작 시
getElementById()
같은 메서드 활용, HTML 요소의 속성/내용을 동적으로 변경 가능 - ES6 이상에서는
let
/const
사용하여 자동 생성 글로벌 변수 방지 필수