Scope

5-1. Scope

1)global and local scope

• 전역스코프
  • 코드의 가장 바깥 영역을 말하며 전역은 전역 스코프를 만든다.
  • 전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수가 되며 전역 변수는 어디서든 참조 가능하다
• 지역 스코프
  • 지역이란 함수 내부 몸체를 말함
  • 지역은 지역 스코프를 만든다
  • 지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수가 되며, 자신으 ㅣ지역 스코프와 하위 지역 스코프에서 유효
• 지역 변수에 선언된 변수가 아니라면 상위 스코프에 있는 변수의 값을 가지고 옴
• 지역 바깥에서는 지역 안에 선언된 변수의 값을 가져올 수 없음
• 가까운 곳에 있는 영역의 변수의 값부터 가져온다

var x = 'global x';
var y = 'global y';

function outer(){
    var z = "outer's local z";
    
    console.log(x);
    console.log(y);
    console.log(z);
    
    function inner(){
        var x = "inner's local x";

        console.log(x);
        console.log(y);
        console.log(z);
    }

    inner();
}

outer();

• 스코프 체인
  • 지역 스코프(x) -> 지역 스코프(z, inner) -> 전역스코프(x,y,outer)
  • 자바스크립트 엔진은 변수를 참조할 때 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다.
  • 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조 가능 / 하위 스코프에서 유효한 변수는 상위 스코프에서 참조 불가능

2) functional level scope

• C, JAVA 등 대부분의 프로그래밍 언어는 몸체만이 아니라 모든 코드 블록(if, for, while, try/catch 등)이 지역 스코프를 만드는 "블록 레벨 스코프"를 가진다.
• var 키워로 선언 된 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정하는 "함수 레벨 스코프"를 가진다.

// i는 전역 변수
var i = 0;

// 전역 변수로 이미 선언 된 i가 중복 선언 된다.
for(var i = 0 ; i < 10 ; i++){}

// for 코드 블럭 내부의 값 변화가 반영 된다.
console.log(i);

5-2. Let and Const

1) var

• ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것

• 중복 선언 문제

  • var 키워드로 선언 된 변수는 같은 스코프 내에서 중복 선언이 허용
  • 초기화 문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작
  • 초기화 문이 없는 변수 선언문은 무시된다

  		var msg = '안녕하세요';
  
  		//중복선언
  		var msg = '안녕히가세요';
  
  		// 초기화 문이 없는 변수 선언문은 무시 된다.
  		var msg;  

• 함수 레벨 스코프

  • 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다

  var i = 0 ;
  for(var i = 0 ; i < 10 ; i++){}
  console.log(i);

• 변수 호이스팅

  • 변수 선언문이 스코프의 선두로 끌어올려진 것 처럼 동작한다.
  • 변수 선언문 이전에 참조할 수 있다.

    console.log(test);
    test = '반갑습니다.';
    console.log(test);
    var test;

    2) let

• var 키워드의 단점을 보완하기 위해 ES6에서는 새로운 변수 키워드인 let, const를 도입

• 변수 중복 선언 금지

  • 같은 스코프 내에서 중복 선언을 허용하지 않음

• 블록 레벨 스코프

  • 모든 코드 블록을 지역 스코프로 인정

  let i = 0;
  for(let i = 0 ; i < 10 ; i++){
    console.log(`지역변수 i : ${i}`);
  }
  console.log(`전역변수 i : ${i}`);

• 변수 호이스팅

  • 변수 호이스팅이 발생하지 않은 것처럼 동작
  • 선언, 초기화 분리되어 동작

3) const

• let의 특징과 동일하지만 상수 선언에서 사용된다는 점이 특징

• const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화

• const 키워드로 선언한 변수는 재할당 금지

• 일반적으로 상수의 이름은 대문자로 선언해 상수임을 나타냄

  • 여러 단어로 이루어진 경우 _ 로 구분해서 스네이크 케이스로 표현하는 것이 일반적

  const DISCOUNT_RATE = 0.1;

• 대상 객체를 변경하는 것은 불가능하지만 객체의 프로퍼티를 변경하는 것은 가능

  • 객체가 참조하고 있는 주소값을 변경하는 것은 불가능

    const 키워드로 선언 된 변수에 객체를 할당한 경우 프로퍼티 값을 변경할 수 있다.

  const student = {
    name : '홍길동',
    age : 20
  };
  
  student.name = '유관순';
  console.log(student);
  
  // 객체 재할당은 불가능하다.
  // student = {}; TypeError : Assignment to constant variable