TIL_27_with Wecode 017 JavaScript about Scope

🐱‍🐉 Scope
JavaScript에서 scope이란, JavaScript의 문법이 아니고 '변수가 어디까지 쓰일 수 있는지'의 범위를 의미합니다. 어떤 변수는 여기저기서 쓸 수 있는 반면에, 어떤 변수는 특정 함수 내에서만 쓸 수 있었습니다.
이런 개념이 바로 scope입니다.
block이란 중괄호({}, curly brace)로 감싸진 것을 block이라고 합니다.
function의 내부는 하나의 block입니다.

function hi() {
  return 'i am block'; //{}로 감싸진 함수의 내부!
}

for문도 하나의 block이고요

for (let i = 0; i < 10; i++) {
  count++; //{}감싸진 for문의 내부!
}

if문의 {}도 하나의 block입니다.

if (i === 1) {
  let j = 'one'; //{}감싸진 if문의 내부!
  console.log(j);
}

🙀 {}(block)내부에서 변수가 정의되면 변수는 오로지 {}(block)내부에서만 사용할 수 있습니다.
{}(block)내부에서 정의된 변수는 local(지역)변수라고 부릅니다.

아래의 코드는 문제가 있습니다. 확인해봅시당

function getResult() {
  let result = 10;
  return result;
}
// 자바스크립트 에러! 
// getResult 내부의 scope에 접근할 수 없다
console.log(result);

console.log(result)에서 getResult 내부에 접근이 불가능하기 때문에 result라는 변수가 존재하는지 알지 못합니다.
result 라는 변수는 getResult함수의 {}(block) 내부에서 선언이 되었기 때문에, result 변수는 getResult함수 내부에서만 사용할 수 있습니다.

🐱‍🐉 Global(전역) Scope
scope은 변수가 선언되고 사용할 수 있는 공간입니다.
scope 외부(block밖)에서는 특정 scope의 변수에 접근할 수가 없습니다.
block밖인 global scope에서 만든 변수를 global variable(전역변수)라고 합니다.

const color = 'red';
console.log(color);
function returnColor() {
  console.log(color);
  return color;
}
console.log(returnColor());

returnColor 라는 함수 내에서, returnColor 함수 밖에 있는 color라는 변수를 return해주었습니다.
color라는 변수는 global 변수이기 때문에 returnColor함수의 block에서도 접근이 가능해서 'red'를 반환한것입니다.
다시 말하면, color 라는 변수는 이미 returnColor 함수 밖에서 const color 로 변수가 지정이 됐기 때문에 returnColor 함수 내부에서도 접근이 가능한 것입니다.

🐱‍🐉 Scope의 오염
위에서 설명한 global 변수를 선언하면, 해당프로그램의 어디에서나 사용할 수 있는 global namespace를 갖습니다. namespace 라는 것은 변수 이름을 사용할 수 있는 범위라는 뜻입니다. scope이라고도 하고 특히 변수이름을 얘기할 때는 namespace라고도 합니다.
global 변수는 프로그램이 종료될때까지 계속 살아있습니다. 이 말은 local 변수는 {} - block이 끝나면 더 이상 변수가 살아있지 않고 쓸 수 없다는 말입니다.
global 변수가 계속 살아있어서 변수값이 계속 변한다면 해당 변수를 트래킹하기도 어렵고 이 변수는 어디에서 왜 필요한지 알려면 도대체 어디에서 let, const로 선언을 했는지 찾아 나서야 합니다.
아래는 scope이 오염된 대표적인 예입니다.

const satellite = 'The Moon';
const galaxy = 'The Milky Way';
let stars = 'North Star';
const callMyNightSky = () => {
  stars = 'Sirius';
  return 'Night Sky: ' + satellite + ', ' + stars + ', ' + galaxy;
};
console.log(callMyNightSky());
console.log(stars);

• stars이라는 global 변수가 있습니다.
• callMyNightSky함수에서 새로운 변수를 선언하고 싶었는데 깜빡하고 let 키워드를 작성하지 않았습니다.
• callMyNightSky을 호출하면 stars 변수에 "Sirius"이 할당됩니다.
• global 변수였던 stars에 영향이 갔습니다!
• 다른 함수에서 global 변수인 stars을 사용하고 싶은데 값이 수정된 "Sirius"으로 사용하게 됩니다.
  앞으로 함수가 몇 십개 있을지도 모르는 상황에서 저렇게 global 변수를 남용하다가는 어디서 어떻게 값이 수정될지 알 수 없어집니다.

🐱‍🐉 좋은 Scoping 습관
위와 같이 global 변수가 여기저기서 수정되면 안되기 때문에 변수들은 block scope으로 최대한 나눠놔야 합니다.
타이트한 🙀scope(tightly scoping)의 변수는 코드 품질을 올려줍니다!!

• 코드가 block으로 명확하게 구분되기 때문에 코드 가독성이 올라갑니다.
• 코드가 한줄한줄 쭉 나열된 것이 아니라 각각의 기능별로 block을 나누면 코드가 이해하기 쉬워집니다.
• 나중에 코드를 수정할 일이 있을 때, 코드를 오랜만에 보더라도 잘 나뉘어 있어서 유지보수가 쉬워집니다.
• 프로그램이 끝날때까지 변수가 살아있는 것이 아니라서(block이 끝나면 local 변수의 삶이 끝나서) 메모리 절약도 됩니다.
  즉, 한마디로 요약하면 🙀global 변수는 쓰지 않도록 노력해야 하고, 최대한 {}내에서 let, const을 사용하여 변수를 새로 만들어서 쓰자는 말입니다.
  이번에는 if문의 {}의 block scope을 보겠습니다.

function logSkyColor() {
  const dusk = true;
  let myColor = 'blue'; 
  if (dusk) {
    let myColor = 'pink';
    console.log(myColor); // pink
  }
  console.log(myColor); // blue 
}
console.log(myColor); // 에러!!

• if문에 {}의 코드 block을 사용하였습니다. 여기에 myColor라는 변수를 let으로 선언하였습니다.
• if문내에서는 "pink"라고 할당하였고, if문 밖에서는 "blue"라고 할당한 것에 주목해주세요.
• 사실 이 코드는 function의 block scope, if문의 block scope으로 모두 block 을 잘 사용하였는데도 scope namespace가 오염된 것입니다. 왜냐하면 같은 이름의 변수를 사용했기 때문입니다.

이렇게 🙀새로운 block에서 변수를 쓸 때는 항상 다른 이름으로 변수를 선언해야한다는 것을 잊지 말아주세요.

JavaScript Switch Statement