모든 예시는, 선언 키워드 var 을 사용하고 있다는 점을 감안해주세요
중간중간, ES6 의 선언 키워드 let, const 관련 보충 설명이 있으니, 참고하며 읽어주세요! ✨

---

🪩 스코프(Scope) ?

scope; 영역, 범위, 유효하다

"유효하다" = "참조(접근)할 수 있다"

스코프란, 식별자의 유효 범위

• 프로그래밍 언어에서의 유효범위란, 어느 범위까지 참조 하느냐 이다. 변수와 매개변수의 접근성이 어디까지 유효한가 이다.
• 식별자란 변수명, 함수명 같이 다른 대상과 구분하여 식별할 수 있는 유일한 이름이다. ( 그냥 변수명, 함수명, 클래스명 등을 뜻한다. 설명은 괜히 어렵다. )
• 스코프는 JS에만 국한된 개념이 아닌, 모든 프로그래밍 언어의 기본적인 개념으로, 확실한 이해가 필요하다.

🪩 스코프(Scope)의 구분

크게 전역 스코프(Global Scope) 와 지역 스코프(Local Scope) 로 나뉩니다.

전역 스코프(Global Scope)

전역 (함수, 블록{...} 밖의 영역) 에 변수를 선언하면, 이 변수는 어디서든지 참조할 수 있는 전역 스코프를 갖는 전역 변수가 됩니다.
( 브라우저에서 전역은, window 객체를 뜻합니다. window 는 전역 객체입니다. )

var global = 'global';

function hello() {
	var local = 'local';
    console.log(global);
  	console.log(local);
};

hello(); // 'global', 'local'
console.log(local); // ReferenceError: local is not defined
console.log(global); // 'global'

함수 hello 안에서도, 밖에서도 변수 global에 접근할 수 있습니다.
전역 어디서든지 접근이 가능하고, 전역에서 유효합니다.

❗️그러나 주의 🚨

전역 변수는 사용을 지양해야 합니다.
변수 이름이 중복될 가능성이 높아지고,
그로 인한 의도치 않은 재할당이 상태 변화를 일으키므로,
코드의 오류를 예측하기가 어려워지기 때문에 사용을 지양해야합니다.

지역 스코프(Local Scope)

비 블록 레벨 스코프(Non block-level Scope)

원래 JS는 블록 레벨 스코프를 사용하지 않습니다.

if(true) {
	var x = 1;
};

console.log(x) // 1

변수 x 가 함수가 아닌 if문 블록 내에서 선언되었습니다.
함수 밖에서 선언된 변수는 코드 블록({...})내에서 선언되었다할지라도 모두 전역 스코프를 갖게 됩니다.

✨ 그러나 ES6부터 탄생한 let, const 키워드를 사용할 경우,
코드 블록({...})내에서 변수가 선언되면, 코드 블록 내에서만 변수가 작동하게 됩니다.

if(true) {
	let x = 1;
};

console.log(x) // ReferenceError: x is not defined

함수 레벨 스코프(Function-level Scope)

JS는 함수 레벨 스코프를 사용합니다.
(let, const 를 사용하면 블록 레벨 스코프로 사용됩니다.)
함수 내에서 선언된 매개변수와 변수는 함수 외부에서 유효하지 않습니다.

var a = 5;

function apple() {
	var a = 10;
  	var b = 20;
}

console.log(a) // 5
console.log(b) // ReferenceError: b is not defined

변수 b 는 함수 apple 내에서 선언된 지역 변수이기 때문에, 함수 외부에서 접근할 수 없습니다. ( ReferenceError 발생 )

그러나 함수(지역, local)영역에서는 전역변수를 참조할 수 있습니다.
위에서 설명드렸듯, 전역 스코프, 전역 변수는 어디서든지 접근가능 및 참조할 수 있기 때문입니다.

var x = 100;

function apple() {
	x = 300;
  	console.log(x);
};

apple(); // 300
console.log(x); // 300

내부 함수는, 전역 변수는 물론이고 상위 함수에서 선언한 변수에 접근/변경이 가능합니다.

✨ 하지만 지금은 var 보다 ES6부터 탄생한 let, const 키워드의 사용성이 높기 때문에,
함수 레벨 스코프가 아닌, 블록 레벨 스코프로 이해하고 계시면 됩니다.
하지만, JS의 기초를 위해 모든 예시는 var 키워드를 사용하였습니다.

중첩 스코프

중첩 스코프는 가장 인접한 지역을 우선하여 참조합니다.

var x = 10;

function sushi() {
	var x = 50;
  	console.log(x); // 50
  
  function salad() {
  	x = 100;
    console.log(x); // 100
  };
  
  salad();
};

sushi(); // 100
console.log(x); // 10

함수 sushi 에서 가장 인접한 x 는 바로 자기자신의 영역입니다.
함수 salad 에서 가장 인접한 x 는 상위 함수 내의 x를 변경시킨 값을 가지고 있는 자기자신의 영역입니다.
전역에서의 console.log(x) 에서 가장 인접한 x 는 전역에 선언한 변수인 x = 10 입니다.

