JS - Scope

sanha_OvO·2021년 11월 4일

목록 보기

2/8

프로그래밍 언어에서 Scope는 변수(Variable)의 유효 범위를 뜻한다.

이 글에서 스코프에 대해서 Araboza.

전역 스코프는 어떠한 영역안에 선언되는 것이 아닌 함수 및 블록 외부에 선언되어 어디서든 접근할 수 있다.

전역 범위로 선언된 변수를 전역 변수(Global variable)라고 한다.

const num = 1;

console.log(num); //2

또한 아래와 같이 어떤 함수 내부와 같은 영역에서도 접근이 가능하며 이에 속한 변수들은 웹페이지가 닫혀야 메모리에서 제거된다.

// 전역 변수는 함수/블록 스코프 내에서도 접근이 가능하다.
function func() {
  return num + 1;  
}

console.log(func()) // 2

지역 스코프는 전역 스코프와 달리 중괄호{}로 쌓여진 정해진 영역안 에서만 접근이 가능하다.

지역 범위로 선언된 변수를 지역 변수(Local Variable)라고 한다.

function func() {
  const num = 3
  return 0;
}
		  // 함수밖에선 접근하지 못한다.
console.log(num)  // ReferenceError: num is not defined

if (!name){
  const str = 'Hi'
}
		 // 마찬가지로 블록 밖에선 블록 내 지역함수에 접근하지 못한다.
console.log(str) // ReferenceError: str is not defined

스코프는 함수가 호출될 때가 아닌 선언할 때 생긴다!

무슨 말이냐면...

let name = 'kil';
function one() {
  console.log(name);
}

function two() {
  name = 'kim';
  log();
}
two();

위 코드의 출력값은 kim이다.

let name = 'kil';
function one() {
  console.log(name);
}

function two() {
  let name = 'kim';
  one();
}
two();

위 코드의 전과 달리 one안의 name은 전역변수 name을 가르키기 때문에 출력값은 kil이다.

이제 이해가 된다!

블록 내에서 특정 변수를 찾지 못하면 윗 블록에서 해당 변수를 찾고, 이를 반복하여 전역 스코프까지 반복한다.

이 과정을 Scope chain이라고 한다.

전역 변수는 어떠한 영역에서도 접근이 가능하다는 점 덕분에 '잘만 이용하면 편하게 코딩을 할 수 있지 않나'라는 생각을 할 법하다.

하지만 과도한 전역 변수의 사용은 아래와 같이 스코프 간의 혼선을 야기하게 된다.

let v = 1;

const func = () => {
  v = 10;
}

func();
console.log(v); // v = 30

함수내에서 따로 변수의 선언을 하지 않게되면 전역 변수 v의 값이 바뀌게 되고 고정된 v값을 원하는 다른 함수들에 영향을 미칠 수가 있다.

코드가 복잡해지면 유지보수에 문제가 될 수 있으니 조심하도록 하자.

ps. 당연하게도 변수 뿐만 아니라 함수 또한 스코프에 영향을 받는다.

Web Developer / Composer

JavaScript