[JavaScript] 자바스크립트 함수 내부 변수와 상수의 범위알기

252_자바스크립트 함수 내부 변수와 상수의 범위알기

[적용]

• 처리를 단위로 분할하고 싶을 때
• 변수, 상수의 유효 범위를 좁히고 싶을 때

---

[문법]

구문	의미
{}	블록 스코프

---

[내용]

let과 const로 선언된 변수와 상수는 {}로 감싸진 범위의 블록 내에서만 사용할 수 있다.

변수와 상수가 유효한 범위를 스코프(Scope)라고 하며, {}로 감싸진 유효 범위를 블록 스코프(Block Scope)라고 한다.

 

다음의 상수 a는 블록 스코프 내에서 사용되고 있으므로 모든 console.log()에 20이라는 결과가 출력된다.

블록 외부에서 선언한 변수와 상수도 내부에서 사용할 수 있다.

JavaScript           

{
  const a = 20;
  // 20 출력
  console.log(a);
  
  {
    // 20 출력
    console.log(a);
  }
}

실행결과

 

블록의 외부에서 상수 a를 사용하면 에러가 발생한다.

이유는 블록 내부에서 선언된 상수는 외부에서 엑세스가 불가능하기 떄문이다.

JavaScript  

{
  {
    const a = 20;
  }
    
  // 스코프를 벗어나므로 에러가 발생
  console.log(a);
}

실행결과

 

모든 스코프의 가장 상위는 전역 스코프가 된다.

전역 스코프에서 선언한 상수와 변수는 모든 블록에서 사용할 수 있다.

JavaScript  

const a = 20;

{
  console.log(a);  // 결과: 20
}

 

블록은 함수, if문, for문 등 여러 곳에서 사용된다.

다음 샘플을 통해 함수의 경우를 확인해 보자.

myValue는 myFunction 함수 내에서만 유효하다.

JavaScript  

function myFunction() {
  const myValue = '사자';
  console.log(myValue);
  
  function myChildFunction() {
    console.log(myValue);  // 결과: '사자'
  }
  myChildFunction();  // 결과: '사자'
}

myFunction();  // 결과: '사자'

// 스코프를 벗어나므로 에러가 발생
console.log(myValue);

 

if문의 경우도 확인해 보자.

if문의 외부에서는 상수 myValue2의 참조가 불가능하므로 에러가 발생한다.

JavaScript  

if (true) {
  // myValue2 정의
  const myValue2 = '사자';
}

// myValue2는 스코프를 벗어나므로 에러
console.log(myValue2);

 

---

[Appendix]

블록 스코프 범위를 벗어나는 var 선언

변수는 let이 아닌 var를 사용해서도 선언할 수 있다.

var는 예전부터 사용된 변수 선언 방법이지만, 블록 스코프를 사용한 범위의 한정은 불가하다.

다음의 코드를 통해 블록 스코프를 벗어난 변수 접근을 확인해 보자.

 

JavaScript  

{
  var myValue = 20;
}

console.log(myValue);  // 결과: 20 (에러가 발생하지 않음)

if (true) {
  if (true) {
    var myValue2 = '사자';
  }
}

console.log(myValue2):  // 결과: '사자' (에러가 발생하지 않음)

 

이와 같은 코드는 상수와 변수의 스코프 범위 파악이 어렵고 버그의 원인이 되기도 한다.

그러므로 기본적으로 블록 스코프 범위가 한정되는 const와 let을 사용하는 것이 안전하다.

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김