Scope 🤔?

우리가 작성하는 코드의 접근 범위를 결정하는 개념이다.

var x = 'global';

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

foo();

console.log(x) // 'global'

위 예제에서 전역에 선언된 변수 x는 어디에든 참조가 가능하다. 하지만 foo 내에 선언된 변수 x는 함수 foo 내부에서만 참조할 수 있고, 외부에서는 참조할 수 없다. 이러한 규칙을 스코프라고 한다.

var x = 'global';

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

foo();

console.log(x) // 'function scope'

함수지역에서 전역변수를 참조 할 수 있으므로, 지역변수의 값이 변경되면 전역변수의 값도 변경된다. 내부함수의 경우 전역변수는 물론 상위 함수에서 선언한 변수에 접근/변경이 가능하다.

---

스코프의 구분

전역스코프 (Global scope)

: 코드 어디에서든 참조할 수 있다. => 전역변수
: var로 선언한 전역변수는 전역객체 window의 프로퍼티이다.

var global = 'global';

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

foo();

console.log(global); // global
console.log(local); // Uncaught ReferenceError: local is not defined

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

: 코드 블록이 만든 스코프. 함수 자신과 하위 함수에만 참조할 수 있다. => 지역변수

---

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

• 함수 레벨 스코프(function-level scope)를 따른다.
• 함수 레벨 스코프는 함수 코드 블록 내에서 선언된 변수는 함수 코드블록 내에서만 유효하고 외부에서는 유효하지 않는다.

if(true) {
  var x = 5;
}

console.log(x); // 5

// 변수 x는 코드블록 내에서 선언되었다. 
// 하지만 javascript는 함수 레벨 스코프이기 때문에, 
// 코드블록 내에 선언되었다 할지라도 
// 모두 전역스코프를 갖게 된다. 
// 변수 x는 전역변수이다. 

var a = 10; // 전역변수

(function () {
  var b = 20; // 지역변수
})();

console.log(a); // 10
console.log(b); // Error: 'b' is not defined

var x = 'global';

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

foo();

console.log(x) // global

• 단, let 을 사용하면 블록 레벨 스코프(Block-level scope) 를 사용 할 수 있다. 블록 레벨 스코프는 말 그대로 블록 {} 이 생성될 때 마다 새로운 스코프가 형성되는 것을 의미한다. let과 const의 등장으로 블록스코프를 형성하는 것도 가능해졌다.

• 타 언어들은 모두 블록 레벨 스코프를 따른다. 이는 코드 블록 내에서 유효한(참조 가능한) 스코프이다.

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

for문에서의 var과 let

function loop () {
  for (var i = 0; i < 5; i++) {
    console.log(i);
  }
  console.log(i, "final");
}

loop();

/*
0
1
2
3
4
5 final
*/

-> var는 함수레벨스코프를 따르기 때문에, loop 함수 스포트 안에 i가 모두 존재한다.

function loop () {
  for (let i = 0; i < 5; i++) {
    console.log(i);
  }
  
  console.log(i, "final");
}

loop();

// Error: i is not defined

-> let으로 블록레벨스코프가 가능해졌기 때문에 i는 for문 코드블록 안에만 존재한다.

---

렉시컬 스코프

var x = 1;

function foo () {
  var x = 10;
  bar();
}

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

foo();
bar();
  

동적 스코프(Dynamic scope)

• 함수를 어디서 호출하였는지에 따라 상위 스코프를 결정한다.

정적 스코프(Lexical scope)

• 함수를 어디서 호출하는지가 아닌, ⭐️어디에⭐️ 선언하였는지에 따라 결정된다.
• 자바스크립트를 비롯한 대부분의 언어는 렉시컬 스코프를 따른다.
• 함수를 선언한 시점에 상위 스코프가 결정된다.
• 함수 bar는 전역에 선언되었다. 그러므로 bar의 상위 스코프는 전역스코프이고, 1을 두번 출력한다.

---

Scope chain 🧬

상위 Global Scope -> Person Scope -> displayName Scope 하위

⭐️

Scope 계층에서 가장 중요한 특징은

1. 상위에서 하위 내부정보를 접근 할 수 없다.
2. 하지만 하위에서 상위 scope의 정보는 접근 가능하다 !!
3. 그리고, 실행문의 위치를 기준으로 하위 Scope 부터 시작하여, 원하는 값을 찾을 때 까지 상위로 탐색이 가능하다.

---

암묵적 전역 🤫

var x = 10;

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

foo(); // 30

y를 선언해주지 않았는데 왜 30이라는 값이 나올까?

foo함수의 스코프와 전역 스코프 어디에서도 변수 y의 선언을 찾을 수 없으므로 에러가 발생해야 하지만, 자바스크립트 엔진은 y = 20 을 window.y = 20 으로 해석하여 프로퍼티를 동적 생성한다. 결국 y는 전역 객체의 프로퍼티가 되어 전역변수처럼 동작하는데 이러한 현상을 암묵적 전역(implicit global) 이라고 한다.

console.log(x); // undefined - 전역 변수 x는 호이스팅 발생한다. 
console.log(y); // Error : y is not defined - 전역변수가 아닌, 단지 전역 프로퍼티인 y는 호이스팅이 발생하지 않는다. 

var x = 10; // 전역 변수

function foo () {
  y = 20; // 선언하지 않은 변수
  console.log(x + y);
}

foo(); // 30

---

전역변수.. 사용할까 말까??

1) 최소한의 전역변수 사용

• 전역변수 객체 하나를 만들어서 사용해 전역변수 사용을 최소화시킨다.

var globalObj = {};

globalObj.person = {
  name: 'Midohree',
  gender: 'female'
};

console.log(globalObj.person.name);

2) 즉시실행함수를 이용한 전역변수 사용 억제.

• 즉시실행함수(IIFE : Immediately Invoked Function Expression) 는 즉시 실행되고, 그 후 전역에서 바로 사라진다.

(function () {
  var globalObj = {};

  globalObj.person = {
    name: 'Midohree',
    gender: 'female'
  };

  console.log(globalObj.person.name); // Midohree
}());

console.log(globalObj.person.name); // Error: globalObj is not defined