JavaScript 간단 개념 정리

---

변수 선언 방식 - let, var, const 차이점

1. var

var name = ‘b’
console.log(name)		//b

위 처럼 var 는 변수를 한 번 더 선언해도 에러가 나오지 않고 각기 다른 값이 출력된다.

코드량이 많아지면 변수 사용 파악이 힘들기 때문에 가급적 사용하지 않는 것이 좋다.

2. let

let name = ‘c’
console.log(name)		// c

let name = ‘d’
console.log(name) 	// Uncaught SyntaxError: Identifier ‘name’ has already been declared

name이 이미 선언되었다는 에러 메시지가 나온다. (const 도 같은 에러가 출력된다)

둘다 변수 재선언이 되지 않는 것을 알 수 있다.

let name = ‘c’
console.log(name)		// c

let name = ‘d’
console.log(name) 	// Uncaught SyntaxError: Identifier ‘name’ has already been declared

name = ‘e’
console.log(name)		// e

let 은 변수에 재할당이 가능하다.

3. const

const name = ‘x’
console.log(name)		// x

const name = ‘y’
console.log(name)		// Uncaught SyntaxError: Identifier ‘name’ has already been declared

name = ‘z’
console.log(name)		// Uncaught TypeError: Assignment to constant variable

const 는 변수 재선언, 변수 재할당 모두 불가능하다.

변수선언 정리 - 변수를 선언할 때는 보통 const 를 사용하는 것이 안전하고 좋다.

호이스팅(hoisting) - 변수 및 함수 선언이 자동적으로 제일 위로 올라가는 것 (호이스팅된 이후로 코드가 나타나는 순서대로 자동적으로 실행된다)

함수

const print = function () {
	console.log(‘Print!!!’);
};

위의 함수는 아래의 함수와 같으며

const print = () => console.log(‘Print!!!’);

매개변수(파라미터)를 사용하고 싶을 때는

const add = function (a, b) => a + b;

이렇게 사용할 수 있다.

synchronous callback(동기적 콜백) 아래 예시

즉각적인 실행

function printImmediately(print){
	print();
}

printImmediately(() => console.log(‘hello’));

asynchronous callback(비동기적 콜백) 아래 예시

일정시간 후에 실행

setTimeout()은 지정한 시간 뒤에 콜백함수를 불러온다.

function printWithDelay(print, timeout){
	setTimeout(print, timeout);
}

printWithDelay(() => console.log(‘async callback’), 2000);

콜백함수 - 다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출되는 것을 의미한다.

ex)

function first(a, b, callback){
	let v = a * b;
	callback(v);
}

first(1, 2, function(v){
	console.log(v);		// 2
});

콜백함수를 쓰는 이유는 콜백을 받아야하는 상황에서 콜백함수를 사용하지 않는다면 콜백함수의 과정이 끝나기 전에 다음 프로세스가 진행되는데, 이를 막고 차례대로 수행하기 위해 콜백함수를 사용하는 것이다.

비동기 실행에 사용되는 promise

state: pending -> fulfilled or rejected

producer vs consumer

1. producer

// 새로운 promise 가 만들어지면 executor 라는 함수가 자동적으로 실행된다.
const promise = new Promise((resolve, reject) => {
	// doing some heavy work(network, read files)
	
	console.log(‘doing something …’);
	
	setTimeout(() => {
		resolve(‘penguin’);
	}, 2000);
});

2. consumer: then, catch, finally

promise
	.then((value) => {
		console.log(value);
	})
	.catch(error => {
		console.log(error);
	})
	.finally(() => {
		console.log(‘finally’);		// 성공, 실패와 상관없이 실행된다
});

3. promise chaining

const fetchNumber = new Promise((resolve, reject) => {
	setTimeout(() => resolve(1), 1000);
});

fetchNumber
	.then(num => num * 2)
	.then(num => num * 3)
	.then(num => {
			return new Promise((resolve, reject) => {
				setTimeout(() => resolve(num - 1), 1000);
			});
	})
	.then(num => console.log(num));	// 2초 후에 5 출력

async & await

1. async

promise 를 쓰지 않고 function 앞에 async 만 쓰면 function 안의 return 값들을 promise 로 만들 수 있다.

2. await

then 으로 chaining을 할 필요없이 async function 안에 있는 실행할 메소드 앞에 await을 붙이면 편하게 지연시킬 수 있다.

ex)

async function getApple() {
	await delay(1000);
	return ‘apple’;
}

async function getBanana() {
	await delay(1000);
	return ‘banana’;
}

function pickFruits() {
	return getApple().then(apple => {
		return getBanana().then(banana => `${apple} + ${banana}`);
	});
}		// 이렇게 쓰지 않고 

async function pickFruits(){
	const apple = await getApple();
	const banana = await getBanana();
	return `${apple} + ${banana}`;
}		// 이렇게 쓰면 콜백지옥도 피하고 훨씬 더 깔끔한 코딩이 가능하다.

실행 컨텍스트

• 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. (실행할 객체들을 스택 형태로 쌓음)
• 실행 컨텍스트의 3가지 객체로는 Variable Object (함수 표현식은 제외), Scope Chain, This가 있다.

클로저

• 내부함수가 외부함수의 컨텍스트에 접근할 수 있는 것을 가르킨다. (외부함수가 종료된 이후에도 내부함수를 통해서 지역변수에 접근이 가능한 기술)

window

• 웹 브라우저의 창을 나타내는 객체로, 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 된다.

this

• 현재 컨텍스트를 말한다. this가 불려온 영역의 전역객체를 의미한다.

prototype

• 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있는데 이 때 이 객체는 상속 개념과 같이 부모 객체의 프로퍼티나 메소드를 상속받아 사용할 수 있다. 그 부모 객체를 prototype 객체라고 한다.