18. μ½œλ°±ν•¨μˆ˜

yhj96Β·2022λ…„ 4μ›” 18일
0

JavaScript Info

λͺ©λ‘ 보기
18/19
post-thumbnail

πŸ“Œ 18-1 μ½œλ°±ν•¨μˆ˜λž€?

  • ν•¨μˆ˜μ— 인자둜 ν•¨μˆ˜λ₯Ό μ „ν•΄μ€€ λ’€ ν˜ΈμΆœλ˜μ–΄ μ‚¬μš©λœλ‹€.
  • μ΄λ²€νŠΈμ— μ˜ν•΄ 호좜 λ˜λŠ” ν•¨μˆ˜

πŸ“Œ 18-2 동기적 μ½œλ°±ν•¨μˆ˜μ™€ 비동기적 μ½œλ°±ν•¨μˆ˜

🧩 동기적 μ½œλ°±ν•¨μˆ˜

  • λ°μ΄ν„°μ˜ μš”μ²­κ³Ό κ²°κ³Όκ°€ λ™μ‹œμ— μΌμ–΄λ‚œλ‹€.
  • ν•¨μˆ˜μ˜ μˆœμ„œκ°€ λͺ…ν™•ν•˜κ²Œ μž‘λ™ν•œλ‹€.
// name, age, callback을 인자둜 ν•˜λŠ” ν•¨μˆ˜ 생성
function name(name, age, callback) {
    console.log(`이름은 ${name}μž…λ‹ˆλ‹€.`);
    // μ½œλ°±ν•¨μˆ˜ μ‹€ν–‰
    callback(age);
}
// ageλ₯Ό 좜λ ₯ν•˜λŠ” ν•¨μˆ˜ 생성
function age(age) {
    console.log(`λ‚˜μ΄λŠ” ${age}μ‚΄ μž…λ‹ˆλ‹€.`);
}
/*
κ²°κ³Ό : 
이름은 Kimμž…λ‹ˆλ‹€.
λ‚˜μ΄λŠ” 20μ‚΄ μž…λ‹ˆλ‹€.
*/
name("Kim", 20, age);

πŸ”₯ 동기적인 μ½”λ“œλ‘œ ν˜ΈμΆœμ„ ν•˜μ˜€μ§€λ§Œ ν•¨μˆ˜κ°€ μ‹€ν–‰λ˜κ³  λ‚œ 뒀에 callback ν•¨μˆ˜κ°€ μ‹€ν–‰λ˜μ–΄ μˆœμ„œλ₯Ό 보μž₯ν•œλ‹€.

🧩 비동기적 μ½œλ°±ν•¨μˆ˜

  • λ°μ΄ν„°μ˜ μš”μ²­κ³Ό κ²°κ³Όκ°€ λ™μ‹œμ— μΌμ–΄λ‚˜μ§€ μ•ŠλŠ”λ‹€.
  • ν•¨μˆ˜κ°€ μ–Έμ œ 결과값을 λ°˜ν™˜ν• μ§€ μ•Œ 수 μ—†λ‹€.
function name(name, age, callback) {
    // λΉ„λ™κΈ°λ‘œ μž‘λ™ν•˜κΈ° μœ„ν•΄μ„œ setTimeout ν•¨μˆ˜λ₯Ό μƒμ„±ν•΄μ„œ 호좜 νƒ€μ΄λ¨ΈλŠ” 랜덀
    setTimeout(() => console.log(`이름은 ${name}μž…λ‹ˆλ‹€.`), Math.random() * 1000);
    // λΉ„λ™κΈ°μ μœΌλ‘œ μž‘λ™ν•˜λŠ” ν•¨μˆ˜κ°€ μžˆλŠ” μ½œλ°±ν•¨μˆ˜
    callback(age);
}

function age(age) {
    // λΉ„λ™κΈ°λ‘œ μž‘λ™ν•˜κΈ° μœ„ν•΄μ„œ setTimeout ν•¨μˆ˜λ₯Ό μƒμ„±ν•΄μ„œ 호좜 νƒ€μ΄λ¨ΈλŠ” 랜덀
    setTimeout(() => console.log(`λ‚˜μ΄λŠ” ${age}μ‚΄ μž…λ‹ˆλ‹€.`), Math.random() * 1000);
}
// κ²°κ³Ό : μˆœμ„œλ³΄μž₯ X
name("Kim", 20, age);
function name(name, age, callback) {
    // λΉ„λ™κΈ°λ‘œ μž‘λ™ν•˜λŠ” ν•¨μˆ˜ μ•ˆμ— μ½œλ°±ν•¨μˆ˜λ‘œ 싀행될 λ•Œ ν•¨μˆ˜λ₯Ό 인자둜 받은 μ½œλ°±ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•΄μ„œ μˆœμ„œλ³΄μž₯
    setTimeout(() => {
        console.log(`이름은 ${name}μž…λ‹ˆλ‹€.`);
        callback(age);
    }, Math.random() * 1000);
}

