[Java Script] 모던 자바 스크립트 Deep Dive 01. 1장 프로그래밍 ~ 4장 변수 (p1 ~ p49)

• 모던 자바 스크립트 Deep Dive 책을 공부하며 정리해서 올리는 포스팅입니다.

1장. 프로그래밍

자바스크립트의 변수에는 어떠한 타입의 값도 할당할 수 있다. 그러나 문법적으로는 옳아도 의미적으로는 옳지 않다. number라는 변수에 문자열을 할당할 수 있지만 보통 숫자를 할당시키기 때문에 코드는 문법에 부합하는 것은 물론이고 요구사항이 실현되어야한다.

2장. 자바스크립트란?

자바스크립트는 일반적으로 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Wep API, 즉 DOM, BOM< Canvas, XMLHttpRequest, fetch, requestAnimationFrame,SVG, Web Storage, Web Component, Web Worker 등을 아우르는 개념이다.

* 자바스크립트의 특징

• HTML과 CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어다.
• 기본 문법은 C, 자바와 유사하고 셀프에서는 프로토타입 기반 상속을, 스킴에서는 일급함수의 개념을 차용했다.
• 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어다.
  명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.

3장. 자바스크립트 개발 환경과 실행 방법

* 개발 도구

1. 크롬
   윈도우 : F12 또는 Ctrl + Shift + I
   macOS : command + option + I

• 패널
  -Elements
  로딩된 웹 페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인해 볼 수 있다. 단, 편집한 내용이 저장되지는 않는다. 웹페이지가 의도된 대로 렌더링 되지 않았다면 이 패널을 확인해 유용한 힌트를 얻을 수 있다.
  -Consloe
  로딩된 웹페이지의 에러를 확인하거나 자바스크립트 소스코드에 작성한 consloe.log 메서드의 실행 결과를 확인할 수 있다.
  -Sources
  로딩된 웹페이지의 자바스크립트 코드를 디버깅할 수 있다.
  -Network
  로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능을 확인할 수 있다.
  -Application
  웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있다.

2. Node.js와 npm

• Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경, 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경
• npm은 자바스크립트 패키지 매니저다. Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공한다.

3. 비주얼 스튜디오 코드

• 설치 및 확장 플러그인 설치

4장. 변수

컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다.

• 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체이다.
  - 메모리 셀 하나의 크기는 1바이트이며, 컴퓨터는 메모리 셀의 크기, 1바이트 단위로 데이터를 저장하거나 읽어들인다.
  - 각 셀은 메모리 주소를 갖고, 메모리 공간은 위치를 나타내며, 0부터 시작해서 메모리의 크기만큼 정수로 표현된다.

  변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.

• 값의 위치를 가리키는 상징적인 이름이다.
• 변수 이름(변수명) : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
• 변수 값 : 변수에 저장된 값
• 할당 : 변수에 값을 저장하는 것
• 참조 : 변수에 값을 저장된 값을 읽어 들이는 것

변수 이름을 식별자라고도 한다 .

식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.

값은 메모리 공간에 저장되어 있다. 따라서 식별자는 메모리 공간에 저장되어 있는 어떤 값을 구별해서 식별해낼 수 있어야한다. 이를 위해 식별자는 어떤 값이 저장되어 있는 메모리 주소를 기억해야한다.

식별자는 값이 아니라 메모리 주소를 기억하고 있다.

식별자로 값을 구별해서 식별한다는 것은 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 의미다. 즉, 메모리 주소에 붙인 이름이라고 할 수 있다.

식별자라는 용어는 변수 이름에만 국한해서 사용하지 않는다.
ex) 변수, 함수, 클래스 등의 이름은 모두 식별자다.
메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 부른다.

변수, 함수, 클래스 등의 이름과 같은 식별자는 네이밍 규칙을 준수해야하며 선언에 의해 자바스크립트 엔진에 식별자의 존재를 알린다.

• 변수를 사용하려면 반드시 선언이 필요하다. 변수를 선언할 때는 var, let, const 키워드를 사용한다.

자바스크립트 엔진은 변수 선언을 다음과 같은 2단계를 거쳐 수행한다.

• 1. 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
  2. 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undedfined을 할당해 초기화한다.

자바스크립트는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문에 변수 선언문보다 변수를 참조하는 코드가 앞에 있어도 오류가 나지 않는다.

• 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅 이라 한다.

변수에 값을 할당할 때는 할당 연산자 " = "를 사용한다.

• 변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

변수는 값을 재할당할 수 있는데, 값을 재할당 할수가 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수라고 한다.

• 상수는 한번 정해지면 변하지 않는 값이다.

식별자는 고유한 이름이므로 식별자 네이밍 규칙을 준수해야한다.

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함 할 수 있다.
• 단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야한다. 숫자로 시작하는 것은 허용하지 않는다.
• 예약어는 식별자로 사용할 수 없다.

예약어
await	break	case	catch	class	const
continue	debugger	default	delete	do	else
enum	export	extends	flase	fianlly	for
function	if	implements*	import	in	instanceof
interface*	let*	new	null	package*	private*
protected*	public	return	super	static*	swtich
this	throw	true	try	typeof	var
void	while	with	yield*

• (*)로 표기된 것은 식별자로 사용 가능하나 strict mode에서는 사용불가