1. Heap과 Call에 들어가는 데이터 타입
2. 호이스팅
3. 클로저
4. var를 권장하지 않는 이유💻 Heap과 Call에 들어가는 데이터 타입
Memory Heap은 객체, 배열, 함수와 같은 동적인 참조타입 값을 저장하고, Call Stack에는 지역변수와 매개변수 같은 정적인 원시타입 값이 저장되는 임시 메모리 영역이다.
🚀 호이스팅
변수 선언들은 코드가 실행되기 전에 처리하기 때문에 코드 내 어느 위치에서 선언하든 최상위에 선언하는 것과 동등하다. 이때 변수 선언을 최상단으로 끌어올리는 것과 같은 역할을 하는 것을 호이스팅 이라 한다.
🧷 클로저
function counting() {
let i = 0;
for ( i=0; i<5; i++) {
setTimeout(function () {
console.log(i);
}, i * 100);
}
}클로저로 위의 현상을 이해하기 위해서는 먼저 자바스크립트의 비동기 처리방식을 알아야 했는데, 다른 포스팅으로 정리해놓았다.
위 코드를 실행하면 0,1,2,3,4가 출력되는 것이 아니라 5,5,5,5,5가 출력되는데, 이는 자바스크립트 내의 클로저 때문이다.
setTimeout에는 i의 변수 선언이 존재하지 않는데, 외부의 for문에서 i(클로저)를 가져오기 때문에 이미 5가 되어버린 i를 가져와 5가 출력되는 것이다.
❌ var를 권장하지 않는 이유
- var는 함수레벨스코프로써 함수의 코드블록외에서 생성한 변수는 모두 전역 변수로 만들어지기 때문에, 여러가지 문제를 일으킨다.
- var 키워드 생략을 허용하기 때문에 전역 변수를 양산할 가능성이 크다.
- 변수 중복 선언이 가능하여 의도하지 않은 변수값의 변경이 일어날 수 있다.
- 호이스팅으로 인해 나중에 선언을 해도 참조에러가 발생하지 않고 undefined를 반환한다.
이를 해결하기위해 ES6에서 블록레벨스코프 let, const가 등장했다.
이들은 함수 뿐만이 아니라 모든 코드블록레벨(if, for, while 등등..) 내에서 선언된 곳에서만 유효하다. 때문에 전역변수를 남발하지 않고 효과적으로 지역변수를 활용할 수 있다.
또한 중복 선언이 불가능하기 때문에 실수를 줄일 수 있는 등, var의 단점을 보완한 변수선언이기 때문에 되도록 var는 사용하지 않는 것이 좋다.
이상으로 1주차 Day1 강의를 들으면서 보강이 필요하다고 느꼈던 부분을 정리해보았다.
데브코스의 첫 강의를 수강한 소감
'역시 빡세다...'
꼭 알아야 하는 중요한 포인트를 강의로 가르쳐 주지만, 세세하게 모든 것들을 알려주진 않기 때문에 모르는 부분들을 직접 찾아 보강하고 예습 해둘 필요가 있다. 즉, 내가 모르는 것을 알려주는 것이 아닌 내가 무엇을 모르는지 알려주는 듯한 강의였다.
하지만 강의에 대한 질문에 대해서는 감동받을 정도로 정말 자세하게 알려주시기 때문에 어렵지만 더 공부하는 느낌이 나서 재밌는 것 같다!
참고사이트 webisfree(클로저), poiemaweb(클로저), poiemaweb(var,let,const)
