JavaScript에서 글로벌/지역 변수와 DOM 기초
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

글로벌 변수와 지역 변수의 차이점 및 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 } vs function 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 사용하여 자동 생성 글로벌 변수 방지 필수