[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 키워드를 사용해서 선언하는 모든 식별자는 호이스팅 됩니다. 

 

 참고로 변수 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행됩니다.