javascript 3강~4강(개발환경, 실행환경, 변수)

2019-10-03

JavaScript

JavaScript 3강~4강 예습

3강 : 자바스크립트 개발 환경과 실행 방법
1. 자바스크립트 실행 환경
2. 웹브라우저의 동작 방식
3. script 코드를 하단에 두어야 하는 이유
4. DOM이란?
4강 : 변수
1. 변수란?
2. 식별자
3. 변수선언
4. 변수 선언의 실행 시점과 변수 호스팅
5. 값의 할당
6. 값의 재할당
7. 값의 교환
8. 식별자 네이밍 규칙

자바스크립트 실행 환경

모든 브라우저는 자바스크립트을 실행하고 해석하기 위해서 자바스크립트 엔진을 내장하고 있다.
브라우저뿐만 아니라 Node.js도 자바스크립트 엔진을 내장하고 있다.

따라서 브라우저와 Node.js 둘다 자바스크립트의 코어인 ECMAScript를 실행할수는 있지만, ECMAScript 이외에 추가적인 기능은 호환되지 않는다.

브라우저에서의 자바스크립트 실행 환경	Node.js
DOM API를 지원.	File 시스템 (create / delete / read / update)를 지원.
클라이언트 사이드 Web API + ECMAScript	Node.js 고유 API + ECMAScript

웹 어플리케이션의 자바스크립트는 사용자 컴퓨터의 브라우저에서 동작한다.(보안상 이유: Web API에서는 File 시스템을 미제공)
웹 어플리케이션의 자바스크립트는 브라우저에서 HTML,CSS와 함꼐 실행된다.

웹 브라우저의 동작 방식

브라우저의 핵심 기능

브라우저

자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리하며, HTML파서는 script 태그를 만나면 자바스크립트 코드를 실행하기 위해서 DOM 생성 프로세서를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다.

컴파일러	인터프리터
컴파일 타임에 소스 코드 전체를 한번에 CPU가 바로 실행할 수 기계어)로 변환한 후 실행한다.	런타임에 문 단위로 한 줄씩 중간 코드인 바이트 코드 특정한 하드웨어가 아니라 가상 머신에서 실행하도록 만든 바이너리 코드)로 변환한 후 실행한다.
실행 파일을 생성한다.	실행 파일을 생성하지 않는다.
컴파일 단계와 실행 단계가 분리되어 있다. 명시적인 컴파일 단계를 거쳐서 명시적으로 실행 파일을 실행한다.	인터프리트 단계와 실행 단계가 분리되어 있지 않다. 인터프리터는 한 줄씩 바이트 코드로 변환하고 즉시 실행한다.
실행에 앞서 컴파일은 단 한번 수행된다.	코드가 실행될 때마다 인터프리트 과정이 반복 수행된다.
컴파일과 실행 단계가 분리되어 있으므로 코드 실행 속도가 빠르다.	인터프리트 단계와 실행 단계가 분리되어 있지 않고 반복 수행되므로 코드 실행 속도가 비교적 느리다.

토크나이징(Tokenizing)

단순한 문자열인 소스 코드를 어휘 분석(Lexical analysis)하여 의미를 갖는 코드의 최소 단위인 토큰(Token)들로 분리.

파싱(Parsing)

토큰들의 집합을 구문 분석(Syntactic analysis)하여 AST(Abstract Syntax Tree, 추상적 구문 트리)를 생성

AST는 토큰에 문법적 의미와 구조를 반영한 트리 구조의 자료 구조

코드 실행

생성된 AST는 인터프리터가 실행할 수 있는 바이트 코드(bytecode)로 변환되고 인터프리터에 의해 실행.

결론

JS 소스 코드 + 어휘 분석 + 최소단위로 나누어 토큰으로 만듬 : 토크나이즈
토큰 + 구문분석 = 토큰에 문법적 의미 및 구조 반역 = AST 생성 : 파싱
AST를 인터프리터가 실행하도록 바이트코드로 변환하여 실행.

script 코드를 하단에 두어야 하는 이유

HTML 요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다.
DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작한다면 에러가 발생한다.

