[javascript] 함수 스코프와 블록 스코프 (function scope and block scope)

1. 함수 스코프 (function scope) 의 개념

• 함수가 생성되면 그 함수에 대한 새로운 scope 가 생성됩니다.
• 이 범위를 function scope 라고 합니다.
• function scope 내의 변수는 그 함수 내에서만 접근이 가능하고, 함수 밖에서 접근이 불가합니다.

1) 코드 예제 1

<script>
function scopeF() {
  var secret = "hello";
}
console.log(secret); // ReferenceError: secret is not defined
</script>

• 위의 코드에서 var 키워드로 변수를 생성시 function scope 로 생성됩니다.
• 따라서, 함수 밖에서 접근할 수 없습니다.

2) 코드 예제 2

<script>
function runVarLoop() {
  for (var i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4
  } 
  console.log(i); // 5
}

runVarLoop();
// result : 
// 0
// 1
// 2
// 3
// 4
// 5
</script>

• 위의 코드에서 var 키워드로 변수를 생성시 function scope 로 생성됩니다.
• 그 의미는 runVarLoop 함수 내에서 모두 접근 가능하다는 것입니다.

2. 블록 스코프 (block scope) 의 개념

• 블록 {} 이 생기게 되면 새로운 scope 가 생성됩니다.
• 이 범위를 block scope 라고 합니다.
• block scope 내의 변수는 그 블록 내에서만 접근이 가능하고, 블록 밖에서 접근이 불가합니다.

1) 코드 예제

<script>
function runLetLoop() {
  for (let i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4
  }
  console.log(i); // ReferenceError: i is not defined
}

runLetLoop();
// result : 
// 0
// 1
// 2
// 3
// 4
// ReferenceError: i is not defined
</script>

• 위의 코드에서 let 키워드로 변수 i 를 생성시, 변수 i 는 block scope 로 생성됩니다.
• 따라서, 블록 밖에서 접근할 수 없습니다.
• 위의 코드에서 for 문 사용시, let 키워드로 생성된 변수 i 는 각 블록 내에서 선언된 것처럼 작동합니다.
• 따라서 for 문의 블록을 벗어난 곳에서 변수 i 는 접근이 불가합니다.

참고 :
[JavaScript] Function Scope & Block Scope(함수 스코프 & 블록 스코프)
( https://moon-ga.github.io/javascript/function-block-scope/ )