[JavaScript]실행환경, 개발자 도구, 변수 호이스팅
1. JavaScript의 실행 환경
브라우저와 Node.js 환경에는 자바스크립트 엔진을 내장하고 있기 때문에 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있습니다.
그렇다면 브라우저와 Node.js 환경의 차이점은 무엇일까요?
| 브라우저 | Node.js | |
| 주된 목적 | HTML, CSS, JS를 실행해 웹 페이지를 브라우저 화면에 렌더링하는 것 | 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것 |
| DOM API | 제공함 | 제공하지 않음 |
| 파일 시스템 | 지원하지 않음 | 지원함 |
[추가 지식]
* DOM(Document Object Model) API: 파싱된 HTML 요소를 선택하거나 조작하는 기능의 집합
* 파일 시스템: 파일을 생성하고 수정할 수 있는 시스템
* 브라우저는 Web API인 FIleReader 객체를 사용해 사용자가 지정한 파일을 읽어 들이는 것은 가능함
* 웹 크롤링 web crawling: 서버에서 웹사이트의 컨텐츠를 수집하기 위해 웹사이트에서 HTML 문서를 가져온 후, 이를 가공해서 필요한 데이터만 추출
2. 개발자 도구
웹 페이지에 접속한 다음 f12 또는 Ctrl+Shift+l 키를 누르면 개발자 도구가 열립니다.
개발자 도구 속 패널에는 Elements, Concole, Sources, Network, Application이 있는데요.
각 패널이 무엇을 나타내는지 살펴보겠습니다.
| Elements | 로딩된 웹 페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인할 수 있음 웹 페이지가 의도된 대로 렌더링 되지 않았을 때 확인하면 유용함 |
| Console | 에러 확인 console.log() 메서드의 실행 결과를 확인 |
| Sources | 로딩된 웹 페이지의 JS 코드를 디버깅할 수 있음 |
| Network | 로딩된 웹 페이지에 관련된 네트워크 요청 정보와 성능을 확인할 수 있음 |
| Application | 웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있음 |
3. 변수 호이스팅
먼저 변수란, 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이며 값의 위치를 가리키는 상징적인 이름입니다. 식별자라고도 부릅니다.
변수 선언 키워드로는 var, const, let 이 있습니다. var 키워드로 선언한 변수는 문제점이 있기 때문에 잘 사용하진 않습니다. 선언하지 않은 식별자에 접근하면 참조에러(Reference Error)가 발생합니다.
변수 이름을 지정할 때에는 규칙이 있습니다.
[변수 네이밍 규칙]
- 특수문자를 제외한 문자, 숫자, 언더스코어 ( _ ), 달러 기호 ($) 포함 가능
- 숫자로 시작할 수 없음
- 예약어는 식별자로 사용 불가
| 예약어 | ||||||||
| await | break | case | catch | class | const | continue | debugger | default |
| delete | do | if / else | enum | export | extends | false | finally | for |
| function | yield | implements | import | in | instanceof | interface | let | new |
| null | package | private | protected | public | return | super | static | switch |
| this | throw | true | try | typeof | var | void | while | with |
그렇다면 변수 호이스팅이란 무엇일까요?
자바스크립트 엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행됩니다. 따라서 변수 선언이 소스코드의 어디에 위치하는지와 상관없이 변수를 참조할 수 있게 됩니다.
즉, 변수 선언이 소스코드가 순차적으로 실행되는 런타임 이전 단계에서 먼저 실행된다는 것입니다.
var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅 됩니다.
참고로 변수 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행됩니다.