[🐱 자바스크립트] 스코프(scope)

자바스크립트 Scope(스코프, 유효범위)

---

🍎 스코프란?

스코프는 참조 대상 식별자 (identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름) 를 찾아내기 위한 규칙이다.

식별자는 자신이 어디에서 선언됐는지에 의해 다른 코드가 자신을 참조할 수 있는 범위를 갖는다. 이러한 범위를 스코프라고 한다.

스코프는 계층적인 구조를 가지기 때문에 하위 스코프는
상위 스코프에 접근할 수 있지만 반대는 불가하다.

예제

let name = 'me'; //전역 스코프에 할당된 name의 값은 'me'

function yourName(){ //함수 스코프에 할당된 name의 값은 'you'
 name = 'you';
 // name에 할당된 값 'you'는 오직 exampleFunction 내부에서만 사용 가능.
}

위의 예제와 같이 전역에 선언된 변수 name는 어디에든 참조할 수 있다.
하지만 함수 yourName 내에서 선언된 name의 값 me는
함수 yourName 내부에서만 사용이 가능하며, 외부 스코프에서는
name의 값 you를 사용할 수 없다.

---

🍎 스코프의 범위

스코프의 범위에는 크게 전역 스코프와 지역스코프로 나뉜다.

전역 스코프 (Global scope)

• 가장 바깥쪽의 스코프는 전역 스코프(Global Scope)라고 부른다.
• 전역 스코프에서 선언한 변수는 전역 변수(Global variable)
  라고 부른다.
• 전역 변수는 어디에서든지 참조가 가능하다.

지역 스코프 (Local scope or Function-level scope)

• 전역이 아닌 다른 스코프는 전부 지역 스코프(local scope)에 해당한다. (지역 스코프는 중첩이 가능하다.)
• 지역 스코프에서 선언한 변수는 지역 변수(Local variable)
  라고 부른다.

전역과 지역 변수에서 변수명이 중복된 경우, 지역변수 를 우선하여 참조한다.

예제

var x = 'global';

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

  function bar() {  // 내부함수
    console.log(x); // local
  }

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

위 예제는 전역 변수 x를 선언 후 global 값을 할당했고, foo 함수의 내부에서도 var x를 선언 후 값 local을 할당하였다.
foo 함수 내부에 선언된 변수 x의 local 값은 함수 내부 스코프에서만 범위가 적용되므로 마지막 콘솔 출력에는 전역 var x 값인 global이 출력된다.

---

🍎 자바스크립트는 함수 레벨 스코프

스코프에는 블록 레벨 스코프와 함수 레벨 스코프 두 가지 종류가 있다.

블록 레벨 스코프(block scope)

• 중괄호 ({...}) 를 기준으로 범위를 구분한다.
• 블록 레벨 스코프란 코드 블록({…})내에서 유효한 스코프를 의미한다. 따라서 블록 내에서만 변수가 유효하며, 블록 외부에서는 유효하지 않다(참조할 수 없다)는 것이다.
• 단, 화살표 함수의 경우 블록 레벨 스코프로 취급한다.

함수 레벨 스코프(function scope)

• function 키워드가 등장하는 함수 선언식 및 표현식을 기준으로
  함수 스코프를 만든다.
• 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 함수 외부에서는 유효하지 않다(참조할 수 없다)는 것이다.

다른 블록 레벨 스코프를 가지는 언어와 달리,자바스크립트는 함수 레벨 스코프 언어이다. 함수를 기준으로 지역 스코프가 생성되며, 함수 내에서 지역 변수의 사용이 가능하다.

예제

var x = 0;
{
  var x = 1;
  console.log(x); // 1
}
console.log(x);   // 1
// var 키워드로 선언한 x의 값이 0에서 1로 바뀌었다. 

let y = 0;
{
  let y = 1;
  console.log(y); // 1
}
console.log(y);   // 0
//let 키워드로 선언한 x값은 블록 스코프 내에서 사용이 불가능하다. 

자바스크립트에서도 let 키워드를 사용하면 블록 레벨 스코프를 사용할 수 있다. 자바스크립트에서는 let const 키워드의 사용을 권장한다.

이는 자바스크립트의 호이스팅과 관련이 있다.

---

🍎 let/ var/const 키워드의 특징

let 키워드의 특징

• 블록 스코프 안에서 let 키워드로 정의된 변수는
  블록 범위를 벗어나는 즉시 접근할 수 없다.(Reference Error 발생)
• let 은 var 와 달리 재선언을 방지한다.

var 키워드의 특징

• var 는 블록 스코프를 무시할 수 있으며, 함수 스코프만 따른다.
• var 키워드로 선언된 변수는 함수 스코프의 최상단에 선언된다.
• var 키워드는 let 과 달리 재선언을 허용한다.
  (보통 재선언을 해야하는 경우는 버그이므로 let 키워드를 사용하자.)

const 키워드의 특징

• 변하지 않는 값, 상수(constant)를 정의할 때는 const를 이용한다.
• const는 값의 재할당이 불가능하다.
  ( const 키워드 변수에 값을 재할당할 경우 TypeError를 발생시키므로, 의도하지 않은 값의 변경을 막아준다. 따라서 값을 새롭게 할당할 일이 없는 경우 const 키워드 사용을 권장한다. )
• let 키워드와 동일하게 블록 스코프를 따른다.

---

🍎 변수 선언시 주의할 점

📍 var 키워드 사용을 지양하자

window 객체는 브라우저에만 존재한다. 이는 브라우저의 창을 의미하는 객체지만, 별개로 전역 영역을 담고있기도 한다.

따라서 함수를 선언하거나, var 로 전역 변수를 만들면 window 객체에서도 동일한 값을 찾을 수가 있다.

📍전역 변수에 너무 많은 변수를 선언하지 말자.

전역 변수는 어디서든 접근 가능한 변수를 의미한다.

참조가 쉬워서 편리한 대신 다른 함수 혹은 로직에 의해 의도되지 않은 값이 변경되는 side effect 가 발생할 수 있다.

📍var는 블록 스코프를 무시하며, 재선언을 해도 에러를 발생시키지 않는다.

같은 스코프에서 동일한 이름의 변수를 재선언 하는 것은 버그를 유발한다.

📍 전역 변수를 var로 선언하면 문제될 수 있다.

var로 선언한 전역 변수는 window 객체에 속하는 전역변수가 된다.
이는 window 기능을 덮어씌워서 내장 기능을 사용할 수 없게 만들 수 있다.

📍 선언 키워드 (var, let, const) 없이 변수를 할당하지 말자.

아무런 키워드 선언 없이 변수를 할당하면 var로 선언한 전역 변수 처럼 취급된다.

📍 실수를 방지하기 위해서 Strict Mode를 사용할 수 있다.

Strict Mode 를 사용하면 브라우저가 엄격하게 작동된다. 선언 없는 변수할당의 경우도 Strict Mode에서는 에러로 판단한다.

Strict Mode의 사용 : js 파일 상단에 'use strict'; 입력

---

📌 마지막 정리

함수는 변수가 유효한 범위를 가지는데, 그것을 스코프 라고 한다.

스코프는 지역 스코프에서 외부 스코프로의 참조는 가능하나,
반대로 외부 스코프애서 지역 스코프로의 참조는 불가능하다.

자바스크립트는 함수 레벨 스코프 언어라서 함수를 기준으로 스코프 값을 갖는다.

하지만 let, const 키워드르 사용하면 블록 레벨 스코프 처럼 사용할 수 있다.