이처럼 순서는 자기자신의 local scope -> 자신의 상위 scope 순서로 식별자를 찾습니다.

또 하나의 예제를 보겠습니다.

var sushi = function() {
	var a = 2, b = 3;
  
  	var salad = function() {
    	var b = 10, c = 30;
      	console.log(a += b+c);
    };
  salad();
};

sushi(); // ?

결과값은 뭐라고 출력될까요? 🤔
하나씩 뜯어봅시다.

var sushi = function() {
	var a = 2, b = 3;
  	// 1번째 지점 : a = 2, b = 3, c = c is not defined
  	var salad = function() {
    	var b = 10, c = 30;
      	// 2번째 지점 : a = 2, b = 10, c = 30
      	console.log(a += b+c);
      	// 3번째 지점 : a = 42, b = 10, c = 30
    };
  // 4번째 지점 : a = 2, b = 3, c = c is not defined
  salad();
  // 5번째 지점 : a = 42, b = 3, c = c is not defined
};

sushi();

JS는 싱글 스레드 방식으로 한줄 한줄씩 차례대로 읽어가며 동작합니다.
선언 전, 선언 후, 실행 전, 실행 후마다 변수가 변화하는 것들을 확인할 수 있습니다.

⭐️ 렉시컬 스코프(Lexical Scope)

렉시컬 스코프를 설명하기 앞서, 먼저 동적 스코프와 정적 스코프에 대해 간단히 알아봅시다.

💁🏻‍♀️ 동적 스코프 (Dynamic Scope)
함수를 어디서 호출 하였는지에 따라 상위 스코프를 결정

💁🏻‍♀️ 정적 스코프 (Static Scope / Lexical Scope)
함수를 어디서 선언 하였는지에 따라 상위 스코프를 결정

JS를 포함한 대부분의 프로그래밍 언어는 정적 스코프, 즉 렉시컬 스코프를 따릅니다

따라서, JS는 함수를 선언 한 시점에 따라 상위 스코프가 결정됩니다.
이를 Lexical Scoping 이라고 부릅니다.

var x = 1;

function sushi() {
	var x = 50;
  	salad();
}

function salad() {
	console.log(x);
}

sushi(); // 1
salad(); // 1

위 예제의 함수 salad 전역에 선언되었습니다.
따라서 함수 salad 상위 스코프는 전역이 되고, 전역에 선언된 x 값인 1을 출력하게 됩니다.
호출이 되는 시점에 스코프가 결정이 되지 않기 때문에, x 값은 50이 될 수 없습니다.

암묵적 전역(Implicit Global)

var x = 10;

function sushi() {
	y = 20;
  	console.log(x + y);
}

sushi(); // 30

함수 sushi 안에 있는 y 는 선언되지 않은 변수입니다.
그러나 참조 에러가 발생하지 않습니다. 선언되지 않은 식별자 y 가 마치 선언된 변수처럼 동작합니다.
이는 선언하지 않은 식별자에 값을 할당하면 전역 객체(window)의 프로퍼티가 되기 때문입니다.

선언 키워드(var, let, const)가 없이 변수를 선언할 경우, 전역 변수로 선언됩니다.
y = 20 이 window.y = 20 으로 전역객체 프로퍼티로 동적 생성이 되는 것입니다. 따라서, 마치 전역 변수처럼 동작하게 됩니다.

이러한 현상을 암묵적 전역(Implicit Global) 이라고 합니다.

앞서 말했듯, 전역 변수는 최대한 사용을 지양해야 하므로,
선언 키워드없이 변수를 초기화하면 안됩니다.
함수 내에서 변수를 선언할 지라도, 선언 키워드가 없다면 전역 변수로 동작하기 때문입니다.

❗️그러나 Strict Mode(엄격 모드)를 사용하면 JS는 위처럼 문법적으로 실수할 수 있는 부분들을 에러로 판단해줍니다.

'use strict'

var x = 10;

function sushi() {
	y = 20; // ReferenceError: y is not defined
  	console.log(x + y);
}

sushi();

---

🙇🏼‍♀️ 참조

https://poiemaweb.com/js-scope
https://www.nextree.co.kr/p7363/
https://velog.io/@nittre/JavaScript-Scope스코프와-Closure클로저-정리
https://hanamon.kr/javascript-스코프와-변수선언키워드-차이점/
https://ljtaek2.tistory.com/140

---

읽어주셔서 감사합니다! 큰 도움이 되었기를 바랍니다 🪄
혹시 잘못된 정보가 있다면, 알려주세요!!
빠른 수정하도록 하겠습니다 🥹

다음 게시물은,
스코프 체인과 관련하여 실행 컨텍스트 관련 글을 벨로깅 할 예정입니다.
그럼 See You ! 👋🏻 ✨