[JS] 스코프 (Scope)

---

스코프와 주요 규칙

스코프는 변수의 유효범위를 뜻한다.

let username = 'kimcoding';
if(username) {
  let message = `Hello, ${username}!`;
  console.log(message); // Hello, kimcoding!
}
console.log(message); // ReferenceError

변수에 접근할 수 있는 범위가 존재한다. 중괄호(블록) 안쪽에 변수가 선언되었는가, 바깥쪽에 변수가 선언되었는가가 중요하다. 이 범위를 우리는 스코프라고 부른다.

1. 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수있지만 반대는 불가능하다.
2. 스코프는 중첩이 가능하다.
   
3. 가장 바깥의 스코프는 특별히 전역 스코프(Global scope) 라고 부른다. 전역이 아닌 다른 스코프는 지역 스코프(Local scope)이다.
4. 지역 변수는 전역변수보다 더 높은 우선순위를 가진다.

let name = '김코딩';

function showName() {
  let name = '박해커'; // 지역 변수
  console.log(name); 
}
console.log(name); // 김코딩
showName(); // 박해커 (지역 변수 우선)
console.log(name); // 김코딩

---

스코프 종류

블록 스코프 (block scope)

중괄호를 기준으로 범위가 구분된다.

if(true){
  // ... 블록스코프
}

for(let i = 0; i < 10; i++){
  // ... 블록스코프
}

{
  // ... 블록스코프
}

함수 스코프 (function scope)

function 키워드가 등장하는 함수 선언식 및 함수 표현식은 함수 스코프를 만든다.

function getName(user) {
  // ... 함수스코프
}

let getAge = function(user) {
  // ... 함수스코프
}

주의) 화살표 함수 (block scope)

화살표 함수는 함수 스코프가 아닌 블록 스코프로 취급한다

let getAge = user => {
  return user.age;
}

같은 함수여도, 화살표 함수를 사용하면 블록 스코프로 취급된다.

let getAge = function(user) {
  return user.age
}

function 키워드를 사용하면 함수 스코프이다.
이는 화살표 함수와 일반 함수의 가장 큰 차이점이다.

---

변수와 스코프

var 키워드 vs let 키워드

• var 키워드로 정의한 변수는 블록 스코프를 무시하고, 함수스코프만 따른다.
  (화살표 함수의 블록 스코프는 무시하지 않음)
• 함수 스코프는 함수의 실행부터 종료까지이고, var 선언은 함수 스코프의 최상단에 선언된다. 선언 키워드 없는 선언은 최고 스코프에 선언된다.
• 블록 단위로 스코프를 구분했을 때, 훨씬 더 예측 가능한 코드를 작성할 수 있으므로 let 키워드 사용이 권장된다.
• var를 사용하지 않는다 해도, 함수 스코프는 let으로 선언된 변수의 접근 범위를 제한한다.
• let키워드는 재선언을 방지하므로 var보다 안전하다.

const

• 값이 변하지 않는 상수를 정의할 때 쓴다.
• let 키워드와 동일하게, 블록 스코프를 따른다.
• 값의 변경을 최소화하여 보다 안전한 프로그램을 만들 수 있다. 값을 새롭게 할당할 일이 없다면, const 키워드의 사용이 권장된다.
• 값을 재할당하는 경우 -> TypeError

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

---

변수 선언에서 주의할 점

1. window 객체

• window객체는 브라우저창(window)을 의미하는 객체이지만, 이와 별개로 전역 영역을 담고 있기도 하다.
• 함수 선언식으로 함수를 선언하거나, var로 전역 변수를 만들면, window 객체에 속하게 된다.

var myName = '김코딩';
console.log(window.myName); // 김코딩

function foo(){
  console.log('bar);
}
console.log(foo === window.foo) // true

2. 전역 변수 최소화

• 전역변수: 어디서든 접근이 가능한 변수
• 편리한 대신, 다른 함수 혹은 로직에 의해 의도되지 않은 변경이 발생할 수 있음
  • 부수효과(side effect) 발생

3. 선언 없는 변수 할당 금지

선언 키워드(var, let, cosnt)없이 변수를 할당하면, 해당 함수는 var로 선언한 전역 변수처럼 취급된다.

function showAge(){
  age = 90; // age는 전역 변수로 취급됨
  console.log(age); // 90
}
showAge();
console.log(age); // 90
console.log(window.age); // 90

age는 선언한 적 없으나, 값을 할당하면서 마치 var로 선언된 전역 변수처럼 동작한다.

js 파일 상단에 'use strict' 을 입력해 Strict Mode로 더 안전하게 코드를 작성할 수 있다.