yuzunsang / JS-deep-dive-study

자바스크립트 딥 다이브 스터디✨
0 stars 3 forks source link

[CH24]클로저 #40

Open yuzunsang opened 2 months ago

yuzunsang commented 2 months ago

[퀴즈 예시] Q. 여기에 퀴즈 설명을 적으세요.

적을 코드가 있다면 밑에 적어주세요. (백틱 3개로 코드를 감싸면 코드 양식을 적을 수 있습니다.)

// 예시 코드
const arr = [1, 2, 3];
console.log("Hello");

아래 코드를 복붙해서 정답을 적어주세요.

<details>
    <summary>정답</summary>
    <div markdown="1">    
    정답 설명
    </div>
</details>
yuzunsang commented 2 months ago

Q. 다음 중 클로저인 inner 함수를 고르시오.

function outer() {
    let a = 1;

    function inner1() {
        let b = 2;
        console.log(b);
    }

    return inner1;
}

const inner1 = outer();
inner1();
function greeting() {
    let greeting = "안녕";

    function inner2() {
        let name = "준상아";
        console.log(`${greeting}, ${name}!`);
    }

    return inner2;
}
const inner2 = greeting();
inner2();
const printDot = () => {
    const dot = "*";

    function inner3() {
        console.log(dot.repeat(3));
    }

    inner3();
}
printDot();
정답
inner1 함수는 상위 스코프의 식별자를 참조하고 있지 않음 => 클로저가 아님
inner2 함수는 상위 스코프를 참조하며 외부 함수보다 생명 주기가 김 => 클로저!
inner3 함수는 외부 함수보다 생명 주기가 짧음 => 클로저가 아님
J-yun-ji commented 2 months ago

Q. 원하는 결과(1, 2, 3)가 나오도록 아래의 코드를 수정하세요.

const increase = function() {
    let num = 0;
    return ++num;
};

console.log(increase()); // 1
console.log(increase()); // 1
console.log(increase()); // 1
정답
즉시 실행 함수를 사용한다.
const increase = (function() {
    let num = 0;
    return function() {
        return ++num;
    };
}());

console.log(increase()); // 1 console.log(increase()); // 2 console.log(increase()); // 3