[인프런]Javascript - 변수의 스코프(전역 변수, 지역 변수, 자동 전역 변수, 매개변수의 스코프, for문 안의 스코프, const와 let, 호이스팅, 클로져)

* 이 글은 인프런에서 제공하는 호눅스님의 유료 강의 '쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1'를 듣고 공부하며 정리한 글입니다. 강의 내용에 더해, 제가 필기하고 구글링한 내용이 정리되어 있습니다. 초보인 제가 이해한 대로 정리했기 때문에, 부정확한 내용이 있을 수 있음을 감안해 주시길 바랍니다. 강의를 듣고 내용을 정리한 글이기 때문에 문제가 되지 않는다는 인프런 측 답변을 받은 적이 있으나(https://bibi6666667.tistory.com/37), 저작권상 문제가 된다면 보호 모드(비공개)로 전환하겠습니다.

스코프 Scope란?

• 변수의 유효범위.
• 검색키워드(구글링): javascript scope

각자 검색자료를 읽어보고, 조금 더 공부해 보세요. (자습)

---

전역 변수 global variable

var a = 10
console.log(a);
// a는 전역변수.

함수 외부에서 선언된 변수.
전역변수는 어떤 함수 내에서도 사용할 수 있다.

👉많이 쓰면 좋지 않습니다. 아예 안 쓸 순 없지만, 가급적이면 사용하지 않는 게 좋습니다.
(코딩 중 전역변수 때문에 자잘한 에러들이 발생할 수 있기 때문)

👉매개변수와 return을 잘 쓰면 전역변수 사용을 줄일 수 있다. (= 결국 함수를 잘 써야 한다)

 

지역 변수 local variable

var foo = function (){
    var b = 25;
    console.log(a); // a는 전역변수이므로 함수 내에서도 사용 가능.
    console.log(b);
};
foo();
b; // b는 지역변수이므로 전역에서 호출하면 b is not defined 에러가 뜬다.

함수 안에서 선언된 변수.
👉지역변수가 선언된 함수 외부에서는 그 변수를 사용할 수 없다.

 

자동 전역 변수

var foo2 = function (){
    c = 100;
    console.log(c);
};
c; 
// c는 foo2함수 내에서 선언했지만 var없이 선언해 자동전역변수가 되었다. 절대 비추

자바스크립트에서 제공하는 나쁜 기능.
함수 안에서 var 없이 변수를 선언하면 자동 전역 변수가 된다. 절대로 이렇게 하면 안 됩니다!

---

 

매개변수(파라미터)의 스코프

var foo3 = function(v) {
	console.log(v);
}
foo3(25);
v; 
// v는 foo3(v)의 매개변수이므로 지역변수와 같은 취급.

👉함수의 매개 변수(파라미터, parameter)는 자동으로 지역 변수 취급.
(함수 내에서 쓰이는 매개변수는 그 함수 바깥에서 읽고 쓸 수 없다. 매개변수 = 일종의 지역 변수.)

 

for문 안에서 사용된 변수의 스코프

for (var i = 0; i < 5; i++) {
	console.log(i);
} // 0, 1, 2, 3, 4
i; // 5. i는 전역변수로 취급된다.

var foo4 = function () {
    for (var j = 0; j < 5; j++) {
    	console.log(j);
    }
    console.log(j); 
    // for문이 foo4라는 함수 안에 있으므로, j는 지역변수.
} 
// 0, 1, 2, 3, 4, 5가 출력됨. 0~4는 반복문으로부터, 5는 반복문 바깥으로부터.
// j가 5가 되는 순간 for문을 빠져나오기 때문에, for문 바깥에서 j=5이다.
j; // j는 지역변수로, 함수 바깥에서 쓸 수 없다.

언어마다 다른데, 자바스크립트에서는 for문 안에서 선언해도 for문 바깥에서 선언된 것과 동일한 효과입니다.
for문 조건문에 선언된 변수 (i,j 등..) = 전역 변수.
(for문을 함수 안에 넣어서 사용하지 않으면 i, j .. 등등은 전역변수가 된다)

const와 let

Javascript ES6버전에서 새로 등장한 문법으로, var 와는 조금 다르게 동작합니다.

일반적으로 연습할 때는 const와 let을 쓰는 걸 권장합니다.

( 지금은 자바스크립트 왕초보라 var를 쓰지만, 나중에는 const와 let 만 사용하는 것이 좋다)

const 
: (var와 달리) const로 변수를 선언하면 값을 수정할 수 없고, 재선언 할 수 없다.
- 에러를 막아주기 때문에 좋다.
: const는 읽기 전용이다.

const d = 10;
    //d = 25; // 에러. const로 변수를 선언하면 값을 수정할 수 없음.
    //const d = 10; // 에러. const로 변수를 선언하면 재선언할 수 없음.
    // const는 읽기 전용.

 

let
: let으로 변수를 선언하면 값을 수정할 수 있다. but 재선언은 할 수 없다.
: let은 읽기, 쓰기 겸용이다.
: let은 블록 범위 스코프를 가지고 있습니다.
(let으로 선언된 변수는 블록 범위를 넘어가면 사용할 수 없다)
-> 좀더 정교하고 실수를 막을 수 있어 좋다.

let x = 10;
x = 15;// let으로 변수를 선언하면 값을 수정할 수 있음.
// let x = 20; // 에러. let도 재선언은 불가능하다.
// let은 읽기, 쓰기 겸용이다.

var foo5 = function () {
    let y = 20;
    console.log(y);
}
foo5(); // 20
// y; // 에러. y is not defined
// let으로 선언하면 그 블록 내에서만 사용 가능(블록 스코프)

for (let k = 0; k < 5; k++) {
	console.log(k);
}
//k; // 에러. let으로 선언한 변수는 var과 달리 블록스코프이므로
// for문 블록을 벗어나면 사용할 수 없다.

 

☝ 초보라면.. 
👉일단 변수 선언은 무조건 const로 하자.
👉const로 안 되는 상황 발생시에 let을 쓰자.
(초보들은 어떤 변수가 읽기 전용인지 / 읽기, 쓰기 겸용인지 모르기 때문에,
우선 모든 변수를 읽기 전용인 const로 선언하고,  
그 변수가 읽기,쓰기 겸용이 되어야 할 때 let으로 바꿔서 선언하면 된다.)

참고 링크 

 

---

 

호이스팅 hoisting

더 검색해서 공부해 봅시다.

console.log(b);
const b = 10;
console.log(b);
// 1번째 줄에서 에러. Uncaught ReferenceError: Cannot access 'b' before initialization
// 변수를 선언도 하기 전에 값을 쓰려고 하니 에러가 난 것.

console.log(a); 
var a = 10; 
console.log(a); 
//undefined 
//10
// const로 b를 선언했을 때와 달리, var로 a를 선언하니 에러가 뜨지 않고 undefined가 뜸.

var가 안 좋은 이유 중 하나?이다.

var로 변수 a를 선언하고, 선언하기 전 위치에서 a를 가져다 쓰면 에러가 아닌 undefined가 뜬다.
이는 var로 변수를 선언하면,
console.log(a)를 첫 번째로 찍었을 때 이미 a라는 변수가 있다고 가정해 버림.
그리고 a라는 변수가 있긴 하지만 값이 정의되지 않았으므로 undefined가 뜨는 것.

이와 같은 현상을 예방할 수 있기 때문에 const로 변수를 선언하는 것이 좋다.

 

 

클로져(closure)

클로져는 고급 주제 중 하나입니다. 관심이 있으시면 검색해서 공부해 보세요.
초급에서는 공부 안 해도 되는 주제이지만 중급에서는 꼭 알아야 하는 것 중 하나입니다.
(우선은 '클로져'라는 개념이 있다 정도만 알아두자..)