[자바스크립트] - 변수 let / 함수레벨의 스코프(함수영역) , 블록레벨의 스코프(블록영역)

let과 const

var 예약어를 사용한 변수는 함수 영역의 스코프를 가진다.
즉 스크립트 소스 전체에서 사용할 수 있는 변수이다. 또한 재할당과 재선언이 가능하다.
그래서 var 예약어를 사용하면 잘못했을 경우 예상하지 못한 프로그램 오류를 발생시킬 수 있다.
그래서 ES6버전부터는 var의 단점을 보완한 let과 const라는 예약어가 새롭게 등장했다.
let과 const도 var와 마찬가지로 변수를 키워드이다.

 

ES6 이전의 자바스크립트 프로그램에서는 var예약어로만 변수를 선언할 수 있었다.
그래서 실수로 var라는 예약어를 빠트리면 의도하지않게 전역변수가 되기도 하고,
프로그램 길이가 길어지다보면 실수로 사용하는 변수를 다시 재선언하거나 값을 재할당 해버리는 경우가 생기기도 한다.
그래서 let과 const가 등장. 되도록이면 var는 사용하지 않기로 권장하고 있다.

let 과 const는 호이스팅이 되지 않는다. 

---

  let  

  [기본형]

let 변수명; 또는 let 변수명 = 값;

재할당	재선언	호이스팅
O	X	X

값을 새로 집어넣는 건 가능

 

변수를 만드는 새로운 키워드로 재할당은 가능하지만 재선언은 불가한, 변수를 만드는 키워드이다. 
그렇기 때문에 var 변수처럼 이름이 중복되어 코드의 에러를 발생시킬 일이 없다. 

재선언했으면 오류로 알려준다.

 

let 예약어로 선언한 변수는 선언한 블록({}로 묶어진 부분) 에서만 유효하고
블록을 벗어나면 사용할 수 없다.

( if문 안에서 선언했다면 if 안에서만 쓸 수 있다. / for문에서 선언했다면 for문 안에서 쓸 수 있다./

전역에서 선언했다면 전역에서도 쓸 수 있다 다만 var보단 좀 더 안전하다 )

 

---

let으로 만든 변수는 호이스팅이 없다. 

var 예약어를 사용한 변수는 선언하기 전에 실행하더라도 이전에 할당되지 않은 자료형인 undefined값을 가질 수 있다. 
이것은 호이스팅 때문이다. 
하지만 let 예약어를 사용한 변수는 선언하기 전에 사용할 경우 오류 메세지를 나타낸다. 

let y 를 만들기 전에 콘솔로그로 y를 출력하게 되면 y는 이전에 선언된 적이 없었다는 오류를 내준다. 

행동하기 전에 먼저 선언부터 해야한다.  

(var는 아래에 나중에 선언됬네 그럼 있네 하고 언디파인드 값을 내준다. 그래서 코드가 나중에 꼬이게 된다)

---

블록이란?

for문이나 if문, switch문이나 함수처럼 어떤 문장 안을 뜻한다. 이것을 '블록 레벨의 스코프를 가진다'라고 표현한다.
( var처럼 전역에서 쓰이는 변수는 '함수 레벨의 스코프를 가진다'라고 표현하고 스크립트 소스 전체를 의미한다. )

빨간박스 - 함수레벨의 스코프 / 함수영역

파란 박스 - 블록레벨의 스코프 / 블록영역 

---

변수 sum은 함수 calcSum안이 유효범위라서 for문 안으로 들어올 수 있다. 

변수 i는 for문이 유효범위라서 for문 밖으로 나갈 수 없다. 

---

함수를 만든 것보다 그 위에서 함수를 호출해도 함수가 실행된다. 

여기서 console.log(sum) 은 sum = 100; 재할당한 것보다 윗줄에 있으니 sum = 100; 은 몰라서

55로 출력된다. 

만약 sum = 100; 아래에 console.log가 있다면 값은 달라진다. 

---

함수 바깥에 let sum 을 선언하면 가능하다.

전역변수가 되었기때문에 다만 바깥에서 이제 sum이라는 변수는 사용못하게 된다.