008_스코프(Scope) 🔭

 

🔭  스코프란?

• 단어 자체의 사전적 의미로는 '범위' 라는 뜻을 가진다.
• CS, 그리고 JavaScript에서도 '범위' 라는 의미를 갖는다. 
• 좀 더 구체적인 뜻은 '참조 대상 식별자( identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분해 식별할 수 있는 유일한 이름 )를 찾아내기 위한 규칙' 을 뜻한다.

// 예시 코드

const x = 'global';

function foo () {
  const x = 'function scope';
  console.log(x);
}

foo(); // ?
console.log(x); // ?

• 위 예제에서 보면 변수 x가 중복 선언됐는데, 자바스크립트는 스코프를 통해 전역에 선언된 변수 x와 함수 foo 내부의 변수 x를 구분할 수 있다.
• 스코프를 구분해보자면 다음과 같이 2가지로 나눌 수 있다.

전역 스코프 (Global Scope)
코드 어디에서든지 참조할 수 있다.

지역 스코프 (Local Scope or Funtion-level Scope)
함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있다.

• 모든 변수는 스코프를 갖는다. 변수의 관점에서 스코프를 구분하면 다음과 같이 나눌 수 있다.

전역 변수 (Global variable)
전역에서 선언된 변수이며 어디에든 참조할 수 있다.

지역 변수 (Local variable)
지역(함수) 내에서 선언된 변수이며 그 지역과 그 지역의 하부 지역에서만 참조할 수 있다.

 

💡 자바스크립트 스코프의 특징

• 자바스크립트 스코프는 타 언어와는 다른 특징을 가지고 있다.
• 대부분의 C 계열 언어는 블록 레벨 스코프(block-level scope)를 따른다. 블록 레벨 스코프란 코드 블록({...}) 내에서 유효한 스코프를 의미한다. 여기서 '유효하다'는 '참조(접근)할 수 있다' 는 뜻이다.

int main(void) {
  // block level scope
  if (1) {
	int x = 5;
	printf("x = %d\n", x);
  }
  printf("x = %d\n", x); // use of undeclared identifier 'x'

  return 0;
}

• 위 C언어 코드를 보면 if문 내에 선언된 변수 x는 if문 코드 블록 내에서만 유효하다. 즉, if문 바깥에서는 참조가 불가능하다.
• 하지만 자바스크립트는 함수 레벨 스코프(function-level scope)를 따른다. 즉 함수 내에서 선언된 변수는 함수 내에서 유효하다는 뜻이다.
• 단, ES6에서 도입된 let을 사용하면 블록 레벨 스코프를 사용할 수 있다.

에시 1

var x = 0;
{
  var x = 1;
  console.log(x); // 1
}
console.log(x);   // 1

let y = 0;
{
  let y = 1;
  console.log(y); // 1
}
console.log(y);   // 0

 

에시 2

// var은 비 블록 레벨 스코프이다.
if (true) {
  var x = 5;
}
console.log(x);  // 5


// let은 블록 레벨 스코프이다.
if (true) {
  let x = 5;
}
console.log(x); // ReferenceError: x is not defined

 

예시 3

// 함수(지역) 영역에서 전역변수를 참조할 수 있으므로 전역 변수의 값도 변경할 수 있다.

var x = 10;

function foo() {
  x = 100;
  console.log(x);  // 100
}
foo();
console.log(x);  // 100

 

🔔 스코프의 주요 규칙

• 안쪽 스코프에서 바깥쪽 스코프로 접근할 수 있지만 반대는 불가능하다.
• 지역 변수는 전역 변수보다 우선순위가 더 높다.
• 스코프는 중첩이 가능하다.

 

지역 변수 우선순위 예

var x = 'global';

function foo() {
  var x = 'local';
  console.log(x);  // local

  function bar() {
    console.log(x); // local
  }

  bar();
}
foo();
console.log(x); // global

 

중첩 스코프 예

var x = 10;

function foo(){
  var x = 100;
  console.log(x); // 100

  function bar(){
    x = 1000;
    console.log(x); // 1000
  }

  bar();
}
foo();
console.log(x); // 10

// 중첩 스코프는 가장 인접한 지역을 우선해 참조한다.

 

🛠 스코프와 var, let, const

• 자바스크립트 변수 선언 키워드 세가지의 차이점 및 스코프 유효 범위는 다음과 같다.

	const	let	var
유효 범위	블록 스코프 / 함수 스코프	블록 스코프 / 함수 스코프	함수 스코프
값 재할당	불가능	가능	가능
재선언	불가능	불가능	가능
전역 스코프	x	x	o

• 여기서 주목해야할 점은 var의 유효 범위와 전역 스코프 여부인데 그 예시는 다음과 같다.

for (var i = 0; i < 10; i++) {
  console.log(i);
}

console.log(i); // 9

// for문에서 선언된 i 변수지만 모든 스코프에서 접근 가능하다.

 

🚷 스코프 관련 변수 선언시 주의점

 

✏️  전역 객체(window)의 이해

• Window 객체는 브라우저에서만 존재하는 객체다.
• 브라우저의 창(window)을 의미하는 객체이다.
• 하지만 별개로 전역 영역을 담고 있기도 하다. 그래서 함수 선언식으로 함수를 선언하거나, var 키워드로 변수를 선언하면 window 객체에 속해진다.

✏️  전역 변수는 최소화하자

• 전역 변수는 어디서든 접근이 가능하다는 특징이 있다.
• 전역 변수를 최소화해야 side effect(의도하지 않은 로직에 의한 문제 발생)를 줄일 수 있다.

✏️  선언 없는 변수 할당 금지

• let, const 등으로 선언하지 않고 변수를 할당하면 해당 변수는 var로 선언한 전역 변수 취급을 한다.
• 실수를 방지하기 위해서는 Strict Mode를 사용하면 된다.
  • Strict Mode는 브라우저가 보다 엄격하게 작동하도록 만들어준다.
  • 그래서 선언 없는 변수 할당의 경우도 에러로 판단해준다.
  • 보통 리액트는 index 파일에 Strict Mode가 적용돼있지만, 그냥 JS로 프로젝트를 만드려면 js 파일 상단에 'use strict'를 입력해주면 된다.