DOM이란? Document Object Model (문서 객체 모델)- HTML, XML 문서의 프로그래밍 interface

로컬에서 작성된 코드가 브라우저에 의해 파싱되면 DOM으로 변환.
JavaScript는 브라우저가 읽고 어떤 작업을 할 수 있는 언어이고 DOM은 이 작업이 이루어지는 장소이다.
어떠한 요소에 click이벤트가 일어나는지 감시하도록 JavaScript을 사용한 기능이 구현됬다. 하지만 이 요소는 DOM 노드이다. 여기서 DOM에 있는 property를 통해서 listener를 붙여 놓은 것 뿐임.
DOM은 HTML요소이고, DOM API는 JavaScript에서 HTML에 DOM요소를 다루기 위한 JavaScript의 기본 함수.

Node.js

크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경.

NPM

node package manager의 약자. 자바스크립트 패키지 매니저이다. Node.js에서 사용할 수 있는 모듈들을 패키지화 하여 모아둔 장소 역할 과 패키지 설치 및 관리를 위한 CLI를 제공.

변수란?

하나의 값을 저장할 수 있는 메모리 공간에 붙인 이름 / 또는 메모리 공간 자체.

데이터를 관리하기 위한 핵심 개념.
배열 혹은 객체와 같은 자료구조를 이용하면 하나의 변수에 여러개의 값을 그룹화하여 사용이 가능하다.

var userName = 'Lee';
var userRole = 'Admin';

// 객체나 배열과 같은 자료 구조를 사용하면 여러 개의 값을 하나로 그룹화하여 하나의 값처럼 사용할 수 있다.
var user = {
  name: 'Lee',
  role: 'Admin'
};

var users = [
  { name: 'Lee', role: 'Admin' },
  { name: 'Kim', role: 'Developer' }
];

변수에 값을 저장하는 행동 : 할당

변수에 저장된 값을 읽는 행동 : 참조

식별자

어떤 값을 구별하여 식별해낼 수 있는 이름

메모리 상에 존재하는 어떤 값을 구별하여 식별해낼 수 있어야 한다.
변수 , 함수 , 클래스등의 이름과 같은 식별자는 네이밍 규칙을 준수 해야만 한다.
선언에 의하여 자바스크립트 엔진에 식별자의 존재를 알린다.

변수 선언

변수 이름을 자바스크립트 엔진에 알려 등록하고 변수 값을 저장하기 위한 메모리 영역의 확보를 명령하는것.

( - 즉, 변수를 생성하는 것)

변수는 선언과 동시에 특정 값으로 초기화를 안하면 undefined라는 값이 암묵적으로 할당되어 초기화가 된다.
변수를 사용하려면 반드시 선언이 필요하다. 만약 선언 없이 변수(식별자)에 접근하면 ReferenceError가 발생한다.

(이는 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 참조 에러다.)

참조 에러

ES5 VS ES6 의 변수 선언 차이점

ES5의 변수 선언 키워드	ES6의 변수 선언 키워드
var	let , const

// var 키워드의 최대 단점 : 블록 레벨 스코프를 지원하지 않고, 함수 레벨 스코프를 지원한다.
var a; //undefined
a = 10;
for(var a=0;a<5;a++){
}
console.log(a);

위는 var 키워드의 단점을 설명해주는 가장 큰 예이다. a의 결과값은 10이 아닌 5이다.

이유는 for는 { } 밖에 존재하기 때문이다.

실행 컨텍스트

자바스크립트 엔진이 실행 가능한 코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역.

모든 식별자는 실행 컨텍스트에 등록된다.
자바스크립트는 실행 컨텏스트를 통해 식별자와 스코프를 관리한다.
실행 컨텍스트 내에 KEY / VALUE 형씩인 객체로 등록되어 관리된다.

변수 선언의 실행 시점과 변수 호이스팅

변수 선언은 소스 코드가 순차적으로 실해되는 시점에서 실해되 않는다. 구문 분석 단계에서 먼저 실행된다.

따라서 아래와 같은 코드가 참조 에러가 안나는것이다.

