Scope

scope에서 짚고넘어가야 될 녀석들

● lexical scope / dynamic scope   

● local scope / global scope

● block level / function level

● 호이스팅

---

- lexical scope / dynamic scope

 

lexical(static) scope : 유효범위가 코드를 작성될 때 결정됨 -> 자바스크립트에서는 함수가 선언되는 동시에 자신만의 scope를 가짐

dynamic scope : 유효범위가 실행 순서에 의해 결정됨                     

 

* 유효범위란? 변수(선언)와 그 값(할당)이 어디서부터 어디까지 접근이 가능한지를 판단하는 범위

var scope; // 선언입니다.
scope = '할당입니다'; // 할당입니다. 

console.log(scope) // => '할당입니다'

꼭 선언을 해주고 할당하자 ! 되도록이면 전역변수는 많지 않을수록 좋다. 나중에 같은이름의 변수가 등장했을때 버그를 초래할 수 있음

---

 

-  local scope / global scope

 

local scope(지역변수) : 함수안에 정의되어있는 변수는 그 안에서만 쓸 수 있다 - 바깥에서 접근 불가능 !

global scope(전역변수) : 전역변수는 어디서든 접근이 가능함

var global = '전역변수입니다';

function makeLocal(){
  var local = '지역변수입니다';
    console.log(global + ' ' + local); // 전역변수입니다 지역변수입니다
}

makeLocal();
console.log(global); // => 전역변수입니다
console.log(local);  // => 에러(ReferenceError)

---

- function level /  block level

 

function level :  var 

block level : let / const (ES6)

 

function level 예제 :

function functionLevel(){
    for(var i = 0; i < 1; i++){
      var exam = '함수레벨입니다';
        console.log(exam); // => 함수레벨입니다
    }
    console.log(exam); // => 함수레벨입니다
}

block level 예제 :

function blockLevel(){
  for(let i = 0; i < 1; i++){
    let exam = '블락레벨입니다';
      console.log(exam); // => '블락레벨입니다'
  }
  console.log(exam); // ? => 에러(ReferenceError)
}


const sayHello = '수정 불가능입니다';
// for(const i = 0; i < 3; i++) : 잘못된 예제 !

let, const 는 block level 이기 때문에 { } 이 부분을 벗어나서 접근할려하면 에러가 뜬다

 

1. let과 const keyword는 block을 벗어나면, 접근 불가능

2. let과 const는 var로 정의된 변수를 재정의할 수 없음

3. const는 불변(immutable)한 값으로, 다시 값을 할당할 수 없음

---

- 호이스팅 규칙

예제1.
// 실제코드 //
var a = 2;
// javascript //
var a;
a = 2;

예제2.
// 실제코드 //
a = '호이스팅;
var a;
console.log(a); // ??

// javascript //
var a;
a = '호이스팅';
console.log(a); // 호이스팅

Quiz.

1.
console.log(a)
var a = 2;

2.
function showName() {
  console.log("First name : " + name);
  var name = "Ford";
}

 

 

함수선언식은 항상 상단으로 호이스팅됨 function a(){} => 얘는 통째로 올라가니까 실행이 될 수도 있지만,

함수표현식은 할당된 변수만 상단으로 호이스팅됨 var a = function(){} => 에러가 날것이다.

 

const와 let을 사용할 때는 선언한 곳보다 위에서 접근하는 것이 금지된다(에러 발생).

 

정리 : let과 const를 잘 쓰자 

var는 너무 자유분방하다

---