Scope

: 식별자(변수, 함수, 클래스 등)의 유효범위

• 유효범위 : 참조 / 접근 가능하다
  Q, 너의 변수가 존재하는가? 접근할 수 있나?

특징

1. 지역스코프 => 전역스코프로 접근 가능하지만,
   전역스코프 => 지역스코프로 접근 불가능하다

2. 스코프 중첩이 가능하다

3. 우선순위 : 지역변수 > 전역변수

• 전역 변수
  어디서든 참조가 가능
• 지역 변수
  자신의 지역과 하위지역 스코프에서 유효

종류

1. Global scope 전역 스코프

{ } 코드블록 외부에서 선언하여 어디서든지 접근가능하다

2. Local scope 지역 스코프

해당 코드블록 내부에서만 접근 가능하다.

2-1. block scope 블록 스코프

if, for, while, try-catch문, 함수 등 코드블록이 지역스코프다

• 코드블록 내부변수가 지역변수다
• 화살표 함수는 블록 스코프로 취급한다
• 대부분 프로그래밍 언어에서 블록 스코프를 가진다
• JavaScript에서도 블록 스코프를 가지기 위해서 let, const (ES6) 가 등장했다.

// if문, for문, {} 블록으로 감싼 범위
if(true){
  console.log('block');
}
// 화살표 함수
let hello = name => { return name.greeting; }

2-2. function scope 함수 스코프

오직 함수만 지역스코프다

• 함수 내부변수가 지역변수다
• 함수에서 var는 지역변수고, 블록에서 var는 전역변수다
• JavaScrip의 var 변수가 해당된다

function hi(){
  var name = 'zito';
  console.log(name);
}
hi();          // 'zito'
console.log(name); // undefined

변수 선언

	var	let	const
유효범위	함수 스코프	블록/함수 스코프	블록/함수 스코프
재할당	가능	가능	불가능
재선언	가능	불가능	불가능

var

• 변수 재선언 가능, 재할당 가능
• var 전역변수, 전역함수는 window 객체에 속한다

var name = 'zito';
console.log(window.name); // zito

• 함수내부에서 지역변수, 함수외부에선 전역변수다

let

• 재선언 불가하므로 var보다 더 안전한 방식이다
• 값 재할당 가능

const

• 변수 재할당, 재선언 불가능
  값 재할당 불가하여 값의 변경을 방지한다

• 변하지 않는 상수 constant를 정의

엄격 모드(strict mode)

JS는 기존 기능을 변경하지 않으면서 새로운 기능을 추가했다.

• 문제점 (ES5 전)
  ES5 전까진 JS 창시자들의 실수나 불완전한 문법이 언어 안에 박제됐다.
• ES5부터
  그런데 ES5부터는 새로운 기능이 추가되면서 기존기능 일부가 변경됐다. 이 기존기능의 변경때문에 하위 호완성 문제가 발생하게 됐다. 그래서 기존기능의 변경사항 대부분은 ES5의 기본모드에선 변경사항이 활성화되지 않도록 설계했다.
  그래서 엄격모드를 활성화했을 때만 기존기능 변경사항이 활성화되도록 했다.

• "use strict"를 최상단에서 실행해야 하고, 이는 취소할 수 없다

• 클래스, 모듈을 사용한다면 "use strict"가 자동으로 적용된다

"use strict"; // 최상단에서 실행해야 엄격모드 활성화됨

총 정리

1. 스코프는 식별자의 유효범위.

2. 전역 / 지역 스코프가 있다

3. 지역 - 블록 / 함수 스코프가 있는데
   JS에선 함수스코프 var만 있었지만
   블록스코프를 사용하기 위해 let, const가 등장(ES6)

4. 전역 변수를 최소화하고 let, const를 사용하라

5. 선언을 먼저 하고 변수를 할당하라

6. 'use strict' js 파일 상단에 입력
   strict mode 사용하면 선언없는 변수 할당을 브라우저가 에러로 처리하기 때문에 side effect를 방지할 수 있다.