CODE:H

JavaScript - Scope(스코프)

 
  • Oct 26, 2020

스코프란

Scope 한글로 변역하면 범위라는 뜻이다.
javascript에서는 변수에 접근할 수 있는 범위라고 정의한다.

Global Scope(전역 스코프)

전역에 선언한 변수에 접근할 수 있기 때문에 코드 모든곳에서 변수를 사용할 수 있다. 

const a = 'Hello!' // 전역 스코프

function hi() {
  console.log(a)
}
console.log(a) // 'Hello!'
hi() // 'Hello!'

const 나 let 을 사용하면 동일한 변수명을 사용할 수 없지만 var를 사용할 시
동일한 변수명이 가능하여 전역변수를 지역변수가 덮어져서 코드에 문제가 생길 수 있다.
되도록이면 변수는 지역변수를 사용하는 것이 좋다.

Local Scope(지역 스코프)

지역에 선언한 변수는 특정부분에만 접근할 수 있기 때문에 지역을 벗어나면 사용할 수 없다. 

function hi() {
  const a = 'Hello!' // 지역 스코프
  console.log(a)
}
console.log(a) // a is not defined
hi() // 'Hello!'

a라는 변수는 hi라는 함수안에 정의되어 지역스코프로 작용하고 있다.
이 경우 함수 밖에서 a를 호출할 경우 사용할 수 없다.


지역변수의 예로 함수 스코프와 블록스코프를 들 수 있다.

Function Scope(함수 스코프)

함수를 호출할 때마다 스코프 생성하게 된다.
함수안에서 호출한 변수는 함수안에서만 사용이 가능하다.

var a = 'Hello!'; // 전역 스코프

function hi() { // 함수 스코프 ( = 지역 스코프)
 var a = 'Happy!';
 console.log(a);
}

hi(); // Happy!
console.log(a); // Hello!

hi함수 안에서 호출한 a는 함수스코프안에 있는 변수로 출력되어 Happy!가 찍히게 되고
함수 밖에서 호출한 a는 var a = 'Happy!';에 접근할 수 없어서 전역스코프에 있는 변수 a를 출력한다.

:heavy_check_mark:스코프 체인

스코프 체인은 식별자 중에서 객체(전역 객체 제외)의 프로퍼티가 아닌 식별자, 즉 변수를 검색하는 메커니즘이다. 

var a = 'Hello!'; // 전역 스코프

function hi() { // 함수 스코프 ( = 지역 스코프)
 console.log(a);
}

hi(); // Hello!

만약 var a = 'Happy!';가 없는 경우에는 hi함수에서 호출한 변수도 전역변수를 출력한다.
자기 자신의 스코프에서 찾고 없는 경우 상위 스코프로 넘어가서 찾게된다.
전역스코프까지 올라가도 없는 경우에는 에러를 발생시킨다. 이 경우를 스코프 체인 이라고 한다.

Block Scope(블록 스코프)

{}(중괄호) 내부에 변수를 선언하면 그 변수를 블록(중괄호)안에서만 사용이 가능하다. 

{ // 블록 스코프
 const a = 'Hello!';
 console.log(a); // Hello
}

console.log(a); // a is not defined

변수는 let또는 const로 선언해야한다. var는 블록 스코프로는 적용이 안된다. (함수스코프사용)
함수스코프보다 블록스코프가 더 직관적이다.



참고자료 : https://medium.com/@khwsc1/%EB%B2%88%EC%97%AD-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%EC%BD%94%ED%94%84%EC%99%80-%ED%81%B4%EB%A1%9C%EC%A0%80-javascript-scope-and-closures-8d402c976d19



Search