function age(age) {
    setTimeout(() => console.log(`λ‚˜μ΄λŠ” ${age}μ‚΄ μž…λ‹ˆλ‹€.`), Math.random() * 1000);
}
/*
κ²°κ³Ό : 
이름은 Kimμž…λ‹ˆλ‹€.
λ‚˜μ΄λŠ” 20μ‚΄ μž…λ‹ˆλ‹€.
*/
name("Kim", 20, age);

πŸ”₯ 비동기적인 ν•¨μˆ˜κ°€ ν¬ν•¨λ˜μ–΄ μžˆλŠ” μ½œλ°±ν•¨μˆ˜λ₯Ό λ™κΈ°μ μœΌλ‘œ μ‚¬μš©ν•˜κΈ° μœ„ν•΄μ„œ 즉 μˆœμ„œμ˜ 싀행을 보μž₯을 λ°›κΈ° μœ„ν•΄ μ½œλ°±ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•œλ‹€.

πŸ“Œ 18-3 μ½œλ°±μ§€μ˜₯

μ½œλ°±μ§€μ˜₯μ΄λž€ μ½œλ°±ν•¨μˆ˜λ₯Ό 무수히 많이 μ‚¬μš©ν•˜μ—¬ μ½”λ“œλ₯Ό μ•Œμ•„λ³΄κΈ° νž˜λ“  μƒνƒœλ₯Ό λ§ν•œλ‹€.

// λ™κΈ°μ μœΌλ‘œ μ‹€ν–‰ν•˜κΈ° μœ„ν•΄μ„œ 1 -> 2 -> 3 -> 4의 κ²°κ³Όλ₯Ό λ„μΆœν•˜κΈ° μœ„ν•œ μ½œλ°±ν•¨μˆ˜ 호좜
function f1(callback) {
    setTimeout(() => {
        // κ²°κ³Ό : 1
        console.log(1);
        // 첫 번째 콜백 호좜
        callback();
    }, Math.random() * 1000);
}
function f2(callback) {
    setTimeout(() => {
        // κ²°κ³Ό : 2
        console.log(2);
        // 두 번째 콜백 호좜
        callback();
    }, Math.random() * 1000);
}
function f3(callback) {
    setTimeout(() => {
        // κ²°κ³Ό : 3
        console.log(3);
        // μ„Έ 번째 콜백 호좜
        callback();
    }, Math.random() * 1000);
}
function f4() {
    setTimeout(() => {
        console.log(4);
    }, Math.random() * 1000);
}
// 첫 번째 μ½œλ°±ν•¨μˆ˜ ν•Έλ“€λŸ¬
function callback1() {
    // ν•¨μˆ˜ f2λ₯Ό ν˜ΈμΆœν•˜κ³  인자둜 μ½œλ°±ν•¨μˆ˜λ₯Ό λ„˜κ²¨μ€Œ
    f2(callback2);
}
// 두 번째 μ½œλ°±ν•¨μˆ˜ ν•Έλ“€λŸ¬
function callback2() {
    // ν•¨μˆ˜ f3을 ν˜ΈμΆœν•˜κ³  인자둜 μ½œλ°±ν•¨μˆ˜λ₯Ό λ„˜κ²¨μ€Œ
    f3(callback3);
}

function callback3() {
    // ν•¨μˆ˜ f4 호좜
    f4();
}
/*
κ²°κ³Ό :
1
2
3
4
*/ 
f1(callback1);
// μœ„ μ½”λ“œμ™€ λ™μΌν•˜μ§€λ§Œ ν•¨μˆ˜λ₯Ό λ”°λ‘œ λ§Œλ“€μ§€ μ•Šκ³  ν•¨μˆ˜ μžμ²΄μ—μ„œ μ‚¬μš©ν•œ μ½”λ“œ
function f1(callback) {
    setTimeout(() => {
        console.log(1);
        callback();
    }, Math.random() * 1000);
}
function f2(callback) {
    setTimeout(() => {
        console.log(2);
        callback();
    }, Math.random() * 1000);
}
function f3(callback) {
    setTimeout(() => {
        console.log(3);
        callback();
    }, Math.random() * 1000);
}
function f4() {
    setTimeout(() => {
        console.log(4);
    }, Math.random() * 1000);
}
/*
νŒŒλΌλ―Έν„°μ— ν•¨μˆ˜λ₯Ό λ§Œλ“€μ–΄μ„œ μž…λ ₯
κ²°κ³Ό :
1
2
3
4
*/
f1(() => {
    f2(() => {
        f3(() => {
            f4();
        });
    });
});

🧩 μ½œλ°±μ§€μ˜₯ 해결방법

  • Promise μ‚¬μš©
  • async / await μ‚¬μš©
profile
JS 코린이

0개의 λŒ“κΈ€