Udemy_JavaScript: The Advanced JavaScript Concepts (2021) 강의를 바탕으로 메모한 내용입니다.
Reference Colki Velog_ JS-Scope
Function Scope vs Block Scope
▪ var 함수레벨스코프
자바스크립트는 기본적으로 함수스코프를 기준으로 하는 함수레벨스코프 를 따른다.
함수 레벨 스코프란 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효 하고 함수 외부에서는 참조할 수 없다! 라는 스코프규칙이다.
function loop() {
for (var i = 0; i < 5; i++) {
console.log(i); // 0 1 2 3 4
}
console.log(`final: ${i}`); // final: 5
}
loop();var 역시 함수스코프레벨을 따르므로 for문의 코드블록이 종료된 다음의 i값을 받아올 수 있다.
var는 자신이 속한 함수안에서는 코드블록 안에 있든 없든 무조건 전역변수로 사용된다
▪ let const 블록레벨스코프
블록 레벨 스코프란 코드 블록({…})내에서만 변수를 사용하는 스코프를 의미한다.
다른 프로그래밍 언어처럼 자바스크립트에서도 블록레벨스코프를 따를 수 있게 하는 키워드가 let, const 이다.
function loop() {
for (let i = 0; i < 5; i++) {
console.log(i); // 0 1 2 3 4
}
console.log(`final: ${i}`);
// ReferenceError: i is not defined
}
loop();let은 var와 달리 블록레벨스코프를 따르기 때문에 for문이 지역변수, loop 함수스코프가 전역이 된다.
for문의 코드블록문 옆에 있는 조건식도 코드블록으로 같이 취급한다.
그래서 loop함수(전역)에선 지역에 해당하는 for문에 접근할 수 없기 때문에 함수내부에서 i라는 변수를 찾지 못한다.
block scoping means declaring a variable not just inside a function but around any curly brackets like if statements or loops.
let과 const키워드는 블록문에 갇혀있는 셈이다.
Global Variables
운동장처럼 공유하는 공간이 전역스코프=글로벌스코프이다.그리고 전역스코프에 정의된 변수를 전역변수라고 부른다.
하지만 지나친 전역변수의 사용은 지양해야 한다.
- Too much data
limited space limited memory right.
polluting the global namespace having too much data on our global execution environment.
it just overflows making things slower and slower and slower until our browsers crash.
cause memory leak.
- Overwrite
Everything is on the global execution context and they overwrite each other.
<body>
<script> var a = 1; </script>
<script> var aa = 10; </script>
<script> var aa = 2; </script>
<script>
var a = 999;
console.log(a); // 999
console.log(aa); // 2
</script>
</body>나의 소중한 변수를 공용공간(Global Scope)에 배치해둔다면, 다른 누군가가 의도치않게 그 변수를 사용할 수도 있고, 혹은 수정/삭제할 가능성도 있기 때문에 꼭 필요한 경우가 아니라면 전역변수 사용은 지양하는 것이 좋다.
그래도 필요하다면 최소한으로 사용해야 한다.
그에 반해 지역스코프, 지역변수는 나만의 공간이니 소중한 내 변수를 보호할 수 있는 울타리가 되어 준다.
IIFE 즉시실행함수
Immediately
Invoked
Function
Expression.
IIFE: (function () {})();
this isn't a function declaration. It's a function expression
🔹 자바스크립트 엔진은 IIFE를 함수로 인식하는게 아니라 둘러싸고 있는 ( ) 를 먼저 보고 함수표현식으로 받아들인다.
the anonymous function within this IIFE is a function expression and it's not being assigned to any global variables no global property is really being created.
🔹 IIFE내의 익명 함수표현식은 전역 변수 또는 전역 프로퍼티로 할당되지 않는다.
Is there and all of the properties created inside over here are going to be scoped inside here. So it's only going to be available inside this if the but not outside.
🔹 IIFE스코프 외부에서는 IIFE 내부의 데이터에 접근할 수 없다.
We're attaching this private data to a function that creates fresh environments
🔹 오직 IIFE 의 local scope에서만 사용할 수 있는 새로운 Variable Environment가 만들어지는 것이다.
var script1 = (function () {
/*-- 새로운 변수환경 --*/
function a() {
return 10;
}
return {
a: a
};
/*-- 새로운 변수환경 --*/
})();
function a() {
return 'heyheyhey';
}
console.log(a()); // 'heyheyhey'
console.log(script1.a()); // 10
// 덮어씌워지지 않은a 의 값을 따로 받아낼 수 있다!
// Tip!
// IIFE script1은 함수선언문이 아니라 표현식이므로
// script()이렇게는 호출할 수 없다.