Scope
는 변수가 어디까지 쓰일 수 있는지의 범위를 의미한다. 어떤 변수는 여기저기서 쓸 수 있는 반면에, 어떤 변수는 특정 함수 내에서만 쓸 수 있다. 같이 알아보자!
block
이란 중괄호({}
,curly brace)로 감싸진 것이다.
function
for
if
function a() {
return 'i am block';
}
for (let i = 0; i < 10; i++) {
count++;
}
if (i === 1) {
let j = 'one';
console.log(j);
}
이러한 block
종류들이 있다. {}
내부에서 변수가 정의되면 변수는 오로지 내부에서만 사용할 수 있다. {}내부에서 정의된 변수는 local Variable(지역 변수)
라고 부른다.
function getResult() {
let result = 10;
return result;
}
console.log(result);
getResult 내부의 scope에 접근을 할 수 없다. console.log(result)
에서 getResult 내부에 접근이 불가능하기
때문에 result라는 변수가 존재하는지 알지 못한다. result라는 변수는 getResult 함수의 {}(block)
에서만 사용할 수 있다.
scope 외부(block밖)
에서는 특정 scope의 변수에 접근할 수가 없다. block밖인 global scope
에서 만든 변수가 global variable(전역변수)
이다. 코드 어디서든 접근 가능해서 변수값을 확인할 수 있다.
const color = 'red';
console.log(color);
function returnColor() {
console.log(color);
return color;
}
console.log(returnColor())
returnColor 함수 내에서, returnColor 함수 밖에 있는 color라는 변수를 return 해주었다. color는 global 변수이기 때문에 block에서도 접근이 가능해서 반환를 한 것이다.
global
변수를 쓰면 여기 저기서 접근하기 쉬워서 좋다고 생각할 수 있지만 문제를 일으킬 수 있습다. global 변수는 프로그램이 종료될때까지 계속 살아있습니다.
이 말은 local 변수는block이 끝나면 더 이상 변수가 살아있지 않고 쓸 수 없습니다.
const satellite = 'The Moon';
const galaxy = 'The Milky Way';
let stars = 'North Star';
const callMyNightSky = () => {
stars = 'Sirius';
return 'Night Sky: ' + satellite + ', ' + stars + ', ' + galaxy;
};
console.log(callMyNightSky());
console.log(stars);
global 변수 생성
stars 에 영향이 갔습니다.
"Sirius" 으로 사용하게 됩니다.
scope의 변수는 코드 품질을 올려준다.
코드 가독성이 올란간다.
유지보수가 쉬워진다.
메모리 절약이 된다.
출처
https://www.nextree.co.kr/p7363/
https://developer.mozilla.org/ko/docs/Glossary/Scope