Node.js 학습_자바스크립트 문법(호출 스택 / 이벤트 루프 / const, let / 템플릿 문자열, 객체 리터럴)

# 자바스크립트_호출 스택(함수의 호출, 자료구조의 스택)

• 호출 스택 : 자바스크립트가 동기 (순서대로 실행)적으로 어떻게 실행되는지  파악할때 사용. 

function first() {
	second();
    console.log('첫 번째');
}

function second() {
	third();
    console.log('두 번째');
}

function third() {
	console.log('세 번째');
}

first();

=> 실행 순서
세 번째
두 번째
첫 번째

• 스택이란 밑에서부터 쌓여서, 위에서 부터 꺼내는 것. (예) 프링글스ㅋㅋ)
• Anonymous은 가상의 전역 컨텍스트(항상 있다고 생각하는게 좋음)
• 함수 호출 순서대로 쌓이고, 역순으로 실행
• 함수 실행이 완료되면 스택에서 빠진다.
• LIFO (Last In, First out) 구조라서 스택이라고 불림.

# 자바스크립트_이벤트 루프

funtion run() {
	console.log('3초 후 실행');
}

console.log('시작');
setTimeout(run, 3000);
console.log('끝');

=> 실행 순서
시작
끝
3초 후 실행

• 호출 스택만으로는 설명이 안됨, 호출 스택과 이벤트 루프로 설명 가능. (호출 스택 / 백그라운드 / 테스크 큐)
• setTimeout은 비동기 함수로 백그라운드에 타이머(run, 3초) 보냄. (setTimeout의 경우 0초라도 무조건 백그라운드에 가야함)
• 백그라운드에 있으면 동시에 실행 가능.
• 백그라운드가 먼저 끝난다고 하더라도 호출 스택이 먼저 처리된다.
• 이벤트 루프 : 호출 스택이 비어있는 경우, 테스크 큐에서 함수들 하나하나를 끌어와서 실행 해준다. (이때 백그라운드는 비워져야 한다.)
• Promise then / catch / process.nextTick의 경우 테스크 큐에서 setTimeout 등 보다 먼저 실행(새치기) 됨

# const, let

• ES2015 이전에는 var로 변수를 선언.
• ES2015부터는 const와 let이 대체
• 가장 큰 차이점 : 블록 스코프(var은 함수 스코프)
• 블록 스코프(중괄호, { } )

if (true) {
	var x = 3;
}
console.log(x);	// 3 
=> var의 경우 블록 스코프를 무시, 블록 바깥에서도 var에 접근 가능
=> var도 function 안에 있을 경우에는 바깥에서 접근 불가(= 함수 스코프)


if (true) {
	const y = 3;
}
console.log(y);	// Uncaught ReferenceError: y is not defined
=> 블록 스코프를 존중. 블록 바깥에서 const 접근 불가

• const에는 대입 연산자(=)을 한 번만 사용 가능. (가능하면 const 사용, 값 바꿀일 있으면 그때 let 사용)

const a = 3;
a = '5';	// 에러


const b = {name : 'zerocho'};
b.name = 'nerocho';




let c = 5;
c = 3;
c = 10;		// 가능. 하지만, 생각보다 let 쓸일 많지 않음(값 바꿀일 있는경우 사용)

# 템플릿 문자열, 객체 리터럴 (편의사항)

기존 문법
var won = 1000;
var result = '이 과자는 ' + won + '원입니다.';
/ 이 과자는 1000원입니다. 
=> 공란 넣어줘야 띄어쓰기 가능.

최신 문법
const result = `이 과자는 ${won}원입니다.`;
=> 변수를 ${}로 해줘서 띄어쓰기 가능하도록 해줌.(` ` 는 ~표에 있는것)
이를 템플릿 문자열, 백틱 문자열 이라고함.(편의사항)

• 태그드 템플릿 리터럴 : 백틱( ` )이용한 함수 호출

function a() {}

기존 문법
a();

최신 문법
a``;	// 백틱(`) 사용하여 함수 호출 가능.