JavaScript에서 scope이란, '변수가 어디까지 쓰일 수 있는지'의 범위를 의미한다.
어떤 변수는 여기저기서 쓸 수 있는 반면에, 어떤 변수는 특정 함수 내에서만 쓸 수 있다. 이런 개념이 바로 scope이다.
block이란 중괄호({}
, curly brace)로 감싸진 것이다.
function의 내부는 하나의 block이다.
function hi() {
return 'i am block';
}
for문도 하나의 block이다.
for (let i = 0; i < 10; i++) {
count++;
}
if문의 {}도 하나의 block이다.
if (i === 1) {
let j = 'one';
console.log(j);
}
{}
(block)내부에서 변수가 정의되면 변수는 오로지 {}
(block)내부에서만 사용할 수 있다. {}
(block)내부에서 정의된 변수는 local Variable(지역 변수) 라고 부른다.
function getResult() {
let result = 10;
return result;
}
// 자바스크립트 에러!
// getResult 내부의 scope에 접근할 수 없다
console.log(result);
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 변수이기 때문에 returnColor
함수의 block에서도 접근이 가능해서 'red'
를 반환한 것이다.
global 변수를 쓰면 여기 저기서 접근하기 쉬워서 좋다고 생각할 수 있지만, 너무 남용하면 프로그램에 문제를 일으킬 수 있다. global 변수를 선언하면, 해당프로그램의 어디에서나 사용할 수 있는 global namespace를 갖는다. namespace라는 것은 변수 이름을 사용할 수 있는 범위라는 뜻이다. scope이라고도 하고 특히 변수이름을 얘기할 때는 namespace라고도 한다.
global 변수는 프로그램이 종료될때까지 계속 살아있다. global 변수가 계속 살아있어서 변수값이 계속 변한다면 해당 변수를 트래킹하기도 어렵고 이 변수는 어디에서 왜 필요한지 알려면 도대체 어디에서 let
, const
로 선언을 했는지 찾아 나서야 한다.
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);
{}
내에서 let
, const
을 사용하여 변수를 새로 만들어서 쓰자.switch();
switch statement : https://www.w3schools.com/js/js_switch.asp
// Assignment
function whatIs(type) {
let description;
switch (type) {
case 'scope':
description = '변수가 어디까지 쓰일 수 있는지의 범위';
break;
case 'block':
description = '중괄호({}, curly brace)로 감싸진 것';
break;
case 'global scope':
description = 'scope 외부. 즉 block 밖';
break;
case 'global variable':
description = 'global scope에서 만든 변수 (전역변수)';
break;
case 'block scope':
description = 'block의 내부';
break;
case 'local variable':
description = 'block 내부에서 정의된 변수 (지역변수)';
break;
case 'global namespace':
description = '변수 이름을 사용할 수 있는 범위';
break;
case 'scope pollution':
description = 'global 변수를 남용할 경우 생길 수 있는 문제';
break;
default :
description = ''
break;
}
return description;
}
whatIs('scope');