yuzunsang / JS-deep-dive-study

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

[CH13]스코프 #19

Open yuzunsang opened 3 months ago

yuzunsang commented 3 months ago

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

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

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

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

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

Q. 다음의 코드 결과가 나온 이유를 설명하시오.

var x = 1;

function bar() {
    var x = 10;
    foo();
}

function foo() {
    console.log(x);
}

bar(); // 1
foo(); // 1
정답
자바스크립트의 렉시컬 스코프 개념
함수를 어디에서 호출했는 지가 아닌, 어디에 정의했는 지에 따라 상위 스코프가 결정되기 때문.
bo-eun commented 3 months ago

Q-1. 다음 코드의 결과와 나온 이유를 설명하시오.

for(var i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i);
    }, 1000)
};
정답
5가 다섯번 출력됨
for문이 반복됨 > var i는 함수레벨 스코프이므로 for 밖, 전역에 변수가 생성됨 > 전역변수 i에 값 0, 1, 2, 3, 4, 5가 차례대로 재할당됨 > for문 완료 후 비동기 함수인 setTimeout실행 시 i가 있는 가장 가까운 스코프(전역스코프)에서 i를 출력함

Q-2. 다음 코드의 결과와 나온 이유를 설명하시오.

for(let j = 0; j < 5; j++) {
    setTimeout(() => {
        console.log(j);
    }, 1000)
};
정답
0, 1, 2, 3, 4가 출력됨
for문이 반복됨 > let j는 블록레벨 스코프이므로 let j = 0, let j = 1, let j = 2... 스코프가 형성됨 > for문 완료 후 비동기 함수인 setTimeout이 실행되며, 실행 시 j가 있는 가장 가까운 스코프(블록스코프)에서 j를 출력함
![image](https://github.com/yuzunsang/JS-deep-dive-study/assets/169366835/6127be69-217c-4a44-b6fd-0a4da6089ac3)

출처 :https://velog.io/@qwe8851/for%EB%AC%B8-%EC%95%88%EC%97%90-var%EC%93%B0%EB%A9%B4-%EC%95%88%EB%90%98%EA%B3%A0-let%EC%93%B0%EB%A9%B4-%EC%9E%98-%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0