Scope(2) - Scope의 오염 🤔

이전글은 요기로! 👉 Scope(1)

 

Scope의 오염 . . .

❓ 스코프가 오염 된다는 말은 무슨 말일까 ?

global 변수를 쓰면 여기 저기서 접근하기 쉬워서 좋다고 생각할 수 있지만,
너무 남용하면 프로그램에 문제를 일으킬 수 있다

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);

• callMyNightSky 함수에서 새로운 변수를 let 키워드를 선언하지 않았다
• callMyNightSky 을 호출하면 stars 변수에 "Sirius" 이 할당된다
• global 변수였던 stars 에 영향이 간다
• 다른 함수에서 global 변수인 stars 을 사용하고 싶은데 값이 수정된 "Sirius" 으로 사용하게 된다

조심 ❗
이렇듯 global 변수를 남용한다면 어디서 어떻게 값이 수정되는지 추적하기 어려워지게 된다

 

👉 오염에 대해서도 알아봤으니,
이제 스코프에 대해 문제를 통해 자세히 알아보자
아래는 스코프 문제이다 함께 풀어보자 💡

스코프란? ->

let x = 100; // 블록{} 밖에 선언하면 전역에서 접근할수 있는 변수가 된다 = 전역변수
      function 함수() {
        let y = 20; // 블록{} 안에 선언시 밖에서 접근 불가능 = 지역변수
        console.log(x); // x가 없으니 위로 올라가서 찾는다 = 스코프 체이닝
      }
      함수(); // 100 -> 변수 x는 전역변수이다

      // 함수1 의 값은 ?
      let a = 10; 
      let b = 10;
      function 함수1() {
        let a = 20;
        let b = 20;
        function 함수2() {

          let a = 30;
          console.log(a, b, c);
        }
        함수2();
      }
      함수1();

아래는 풀이를 확인 할수있다

스코프란?
변수에 접근할 수 있는 유효범위, 변수의 접근성과 생존 기간을 제어하는 ‘생존 범위’를 의미
스코프 체이닝이란 ?
스코프가 어떻게 연결(chain)되고 있는지 보여주는 것,
해당 영역에 찾는 변수가 없으면 계속해서 상위 스코프를 따라 올라간다
window 까지 따라 올라가도 없으면 error

  let x = 100; // 블록{} 밖에 선언하면 전역에서 접근할수 있는 변수가 된다 = 전역변수
  function 함수() {
    let y = 20; // 블록{} 안에 선언시 밖에서 접근 불가능 = 지역변수
    console.log(x); // x가 없으니 위로 올라가서 찾는다 = 스코프 체이닝
  }
  함수(); // 100 -> 변수 x는 전역변수이다
  
  

  // 함수1 의 값은 ?
  let a = 10; // a=10,b=10,함수1 의 각각의 메모리공간이 있다
  let b = 10;
  function 함수1() {
    // 함수1은 a=20, b=20,함수2에 연결되어있다
    let a = 20;
    let b = 20;
    function 함수2() {
      //함수2는 a=30 에 연결되어있다
      // 여기서 만약 변수 c를 찾으면 스코프 체이닝(올라가며 c를 찾는다)한다
      let a = 30;
      console.log(a, b, c);
    }
    함수2();
  }
  함수1(); // 30 20