1. 비동기작업(Asynchronous)
- 동기작업: 한가지 작업을 수행할 때 그 작업이 끝날때까지 다른 작업들은 수행하지 못하는 것
- 비동기작업: 작업을 동시에 수행하고자 할 때 한 작업이 다른 작업을 블로킹하는 것을 방지하기 위해 사용된다
ex) 서버에 데이터를 요청
- 동기작업
function f() {
console.log('foo');
}
f() // 동기함수: 호출되었을 때 실행된다
console.log('bar')
/*
*** 결과 ***
foo
bar
*/- 비동기작업- setTimeout(null, ms): 첫번째 파라미터에 넣는 함수를 두번째 파라미터에 있는 ms만큼 기다렸다가 수행하는 함수. 이렇게 setTimeout 을 사용하면 우리가 정한 작업이 백그라운드에서 수행되기 때문에 기존의 코드 흐름을 막지 않고 동시에 다른 작업들을 진행 할 수 있다.(https://learnjs.vlpt.us/async/)
function f() {
setTimeout(() => {
console.log('foo');
}, 0)
}
f() // 비동기 함수: 호출순서와 상관없이 가장 마지막에 실행된다
console.log('bar');
/*
*** 결과 ***
bar
foo
*/- 비동기 함수의 에러는 비동기 함수 내부에서 처리를 해주어야 한다.
function fetchData(callback){ // 서버에 데이터를 요청하는 비동기 함수
let data = {foo: 'bar'}
setTimeout(() => {
callback(null, data)
}, 1000)
}
// 서버에서 데이터를 응닫받는데 1초가 걸린다고 가정
fetchData(function(err, data) {
// 비동기함수 내부에서 에러 처리(try / catch)
try {
// 에러처리
if(err) {
throw err;
}
// 데이터처리
console.log('서버의 응답:', data);
}catch(err) {
console.error(err)
}
})
console.log("다음 작업")
/*
*** 결과 ***
다음 작업
서버의 응답: {foo : 'bar'}
*/
- Promise 객체비동기작업의 성공/ 실패 여부 및 결과를 나타낸다비동기작업의 가독성을 향상시키기 위해 사용한다
const o = new Promise((res, rej) => {
// 비동기작업이 성공함
res('foo') // res(resolve, 성공)
// 비동기작업이 실패함
// rej('bar') // rej(rejected, 실패)
})
console.log(o);- 결과값: Promise { 'foo' } - 비동기작업이 성공함을 의미 (fulfilled 상태)
- 결과값: Promise { <pending> } - 비동기작업이 보류중임을 의미 (pending 상태)
- 결과값: Promise { <rejected> 'bar' } - 비동기작업이 실패함을 의미 (rejected 상태)
- Promise 객체 사용예시
function fetchData() {
const promise = new Promise ((res, rej) => {
res({foo : 'bar'})
})
// Promise 객체를 리턴한다
return promise;
}
// 서버에 데이터를 요청하는 함수
fetchData()
.then(data => { // 데이터를 처리하는 부분 (함수가 성공했을 시 실행)
console.log(data)
})
.catch (err => { // 에러를 처리하는 부분 (함수가 실패했을 시 실행)
console.error(err)
})
console.log("다음 작업")
/*
*** 결과 ***
다음 작업
{foo: 'bar'}
*/
- async / await promise
객체를 더 편리하게 사용할 수 있는 문법.
await는 async 함수 내에서만 사용이 가능하며 await가 앞에 붙은 함수의 실행이 끝날때 까지 뒤에 있는 함수들은 기다린다.
function fetchData() {
const promise = new Promise((res,rej) => {
res({foo : 'bar'})
})
// Promise 객체를 리턴한다
return promise;
}
f()
async function f() {
try {
const data = await fetchData(); // 비동기 작업이 끝날때까지 기다린다
// 비동기 작업이 많을 때 사용한다
console.log(data);
console.log("다음 작업")
}catch(err) {
console.error(err)
}
}
/*
*** 결과 ***
{ foo: 'bar' } // 리턴된 promise객체를 data로 받아 출력한 값
다음 작업 // await가 붇은 fetchData를 기다린 후 순차적으로 실행된 것
2. 구조분해할당
- 간단한 문법으로 객체 / 배열의 속성 / 아이템을 변수에 할당할 수 있다
// 배열에서 구조분해할당
const arr = ['foo', 'bar', 'baz'];
const[foo, bar, baz] = arr;
console.log(foo, bar, baz); // foo, bar, baz
// 객체에서 구조분해할당
const o = {foo: 'foo', bar: 'bar', baz: 'baz'}
const {foo, bar, baz} = o; // 변수의 이름과 속성의 이름이 일치하도록 한다
console.log(foo, bar, baz);
// 함수에서 구조분해할당
const o = {foo: 'foo', bar: 'bar', baz: 'baz'};
function f({foo, bar, baz}) {
console.log(foo, bar, baz)
}
f(o);3. 전개구문
- 객체 / 배열의 속성 / 아이템을 간편하게 복사할 수 있다
- 배열 혹은 객체이름 앞에 ...을 붙여주면 내부의 속성 혹은 아이템들이 복사된다
const arr = ['foo', 'bar'];
const newItem = 'baz';
const r = [...arr, newItem];
console.log(r)
/*
*** 결과 ***
['foo', 'bar', 'baz']
*/
const arr1 = ['foo', 'bar'];
const arr2 = ['baz'];
const r = [...arr1, ...arr2];
console.log(r);
/*
*** 결과 ***
['foo', 'bar', 'baz']
*/
const r = [...arr2, ...arr1];
console.log(r);
/*
*** 결과 ***
[ 'baz', 'foo', 'bar']
*/- 객체의 전개구문 역시 마찬가지이며 기존 객체의 속성을 업데이트하기 위해서는 해당 객체의 전개구문과 업데이트할 속성과 값을 함께 적어주면 된다.
// 객체 전개구문
const o = {foo: 'foo', bar: 'bar'};
const r = {...o, baz: 'baz'};
console.log(r)
/*
*** 결과 ***
{foo: 'foo', bar: 'bar', baz: 'baz'}
*/
// 속성 업데이트
const a = {...o, bar: null};
console.log(a);
/*
*** 결과 ***
{foo:'foo', bar: null};4. JSON (JavaScript Object Notation)
- 자바스크립트 객체 표기법
- 자바스크립트 객체를 저장하거나 전송하기 위한 텍스트 포맷
- 객체와 JSON
const o = {foo: 'bar'}
const json = '{"foo" : "bar"}' // JSON 포맷
- JSON.stringfy() - 객체를 JSON포맷으로 변환한다
const o = {foo: 'bar'};
const r = JSON.stringify(o);
console.log(r); // {"foo":"bar"}
- JSON.parse() - JSON을 객체로 변환한다
const json = '{"foo" : "bar"}'
const r = JSON.parse(json);
console.log(r); // { foo: 'bar' }
댓글