1 2	console.log(score); // undefined var score; // 변수 선언(변수 선언문)

변수호이스팅

자바스크립트는 변수 선언문을 코드의 선두로 끌어 올려진 것처럼 동작하게 보인다.

이와 같은 고유의 특징을 변수 호이스팅이라고 한다.

추가로

사실 호이스팅은 변수 선언 뿐만이 아니라 var, let, const, function, function*, class 키워드를 사용하여 선언된 모든 식별자(변수, 함수, 클래스 등)는 호이스팅된다.
모든 선언문은 런타임 이전인 구문 분석 단계에 먼저 실행되기 때문이다.

값의 할당

변수에 값을 할당할 때는 할당 연산자(=) 을 사용한다. ( 우변의 값을 좌변에 )
변수 선언과 동시에 값을 할당하는 따로 선언후 구문을 나눠서 할당을 하든,

자바스크립트는 런타임 이전에 변수선언을 실행하고, 값의 할당은 소스 코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

변수에 값을 할당 할 때 undefined가 적혀진 메모리 공간을 지우고 그곳에 값을 다시 저장하는게 아니라 새로운 메모리 공간을 확보하고 확보된 공간에 값을 할당한다.

console.log(score); // undefined

score = 80; // 값의 할당
var score;  // 변수 선언

console.log(score); // ??

결과는 undefined / 80 이 출력된다.

이유 : var score는 구문 분석때 실행되어 undefined로 메모리 공간에 저장이 되어서 첫 score 값에 undefined 값이 저장이 되고 그 후 score는 80이라는 값이 할당이 되어 새로운 메모리 영역에 공간이 할당되고 80이라는 값이 저장된다. 따라서 2번째 값은 80이다.

값의 재할당

var 키워드로 선언한 변수는 값을 재할당이 가능하다.
재할당이 불가능한 식별자를 만들고 싶다면 const키워드를 이용한다. (즉 상수)
재할당이 끝나면 그 전에 할당되었던 값들은 필요가 없어진다. 이러한 쓰레기값들은 Garbage Collector에 의하여 메모리에서 자동 해제된다.

값의 교환

var x = 1;
var y = 2;

// do somethig
var temp = x;
x = y;
y = temp;

console.log(x, y); // 2 1

식별자 네이밍 규칙

특수문자를 제외한 문자, 숫자, underscore( _ ), 달러기호( $ ) 를 포함할 수 있다.

식별자는 문자 , underscore( _ ) , 달러기호( $ ) 로 시작해야 한다. 숫자 및 특수문자로 시작할 수 없다.

예약어는 식별자의 네이밍으로 사용이 불가능하다.

대소문자를 구별한다. (var firstName , Fristname, FIRSTNAME; // 모두 각각 다른 변수 )

예약어
await break case catch class const continue debugger default delete do else enum export extends false finally for function if 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 yield*

변수 이름은 변수의 존재 목적을 쉽게 이해할 수 있도록 의미를 명확히 표현해야 한다. 좋은 변수 이름은 코드의 가독성이 높인다.

하나 이상의 영어 단어로 구성된 식별자를 네이밍할때는 아래와 같은 네이밍 컨벤션을 이용한다.

// 카멜 케이스 (camelCase)
var firstName;

// 스네이크 케이스 (snake_case)
var first_name;

// 파스칼 케이스 (PascalCase)
var FirstName;

// 헝가리언 케이스 (typeHungarianCase)
var strFirstName;          // type + identifier
var $elem = $('.myClass'); // jQuery

가장 일반적인 것 : 코드 전체의 가독성을 높이기 위해서 2가지 네이밍 컨벤션이 많이 쓰이고 있다.

변수명 / 함수명 -> 카멜케이스
생성자 함수명 / 클래스명 -> 파스칼케이스

ECMAScript 사양에 정의된 표준 객체(String, Number 등등)와 전역 함수들도 카멜케이스와 파스칼 케이스 네이밍 컨벤션이 사용되고 있다.

HYEOK999's Daily Develop

TILJavascript-Preview