스코프란 현재 실행되는 컨텍스트를 말한다.
여기서 컨텍스트는 값과 표현식이 "표현"되거나 참조 될 수 있음을 의미한다.
Scope는 직역하면 영역, 범위 라는 뜻이다.
자바스크립트에서 Scope(스코프)는 변수에 접근할 수 있는 범위를 말한다.
스코프가 필요한 이유
전역변수는 각기 다른 로직에서 사용하는 같은 이름의 변수값을 변경시켜서 의도하지 않은 문제를 발생시킨다.
같은 이름의 변수를 사용했지만 각각의 취지가 다를때 위와 같은 의도치 않은 결과를 초래하게 된다.

출처: 웹클럽
위와 같은 코드는 우리가 짧기 때문에 쉽게 인지할 수 있지만 만약에 많은 양의 코드를 가지고 있는 코드라면 문제점을 발견하는 것은 정말 어려울 것이다.
바로 이러한 문제를 해결,완화하기 위해서 도입된 개념이 프로그래밍 역사에서 전역변수,지역변수인 유효범위라고 한다.
scope의 종류는 전역스코프, 지역스코프두가지 종류가 있다.
지역 스코프에 선언한 변수는 지역 변수, 전역 스코프에서 선언한 변수는 전역 변수입니다.
스코프의 종류
스코프의 종류는 블록스코프와 함수스코프가 있다.
블록 스코프(block scope)
블록스코프는 중괄호'{}'를 기준으로 범위가 구분된다.
그리고 화살표 함수는 블록 스코프로 취급된다. 함수스코프 아님 주의!
함수 스코프(function scope)
함수스코프는 function 키워드가 등장하는 함수 선언식 및 함수 표현식이다.
함수 단위 변수 관리
대부분의 프로그래밍 언어는 블록 레벨 스코프(Block-level scope)를 따른다.
예를 들어, for문의 코드 블록 내부에서 정의된 변수는 외부에서는 접근할 수 없다.
자바스크립트는 함수 레벨 스코프(Function-level scope)를 따른다. 함수를 이요해 변수 스코프를 정의한다. 이것은 함수를 단위로 해당 함수가 사용하는 변수를 관리한다는 의미이다.
함수 레벨 스코프(Function-level scope)
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.
스코프 규칙
1. 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능하다!
반면에, 안쪽에서 선언한 변수는 바깥쪽 스코프에서는 사용할 수 없다.
2. 스코프는 중첩이 가능하다.
3. 가장 바깥쪽의 스코프는 전역 스코프(Global Scope)라고 부른다.
전역의 반대말은 지역(local)으로 전역이 아닌 다른 스코프는 전부 지역 스코프(local scope)다.
4. 지역 변수는 전역 변수보다 더 높은 우선순위를 가진다.
키워드 별 차이
var
1. var 키워드로 정의한 변수는 함수스코프를 따르고 블록 스코프를 무시한다.
2. 화살표 함수의 블록 스코프는 무시하지 않는다.
3. 재선언을 해도 에러를 내지 않는다.
4. var 키워드 생략 허용
선언 없이 변수를 할당하면 해당 변수는 var로 선언한 전역 변수처럼 취급된다. 선언 없이 변수 할당하지 않기! 그리고 전역 변수를 var로 선언하는 것은 브라우저의 내장 기능을 사용하지 못하게 만들 수도 있다.
5. var 키워드로 선언한 전역 변수는 전역 객체(Global Object) window의 프로퍼티다.
let
1. let 키워드는 재선언을 방지한다.
const
2. 변하지 않는 값, 곧 상수(constant)를 정의할 때
const는 값의 재할당이 불가능합니다.의도하지 않은 값의 변경을 막을 수 있습니다.

쉐도잉
변수 이름이 전역 변수와 똑같지만, 지역 변수가 전역 변수보다 우선순위가 높으므로, 지역 변수 name이 출력되는 것입니다. 동일한 변수 이름으로 인해 바깥쪽 변수가 안쪽 변수에 의해 가려지는(shadow) 이러한 현상을 쉐도잉(variable shadowing)이라고 부릅니다.
'use strict' 브라우저가 보다 엄격하게 작동하도록 만들어줍니다.