๐ ๊ฐ๋ฐ ๊ณต๋ถ 6๊ฐ์ ์ฐจ์ธ to-be ๊ฐ๋ฐ์์ ์์ต blog๐๏พ Feb 13 ~ 19, 2021
ํ์ฌ ์ํ
๋ณต์ตํ๋ผ๋ ๋ง ๋ง์ด ๋ค์๋ ๋๊ธฐ, ๋น๋๊ธฐ ๊ฐ์ ํ์ต
(+) ๋ง์นจ ๊ด๋ จ ๊ฐ์๋ฅผ ์ฌ๋ ค์ฃผ์ ์ด๊ณ ์๋!
callback ํจ์๋ ๋ค๋ฅธ ํจ์์ ์ ๋ ฅ ๊ฐ์ผ๋ก ์ ๋ฌ๋์ด์ ๋์ค์ ํธ์ถ๋๋ ํจ์
// ๐ต 6๊ธ์๋ณด๋ค ๋ง์ ๋จ์ด ์ถ์ถํ๊ธฐ
words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
// (1)
newWords = words.filter(element => element.length > 6); // ์ต๋ช
ํจ์
console.log(newWords);
// โฌ๏ธ Output
// ['exuberant', 'destruction', 'present']
// (2)
function newfilter(origin, callback) {
var result = [];
for (var i = 0 ; i < origin.length ; i++) {
var current = origin[i];
if (callback(current)) {
result.push(current);
}
}
return result;
}
newWords = newfilter(words, element => element.length > 6);
console.log(newWords);
// โฌ๏ธ Output
// ['exuberant', 'destruction', 'present']
โ๏ธ first class citizen (1๊ธ ์๋ฏผ / ๊ฐ์ฒด)
๋ณ์๊ฐ ๋ ์ ์์ผ๋ฉด, ๋ณ์๊ฐ ๋ค๋ฅธ ํจ์์ return ๊ฐ์ด ๋ ์ ์์ผ๋ฉด, ๋ณ์๊ฐ ๋ค๋ฅธ ํจ์์ ์
๋ ฅ ๊ฐ์ด ๋ ์ ์์ผ๋ฉด 1๊ธ ์๋ฏผ
์๋๋ฉด, ์์ผ๋ฉด 2๊ธ ์๋ฏผ
โ๏ธ ajax
browser์ web server๊ฐ page๋ฅผ reloadํ์ง ์๊ณ JavaScript๋ฅผ ํตํด ์ํตํ๋ ๊ฒ
e.g. ๊ฒ์์ฐฝ์ ๊ฒ์์ด๋ก ์ด์ฑ, ์ค์ฑ, ์ข
์ฑ์ ํ๋ํ๋ ๋๋ฅผ ๋๋ง๋ค ํต์ ํจ
.then()
, .catch()
๋ ๊ฐ์ง method๋ฅผ ์ฌ์ฉํ ์ ์์ (๋ ๋ค callback ํจ์๋ฅผ ๋ฐ์).then()
method๊ฐ response ๊ฐ์ฒด๋ฅผ ์ ๋ฌํจ.catch()
method๊ฐ reason ๊ฐ์ฒด๋ก ์คํจ ์ฌ์ ๋ฅผ ์ ๋ฌํจ.then()
์์ ๋ .then()
....then()
์ ๋ฐ๊นฅ์ผ๋ก ์ฐ๊ฒฐํ ๊ฒ fetch('https://jsonplaceholder.typicode.com/posts')
.then(function(response) {
return response.json();
})
.catch(function(reason) {
console.log('reason', reason);
})
.then(function(data) {
console.log('data', data);
});
timer(1000, function() {
console.log('์์
');
timer(1000, function() {
console.log('์์
');
timer(1000, function() {
console.log('์์
');
});
});
});
// โ
timer(1000)
.then(function() {
console.log('์์
')
return timer(1000);
})
.then(function() {
console.log('์์
')
return timer(1000);
})
.then(function() {
console.log('์์
')
})
// โ
async function run() {
await timer(1000)
console.log('์์
')
await timer(1000)
console.log('์์
')
await timer(1000)
console.log('์์
')
}
run();
async
๋ ํจ์๋ฅผ promise๋ก returnํด ๋น๋๊ธฐ์ ์ผ๋ก ์คํํ๋ค.
๋ด๊ฐ promise ๋ง๋ค๊ธฐ (์ด์ ๊น์ง๋ ๋ค๋ฅธ ์ฌ๋์ด ๋ง๋ promise ์ฐ๊ธฐ)
function job1() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
reject("job1 fail!");
}, 2000);
});
}
function job2() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("job2 ok!");
}, 2000);
});
}
job1()
.then(function(data) {
console.log("data1", data);
return job2();
})
.catch(function(reason) {
console.log("reason", reason);
// return Promise.reject(reason); ๋ค์์ ์ค๋ then (job2) ์ ์คํ์ํค๊ณ ์ถ์ง ์์ ๋
})
.then(function(data) {
console.log("data2", data);
})
Promise.all([])
function timer(time) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(time);
}, time);
});
}
console.time("Promise.all");
Promise.all([timer(1000), timer(2000), timer(3000)]).then(function(result) {
console.log("result", result); // result (3) [1000, 2000, 3000]
console.timeEnd("Promise.all"); // Promise.all: 3001.748046875 ms
});
Promise.race([])
function timer(time) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(time);
}, time);
});
}
console.time("Promise.race");
Promise.race([timer(1000), timer(2000),timer(3000)]).then(function(result) {
console.log("result", result); // result 1000
console.timeEnd("Promise.race"); // Promise.race: 1002.871826171875 ms
});
MDN - Callback Function
{json} placeholder