개발에 AtoZ까지

[ES6][JS] Javascript Scope 본문

프론트엔드/JAVASCRIPT

[ES6][JS] Javascript Scope

AtoZ 개발자 2021. 1. 30. 16:13
반응형

◆목표

Scope 정의
Scope 종류 및 특징
Block Scope 예시
Var 키워드와 Block Scope 결합 시 영향력

1. Scope 정의

- 자바스크립트 변수 또는 함수 선언시, 해당 변수 또는 함수가 유효한 범위를 의미함

2. Scope 종류 및 특징

- Global(전역) Scope : 코드 전체 범위

- Function(함수) Scope : 함수  내에서의 범위

- Block(블록) Scope : {} 괄호로 이루어진 블록 내에서의 범위

 

Tip)

일반적인 프로그래밍 언어에서는 전역,함수로 나눠지는데 자바스크립트에서 블록 scope가 추가되어 다른 언어와 상이함

3. Block Scope 예시

- let과 const로 선언된 변수는 블록 안에서 선언이 되었다면, 블록 밖에서는 유효하지 않음

{
  const name = 'dave';
  console.log(name);
}
//name 변수를 찾지 못함
console.log(name);

 

- 블록 밖에서 let과 const로 선언된 변수는 블록 안에서도 유효함

const name = 'dave';
{
  console.log(name);
}
console.log(name);

4. Var 키워드와 Block Scope 결합 시 영향력

- 함수 안에서 var 키워드로 선언된 변수는 함수 외부에서는 유효하지 않지만, 블록 안에서 var 키워드로 선언된 변수는 블록 외부에서도 유효함(이를 함수 scope라고 함)

 

- 함수 안에서 var 키워드로 선언된 변수는 함수 외부에서 접근 불가

function fun(){
  var name='test';
  console.log(name);
}
console.log(name);  //오류

 

- 블록 안에서 var 키워드로 선언된 변수는 함수 외부에서 접근 가능

{
  var name='test';
}
console.log(name);

 

반응형
Comments