Javascript 응용
Javascript 응용
Truthy & Falsy
function judgement(elem) {
if(elem){
console.log("Truthy");
}else{
console.log("Falsy");
}
}
//Truthy
judgement([]); // []
judgement({}); // {}
judgement(42); // 42 number
judgement("0"); // "0" string
judgement("false"); // "false" string
judgement(Infinity); // Infinity
//Falsy
judgement(null); // null
judgement(undefined); // undefined
judgement(0); // 0
judgement(-0); // -0
judgement(Nan); // Nan
judgement(""); // "" empty string삼항 연산자
let a;
const result = a ? true : false;
console.log(result);단락 회로 평가
논리 연산자 (&& , ||) 를 사용하여 좌측 식의 값에 따라 우측 식의 실행 여부를 판단
const getName = (person) => {
const name = person && person.name;
return name || '객체가 아닙니다.';
}
getName(""); // 객체가 아닙니다.
getName(null); // 객체가 아닙니다.
getName(undefined); // 객체가 아닙니다.
getName(0); // 객체가 아닙니다.
getName(NaN); // 객체가 아닙니다.
getName([]); // 객체가 아닙니다.
getName({}); // 객체가 아닙니다.비 구조화 할당
대괄호 [ ] 를 이용하여 배열이나 객체의 값을 순서대로 할당 받아서 사용할 수 있는 방법
배열의 비 구조화 할당
let arr = ['one', 'two', 'three'];
let one = arr[0];
let two = arr[1];
let three = arr[2];위의 코드를 비 구조화 할당으로 간략하게 나타내면 다음과 같다.
let [one, two, three, four] = ['one', 'two', 'three'];
console.log(one, two, three, four); // one two three undefined 출력또한, 기본값 설정을 하고 싶다면 다음과 같이 사용한다.
let [one, two, three, four='four'] = ['one', 'two', 'three'];
console.log(one, two, three, four); // one two three four 출력또한, SWAP 기능으로 활용 되기도 한다.
let a = 10;
let b = 20;
let tmp = 0;
tmp = a;
a = b;
b = tmp;위의 코드를 다음과 같이 변경 가능하다.
let a = 10;
let b = 20;
[a, b] = [b, a];객체의 비 구조화 할당
let object = { one: "one", two: "two", three: "three" };
let one = object.one;
let two = object.two;
let three = object.three;위의 코드를 비 구조화 할당으로 간략하게 나타내면 다음과 같다.
let object = { one: "one", two: "two", three: "three" };
let {one, two, three} = object;객체의 비 구조화 할당은 key 값을 기준으로 할당 하게 된다. 만약 key 값이 아니라 다른 이름의 변수로 사용 하고 싶다면 다음과 같이 표현해주면 된다.
let object = { one: "one", two: "two", three: "three", name: "에스파니아" };
let { one, two, three, name: myname } = object;
console.log(one, two, three, myname); //one two three 에스파니아또한, 기본값 설정을 하고 싶다면 배열에서와 마찬가지로 = 연산자를 사용하여 다음과 같이 사용한다.
let object = { one: "one", two: "two", three: "three", name: "에스파니아" };
let { one, two, three, name: myname, four = "four" } = object;
console.log(one, two, three, myname, four); //one two three 에스파니아 four동기 & 비동기
자바스크립트의 싱글 스레드 작업 수행 방식
- 동기적 방식 : 이전 작업이 진행 중일 때는 다음 작업을 수행하지 않고 기다림.
- 블로킹 방식 : 스레드에서 작업 하나가 수행되고 있을 때, 다른 작업을 동시에 할 수 없는 방식
멀티 스레드를 이용하여 작업들을 동시에 처리하여 문제를 해결 할 수 있지만, 안타깝게도 자바스크립트는 싱글 스레드로 동작하기 때문에 멀티스레드를 이용하지 못한다. 따라서, 시글 쓰레드 방식을 이용하면서, 동기적 작업의 단점을 극복하기 위해 여러개의 작업을 동시에 실행 시키도록 하는 비동기 작업을 수행한다.
비동기 작업
- 비동기적 방식 : 싱글 스레드 방식을 이용하면서, 동기적 작업의 단점을 극복하기 위해 여러개의 작업을 동시에 실행 시키도록 하는 방식
- 논 블로킹 방식 : 하나의 작업이 스레드를 점유 하지 않아 스레드가 다른 작업을 하지 못하는 블로킹을 하지 않는 방식
자바스크립트 Engine 비동기 방식 작동 구조
-
Heap (메모리 힙)
참조 타입(객체 등) 데이터 들이 저장되는 공간
변수나 상수들에 사용되는 메모리를 저장하는 영역
-
Call Stack (콜 스택)
Primary Type(원시 타입) 데이터 들이 저장되는 공간
작성한 코드의 실행 따라서 호출 스택을 쌓는 영역
-
Web APIs
Ajax 요청, setTimeout(), 이벤트 핸들러의 등록과 같이 웹 브라우저에서 제공하는 기능
비동기 함수 요청 처리 후 call back 함수를 Callback Queue 로 위임
-
Callback Queue
Web APIs 스레드 로부터 전달 받은 콜백 함수들을 FIFO 구조로 저장하는 큐(Queue))
Call Stack 영역이 비는 순간 스택에 순서대로 푸쉬 된다.
-
Event Loop
Call Stack 영역이 비어있는지 여부와 Callback Queue의 콜백 함수가 기다리고 있는지 여부를 확인
Call Stack 영역이 비는 순간 콜백 함수를 푸쉬 하는 역할
비동기 작업의 문제점
만약 Ajax 와 같은 비동기 함수로 데이터를 요청하면 로직의 실행이 끝날 때 까지 기다리지 않고, 나머지 코드를 실행하기 때문에 원하는 데이터를 얻을 수 없는 문제가 발생할 수 있다.
그러므로, 비동기 작업을 포함한 함수를 실행할 때 매개변수로 콜백 함수를 넘겨서 호출 하는 방법을 사용한다.
콜백 지옥 탈출
콜백 지옥
function taskA(a, b, cb) {
setTimeout(() => {
const res = a + b;
cb(res);
}, 2000);
}
function taskB(a, cb) {
setTimeout(() => {
const res = a * 2;
cb(res);
}, 2000);
}
function taskC(a, cb) {
setTimeout(() => {
const res = a * -1;
cb(res);
}, 2000);
}
taskA(1, 2, (res_a) => {
taskB(res_a, (res_b) => {
taskC(res_b, (res_c) => {
console.log("taskC Result : ", res_c);
});
});
});다음과 같이 콜백 함수의 콜백 함수의 콜백 함수를 넣어서 비동기 처리의 결과를 또 다른 비동기 처리의 매개변수로 전달 할 수가 있다.
콜백함수는 주로 이벤트 처리나 서버 통신과 같은 비동기 작업을 제어하기 위해 사용되지만 콜백 함수를 반복 해서 사용하게 되면, 들여 쓰기 수준이 감당할 수 없을 정도로 깊어지게 된다.
이렇게, 콜백함수를 여러개 사용하게 되는 상황을 콜백 지옥(Callback Hell) 이라고 부르고, 이러한 코드 구조는 가독성이 떨어지고 코드 수정을 어렵게 하는 문제를 야기한다.
따라서, 이러한 콜백 지옥을 탈출 하기 위한 방법 중 하나로 javascrip 에서 제공하는 Promise 객체를 이용한다.
Promise
Promise 는 ES6 에서 새롭게 도입한 객체로, 생성자를 통해 인스터스화 한다.
// Promise 객체의 생성
const promise = new Promise((resolve, reject) => { //pending(대기) 상태
// 비동기 작업을 수행한다.
if (/* 비동기 작업 수행 성공 */) {
resolve('result'); //fulfilled(이행) 상태
}
else { /* 비동기 작업 수행 실패 */
reject('failure reason'); //rejected(실패) 상태
}
});CallBack 함수를 이용하여 Promise 객체를 이용하여 변경하기
function taskA(a, b) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const res = a + b;
resolve(res);
}, 2000);
});
}
function taskB(a) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const res = a * 2;
resolve(res);
}, 1000);
});
}
function taskC(a) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const res = a * -1;
resolve(res);
}, 3000);
});
}
taskA(1, 2)
.then((res_a) => {
return taskB(res_a);
})
.then((res_b) => {
return taskC(res_b);
})
.then((res_c) => {
console.log("taskC Result : ", res_c);
});Promise 를 사용하면 콜백 지옥(CallBack Hell) 을 벗어날 수 있다.
async / await | 직관적인 비동기 처리
async
function 앞에 async 키워드를 붙이면 항상 promise 객체를 반환한다.
async 키워드를 이용하여 비동기 처리를 할 수 있다.
function hello() {
return 'hello';
}
async function helloAsync() {
return 'hello Async';
}
helloAsync().then((res) => {
console.log(res);
});callback 함수나, promise 객체를 이용하여 비동기 처리를 할 수 있지만, 좀더 직관적이고 간편하게 비동기 처리를 할 수 있다.
//async
function delay(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
async function getUser() {
return delay(3000).then(() => {
return 'espania';
});
}
getUser().then((res) => {
const user = res;
console.log("user : ", user); //espania 출력
});await
async 키워드를 가진 함수 내부에서, 비동기 처리 함수에 await 키워드를 붙이게 되면 해당 함수는 동기적으로 수행한다.
//async
function delay(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
async function getUser() {
await delay(3000);
return 'espania';
}
getUser().then((res) => {
const user = res;
console.log("user : ", user); //espania 출력
});API 호출
웹상에서 데이터의 흐름은 레스토랑에서 손님 - 웨이터 - 냉장고 의 상호 작용 관계를 통해 이해 할 수 있다.
-
손님이 웨이터에게 주문을 받는다.
Browser(브라우저)가 Server(서버) 에게 Request(데이터 요청) 를(을) 한다.
-
주문을 받은 웨이터가 냉장고에서 주문 받은 음식의 재료를 찾는다.
Server(서버)가 DataBase(데이터베이스)에서 Query(원하는 정보를 질의) 하여 원하는 데이터를 찾는다.
-
냉장고에서 원하는 재료를 가지고 온 후 음식을 만든다.
DataBase(데이터베이스)에서 (Query Result)정보를 가지고 온 후 Server(서버)에서 데이터를 가공 한다.
-
완성된 음식을 손님에게 서빙한다.
가공된 데이터를 Brower(브라우저)에게 Response(응답) 해준다.