함수 스코프
Scope : 범위, 유효공간, 유효 범위
- 함수 스코프 : 함수에 의해서 생기는 범위. 변수의 유효범위.
- 블록 스코프 : Block Scope : 블락에 의해 생기는 유효범위
{ }에 의해서 변수의 유효범위가 결정된다.
변수 선언 방식 종류
var, let, const
✔ 예제 1번
{
let a = 10; {
let a = 20;
console.log(a) //20
}
console.log(a) //10
}
console.log(a) //reference error✔ 예제 2번
function hasValue(p) {
console.log(v) //undefined
if (p) {
//truthy
var v = 'blue';
console.log(v); //blue
} else {
//falsy
var v = 'red';
console.log(v);
}
console.log(v); //blue
}
hasValue(10);
//var로 선언한 변수는 블록스코프의 영향을 받지 않는다.👇 var → let 으로 바꾸기
function hasValue(p) {
console.log(v) //v is not defined
if (p) {
//truthy
let v = 'blue';
console.log(v);
} else {
//falsy
let v = 'red';
console.log(v);
}
console.log(v);//v is not defined
}
hasValue2(10);💡 블록스코프는 호이스팅을 할까?
-
블록스코프는 중괄호 {}의 영향을 받는다고 했다.
-
[참고사항]
data의 종류 : 문단, 식, 값
(1) if문, for문, while문, switch-case문 => '문단'
결과를 리턴하지 않는다. 실행하고 끝이다.
→ 문 자체가 하나의 "block scope"가 된다.
(2)'표현식', expression. 값이 될 수 있는 경우.
(3)'값' -
scope의 종류는 2가지
ㄴ 함수에 의한 스코프
ㄴ 블록에 의한 스코프
if (true) {
//if문 block scope open1
let a = 10;
if (true) {
//if문 block scope open2
console.log(a); //✅a is not defined
const a = 20;
}
console.log(a); //10
}
console.log(a); //a is not defined✅ 이 부분에서 호이스팅이 되는지의 여부를 판단하자
호이스팅이 된다면
a : undefined
호이스팅이 안된다면
a 선언되지 않았으므로
상위 스코프로 이동해서 a가 선언된 곳을 찾는다.
→ a= 10
라고 예상을 하고..! console창에 찍어보니
Reference Error가 뜬다!❌
TDZ : Temporal Dead Zone (임시 사각 지대)
Ecmascript에서 정의한 개념은 아님
let, const에서 실제로 변수를 선언한 위치에 오기 전까지는 변수를 불러올 수 없다는 것!
💡 호이스팅
- 기존
var:
1) 변수명만 위로 끌어올리고(호이스팅)
2) undefined를 할당한다.
<
(function () {
var a = 10;
(function () {
console.log(a); //undefined
var a = 20;
})();
console.log(a); //10
})();
console.log(a); //a is not defined
let,const
1) 변수명만 위로 끌어올리고
(호이스팅을 하긴 한다!)
2) 끝!
👉undefined할당이 없어서 참조 에러가 나는 것
즉, 변수값이 매칭이 안되어 있다는 뜻
if (true) {
let a = 10
if (true) {
console.log(a) //referecn Error: a is not defined.
const a = 20
}
console.log(a)
}
console.log(a);this
var value = 0
var obj = {
value: 1,
setValue: function () {
this.value = 2; //this = obj → 따라서 obj.value = 2가 된다.
(function () {
this.value = 3
//this = window → 함수를 실행한 것 뿐, 메서드를 호출한 것이 아니므로, 함수 호출에 대한 this는 전역객체 window이다.
//→ window.value = 3;
// 전역변수 value =3;
})();
}
}
obj.setValue(); //메서드 호출
console.log(value); //3
console.log(obj.value) //2💡 2개의 this를 일치시키고 싶다면?
var value = 0
var obj = {
value: 1,
setValue: function () {
var self = this
self.value = 2;
(function () {
self.value = 3
})()
}
}
obj.setValue();
console.log(value); //0
console.log(obj.value); //3✔ call이나 apply써서 this를 불러와도 무방 → 동일한 결과가 나옴
var value = 0;
var obj = {
value: 1,
setValue: function(){
this.value = 2;
var a = function (){
this.value = 3;
}
a.call(this);
}
}
obj.setValue();
console.log(value); //0
console.log(obj.value); //3ES6+버전에서는 간단하게 block scope를 쓰면된다.
let value = 0
let obj = {
value: 1,
setValue: function () {
this.value = 2 {
this.value = 3
}
}
}
obj.setValue()
console.log(value)
console.log(obj.value)block scope는 this에 영향을 받지 않는다.
모든 '문'의 형태에 적용
각 콘솔에 찍히는 값을 유추해 보자
EX1
{
let a = 2
if (a > 1) {
let b = a * 3
console.log(b) //6
} else {
let b = a / 3
console.log(b)
}
// console.log(b) //Reference Error
}
console.log(a) //Reference ErrorEX2
if (Math.random() < 0.5) {
let j = 0
console.log(j)
} else {
let j = 1
console.log(j)
}
console.log(j) // if..else문을 벗어나 있음 -> Reference Error! (j is not defined)EX3
let a = Math.ceil(Math.random() * 3)
switch (a) {
case 1: {
let b = 10
console.log(a + b) //11
break
}
case 2: {
let b = 20
console.log(a + b) //22
break
}
case 3: {
let b = 30
console.log(a + b) //33
break
}
}
console.log(a, b) //b is not definedEX4
var sum = 0
for (let i = 1; i <= 10; i++) {
sum += i
}
console.log(sum)
console.log(i) //i라는 변수는 for문 안에서만 유효함 따라서 Reference Error! i is not defined가 나옴변수 let
let a = 1
function f() {
console.log(a, b, c) //b, c is not defined
let b = 2
console.log(a, b, c) //c is not defined
if (true) {
let c = 3
console.log(a, b, c) //1, 2, 3
}
console.log(a, b, c) //c is not defined
b
}
f()👉let은 block scope에 갇힌다, TDZ가 있다.(❗var 변수와의 차이점)
var funcs = []
for (var i = 0; i < 10; i++) {
funcs.push(function () {
console.log(i);
})
}
funcs.forEach(function (f) {
f();
});👉 결과 : 10이 열 번 나온다.
[
function(){console.log(i);},
function(){console.log(i);},
function(){console.log(i);},
function(){console.log(i);},
...
]
💡 실행을 언제 하는가?
if문이 다 돌고 나서 다음번 forEach 돌릴때 그제서야 실행된다.
▪ WHY? 실행 컨텍스트는 함수를 호출했을 때(실행할 때) 열리기 때문!
▪ 실행할 때 비로소 변수를 hoisting하고 this를 바인딩하고 자신한테 없는 변수를 외부에서 참조하려고 찾는다.
▪ i를 찾아야 하는데 외부 스코프 즉 전체 스코프 공간에 i는 for문에서 선언했던 i가 있다.
이 값은 10번 돌고 i=9일때까지 실행되고 난 후 i++에 의해 i=10인 상태이다.
→ for문이 끝난 후에는 i가 10이 된 상태이다.
→ 배열에 10번을 돌아도 계속 값이 10으로 찍히게 되는 것이다.
💡 그럼 원래 나오게 하고 싶었던대로 i가 0 ~9까지 출력되게 하려면 어떻게 해야 될까?
i를 살아있게 해줘야 한다.
각각의 for문 안에서 i를 { } 안에 넘겨줘야 한다. => 클로저 이용! (ES5)
var funcs = [];
for (var i = 0; i < 10; i++) {
funcs.push((function (v) {
return function () {
console.log(v)
}
})(i));
}
funcs.forEach(function (f) {
f();
})ES6에서는 어차피 for문이 block scope이기 때문에 let 변수 사용하면 i 값이 별도의 처리를 하지 않아도 그냥 block scope 내에 존재하게 된다.
let funcs = []
for (let i = 0; i < 10; i++) {
funcs.push(function () {
console.log(i)
})
}
funcs.forEach(function (f) {
f()
})변수 const
