📝 오늘 한 것

1. scope chain / global scope / setTimeout() / 전역변수 var VS 지역변수 let (+const) / for 반복문

📖 학습 자료

1. 사전 학습 가이드 STEP 5 (Scope Introduction ~ Global Scope)

2. 많은 검색 자료들

📚 배운 것

Scope

1. 개념

• 코드에 접근할 수 있는 범위

2. scope chain(스코프 체인)

• 실행문의 위치를 기준으로 하위 scope(그 실행문이 들어 있는 함수)부터 시작해 원하는 변수의 값을 찾을 때까지 상위 scope로 탐색한다

• 상위 scope에서는 하위 scope 내부 정보에 접근할 수 없다

• 하위 scope에서 상위 scope 내부 정보에는 접근이 가능하다

1) global scope

• 어떤 함수로도 둘러싸여 있지 않은 가장 최상위 scope

• 하나의 웹 페이지에는 하나의 global scope가 존재한다. 이는 여러 개의 script가 사용할 수 있는 공용 공간이다.

// 1. a 라는 변수 선언 & 값 할당
var a = 1;

// 2. one이라는 함수 선언 & 실행
function one () {
  console.log(a)
}
one();

// 5. setTimeout
setTimeout(function two () {
  console.log(a)
}, 1000);

// 3. a라는 변수 선언 & 값 할당
var a = 2;

// 4. console API 실행
console.log(a);

/*
console 창 결과

1 : 첫 번째 console.log
2 : 세 번째 console.log
2 : 두 번째 console.log
*/

💡 타이머 함수

자바스크립트의 실행 순서 참고

• 특정 시간에 특정 함수를 실행하도록 하는 함수이다.

• 웹 브라우저에 처리를 부탁하는 함수 중 하나이다. 이 경우 웹 브라우저는 처리를 한 후 처리가 완료되었음을 자바스크립트에 알려준다.

• 현재 실행 중인 다른 코드의 실행이 끝나기 전에는 실행이 되지 않는다.

1) setTimeout(함수, 시간) : 일정 시간 후 함수 실행
2) setInterval(함수, 시간) : 일정 시간 간격으로 함수 반복 실행
3) clearTimeout(ID) : 실행되고 있는 Timeout 중지
4) clearInterval(ID) : 실행되고 있는 Interval 중지

2) 전역 변수 VS 지역 변수

Scope/ 지역 변수/ 전역 변수, 자바스크립트의 실행 순서 참고

📌 전역변수 var

• 함수 단위로 scope가 정해진다. 블록 밖에서도 블록({}) 안에 생성된 변수에 접근할 수 있다. 즉, 블록 안에 변수를 생성했어도 var를 이용했다면 지역 변수가 아닌 전역변수가 된다.

• var를 이용해 같은 변수를 여러 번 선언할 수 있다.

• 변수를 선언하지 않고도 값을 할당할 수 있기 때문에 오류를 방지하기 위해선 되도록 사용하지 않는 게 좋다. 오류 방지를 위해 'use strict';를 자바스크립트 맨 위에 적어준다.

var c = 10;

function me () {
  var c = 20;
  console.log(c); // 20
}

var c = 30; // 같은 변수 재선언 가능

me();
console.log(c); // 30

📌 지역변수 let

• 블록 단위로 scope가 정해진다.

• let을 이용해 이미 선언한 변수는 또 다시 선언할 수 없다. 그러나 let을 사용해 선언한 변수에 이미 할당된 값을 다른 값으로 바꾸는 것은 가능하다.

let a = 10;

function my () {
  let a = 20;
  console.log(a); // 20
}

let a = 30; // 불가능. 단, a = 30 이라고 쓰면 가능

my();
console.log(a); // error: Identifier 'a' has already been declared

💡 한편, 변수를 선언하는 또 다른 키워드인 📌 const 란 무엇일까?

• 블록 단위로 scope가 정해진다.

• 변수가 아닌 상수를 선언한다. 즉, 한번 할당한 값을 변경할 수 없다.

• const를 이용해 이미 선언한 변수는 또 다시 선언할 수 없으며, 할당된 값을 변경할 수도 없다.

const d = 10;

function my () {
  const d = 20;
  console.log(d); // 20
}

d = 30; // 이것조차 불가능. const를 이용해 선언하는 것은 상수이다.

my();
console.log(d); // error: Assignment to constant variable.

💡 var, let과 for 반복문

1) var과 for 반복문

for(var i = 0; i<5; i++){
  console.log(i);
} 
/*
0
1
2
3
4
*/

console.log('final i:', i);
// final i: 5
// for 반복문의 블록 바깥쪽에서 var로 선언된 블록 안쪽의 변수에 접근 가능

for(var i = 0; i < 3; i++){
  setTimeout(function(){
    alert(i);
  }, 0);
}
/*
3
3
3
*/

2) let과 for 반복문

for(let i = 0; i < 5; i++){
  console.log(i);
} 
/*
0
1
2
3
4
*/ 

console.log('final i:', i);
// error: i is not defined
// for 반복문의 블록 바깥쪽에서 let으로 선언된 블록 안쪽의 변수에 접근 불가능

for(let j = 0; j < 3; j++){
  setTimeout(function(){
    alert(j);
  }, 0);
}
/*
0
1
2
*/

✨ 내일 할 것

1. scope, hoisting

2. 사전 학습 가이드 STEP 5 (~ Primitive and Reference Quiz)