(자알쓰) Scope Part. 1

// 전역 공간은 스코프를 공유한다.
var a = 1;
var b = 2;
if(a < b) {
  var i = 3;
} else {
  // 사실 전역에 있는 변수는 공유되기 때문에 여기서는 var를 생략해도 된다.
  var i = 4;
}
var c = function() { // 함수 단위의 스코프가 시작됐다.
  var a = 5;
  var d = 6;
  console.log(a); // 5, 현재 스코프에 a가 있기 때문에 현재 스코프에 있는 a를 출력한다.
}
console.log(i); // 3, 함수 단위의 스코프이기 때문에 같은 전역 공간에 있다고 간주해서 변수를 공유하기 때문에 사용 가능하다.
c();
console.log(d); // Uncaught ReferenceError: d is not defined, 함수 단위의 스코프이기 때문에 함수에서 쓰인 변수는 함수에서만 사용할 수 있다.

var a = 1;
var b = function() { // 외부 함수 스코프(b)의 시작
  var c = 2;
  var d = function() { // 내부 함수 스코프(d)의 시작
    // 1. 현재 스코프(d)에는 a란 변수가 없다.  
    // 2. 스코프 체인을 타고 스코프 b로 올라간다.
    // 3. 스코프 b에도 a란 변수가 없다.  
    // 4. 스코프 체인을 타고 전역 스코프로 올라간다.  
    // 5. 전역 스코프에는 a란 변수가 있으므로 그 a를 출력한다.
    console.log(a); // 1
    
    // 1. 현재 스코프(d)에는 c란 변수가 없다.  
    // 2. 스코프 체인을 타고 스코프 b로 올라간다.
    // 3. 스코프 b에도 c란 변수가 있으므로 그 c를 출력한다.  
    console.log(c); // 2
  }
  d(); // 내부 함수 d를 호출
}
b(); // 함수 b를 호출

var b = 1;
var c = function() { // 외부 함수 스코프(c)의 시작
  var d = 2;
  var e = function() { // 내부 함수 스코프(e)의 시작
    // 변수의 선언을 var 없이 하면 스코프 체이닝이 발생한다.  
    // 1. 현재 스코프(e)에는 d라는 변수가 없다.
    // 2. 스코프 체인을 타고 상위 스코프인 c로 이동한다.  
    // 3. 스코프 c에는 변수 d가 있으므로 그 변수에 3을 할당한다.
    d = 3;
    
    // 1. 현재 스코프(e)에는 d라는 변수가 없다.
    // 2. 스코프 체인을 타고 상위 스코프인 c로 이동한다.  
    // 3. 스코프 c에는 변수 b가 없다.
    // 4. 스코프 체인을 타고 상위 스코프인 전역 스코프로 이동한다.
    // 5. 전역 스코프에는 변수 b가 있으므로 그 변수에 4를 할당한다.
    b = 4;
    
    // 1. 현재 스코프(e)에는 d라는 변수가 없다.
    // 2. 스코프 체인을 타고 상위 스코프인 c로 이동한다.  
    // 3. 스코프 c에는 변수 b가 없다.
    // 4. 스코프 체인을 타고 상위 스코프인 전역 스코프로 이동한다.
    // 5. 전역 스코프에는 변수 f가 없으니 새로 만들고 5를 할당한다.
    f = 5;
  }
  // 똥 싸기 전에는 2를 가지고 있다가
  console.log(d); // 2
  
  e(); // 내부 함수 e를 호출
  
  // 똥싸고 나니 3으로 변하였다.
  console.log(d); // 3
}
// 똥 싸기 전에는 1을 가지고 있고 f는 벌써 호이스팅 처리가 전부 끝난 건지 5가 할당되어있다.
console.log(b); // 1
console.log(f); // 5

c(); // 함수 c를 호출

// 똥싸고 나니 3과 5라는 변수로 바뀌었다.
console.log(b); // 4
console.log(f); // 5

'use strict';
// 이렇게 전역 스코프 상단에 저 구문을 넣어주거나 
// 사용하려는 함수 바디 상단에만 넣어주면 된다.  
// 미지원 브라우저는 그냥 문자열로 인식하고 오류를 뿜지 않는다.
var a = 1;
var b = function() {
  // 얘는 전역 스코프에 존재하는 녀석이어서 그 변수를 덮어씌우면 되니 오류를 뿜지 않는다.
  a = 1;
  // 스코프 체인 상에 존재하지 않는 변수를 var 없이 선언하면 오류를 뿜게 된다. 
  d = 2; // Uncaught ReferenceError: d is not defined
}
// 스코프 체인 상에 존재하지 않는 변수를 var 없이 선언하면 오류를 뿜게 된다. 
c =  3; // Uncaught ReferenceError: c is not defined
b();

'use strict';
var num = 1;

window.onload = function() {
  'use strict';
  var btnA = document.getElementById('a');
  var btnB = document.getElementById('b');
  btnA.onclick = function() {
    console.log(num);
  };
  btnB.onclick = function() {
    console.log(num);
  }
};

'use strict';
// 코드 블라블라
var num = 2;
// 코드 블라블라

'use strict';
// 내가 작성한 a.js
var num = 1;

// 내 부사수가 작성한 c.js
// 블라블라
var num = 2;
// 블라블라

// 내가 작성한 b.js
window.onload = function() {
  'use strict';
  var btnA = document.getElementById('a');
  var btnB = document.getElementById('b');
  btnA.onclick = function() {
    console.log(num);
  };
  btnB.onclick = function() {
    console.log(num);
  }
};