스코프 (Scope) 이해하기

🌐 프로그래밍의 핵심: 스코프 (Scope) 이해하기 🚀

🎯 글 작성의 목표

  이 글에서는 프로그래밍에서 중요한 개념인 '스코프(Scope)'에 대해 알아보겠습니다. 
  특히, JavaScript를 기반으로 설명하며, 스코프의 주요 규칙, 전역 스코프와 지역 스코프, 블록 스코프와 함수 스코프에 대해 자세히 살펴볼 예정입니다. 

📚 스코프의 의미는? 💡

  '스코프'는 프로그래밍 언어에서 어떤 변수나 함수, 객체 등이 유효한 범위를 의미합니다. 
  즉, 어디서부터 어디까지 '접근'할 수 있느냐의 범위를 말합니다.

🌍 스코프의 적용 범위 🔍

  스코프는 크게 '전역 스코프(Global Scope)'와 '지역 스코프(Local Scope)'로 나뉩니다. 
  이는 변수나 함수 등의 접근 범위를 결정하며, 어디에서든 접근 가능한지, 아니면 특정 영역에서만 접근 가능한지를 결정합니다.

🔖 스코프의 주요 규칙 📝

  스코프의 주요 규칙은 다음과 같습니다:

  1. 전역 스코프에서 선언된 변수는 어디에서든 접근 가능합니다.
  2. 함수 내부에서 선언된 변수는 해당 함수 내부에서만 접근 가능하며, 이를 '지역 스코프'라고 합니다.
  3. 중첩된 함수에서는 바깥 함수의 변수에 접근 가능하지만, 바깥 함수에서는 내부 함수의 변수에 접근할 수 없습니다.
  4. 블록({ }) 내에서 var 키워드로 선언된 변수는 해당 블록을 무시하고 함수 스코프를 가집니다.
  5. 블록 내에서 let이나 const 키워드로 선언된 변수는 블록 스코프를 가집니다.

📝 스코프의 주요 규칙 예제 🎲

  /* 아래는 스코프의 주요 규칙 예제입니다 */

  var globalVar = "I'm a global variable"; // 전역 변수

  function outerFunc() {
    var outerVar = "I'm an outer function variable"; // 외부 함수 변수

    function innerFunc() {
      var innerVar = "I'm an inner function variable"; // 내부 함수 변수
      console.log(globalVar); // 결과: "I'm a global variable"
      console.log(outerVar); // 결과: "I'm an outer function variable"
      console.log(innerVar); // 결과: "I'm an inner function variable"
    }

    innerFunc();
    console.log(globalVar); // 결과: "I'm a global variable"
    console.log(outerVar); // 결과: "I'm an outer function variable"
    console.log(innerVar); // 결과: ReferenceError: innerVar is not defined
  }

  outerFunc();
  console.log(globalVar); // 결과: "I'm a global variable"
  console.log(outerVar); // 결과: ReferenceError: outerVar is not defined
  console.log(innerVar); // 결과: ReferenceError: innerVar is not defined

🌐 전역 스코프 VS 지역 스코프 🏠

  '전역 스코프'는 코드 어디에서든 접근 가능한 범위를 의미합니다. 
  즉, 스크립트 전체에서 접근 가능한 변수, 함수, 객체 등을 말합니다.

  반면 '지역 스코프'는 특정 부분에서만 접근 가능한 범위를 의미합니다. 
  일반적으로 함수 내부를 가리키며, 해당 함수 내부에서만 접근 가능한 변수, 함수, 객체 등을 말합니다.

⛓️ Block scope VS Function scope 📦

  '블록 스코프(Block Scope)'는 일반적으로 중괄호 { }로 둘러싸인 범위를 의미합니다. 
  이 범위 내에서 let이나 const 키워드로 선언된 변수는 해당 블록 내에서만 접근 가능합니다.

  '함수 스코프(Function Scope)'는 특정 함수 내부를 의미합니다. 
  이 범위 내에서 선언된 변수는 해당 함수 내에서만 접근 가능하며, var 키워드로 선언된 변수는 함수 스코프를 가집니다.

🔑 변수 선언 키워드와 스코프의 관계 🎈

  JavaScript에서는 변수 선언 키워드(var, let, const)에 따라 변수의 스코프가 달라집니다.

  1. var: 함수 스코프를 가집니다. 즉, 함수 내부에서 선언된 var 변수는 해당 함수 내에서만 접

근 가능합니다.
  2. let, const: 블록 스코프를 가집니다. 즉, 중괄호 { }로 둘러싸인 범위 내에서 선언된 let, const 변수는 해당 블록 내에서만 접근 가능합니다.

🌍 전역 개체 🌟

  JavaScript에서는 '전역 개체(Global Object)'라는 개념이 있습니다. 이는 모든 전역 변수와 함수, 빌트인 객체를 소유하는 객체를 말합니다.

  웹 브라우저 환경에서는 'Window' 객체가 전역 개체 역할을 합니다. 
  따라서 웹 브라우저에서 선언된 전역 변수는 Window 객체의 프로퍼티로 접근할 수 있습니다.

🎯 연습해보기: 실습 문제 🚀

  /* 연습 문제: 아래의 문제를 풀어보세요 */

  // 1. 다음의 코드를 실행한 후, 변수 a, b의 결과는 무엇인가요?

  var a = 10;
  {
    let a = 20;
    var b = 30;
    console.log(a); // 결과는 무엇인가요?
    console.log(b); // 결과는 무엇인가요?
  }
  console.log(a); // 결과는 무엇인가요?
  console.log(b); // 결과는 무엇인가요?

📌 마무리하며... 🏁

  이번 글에서는 스코프의 기본적인 개념과 종류, 그리고 JavaScript에서 변수 선언 키워드와 스코프의 관계에 대해 알아보았습니다. 
  스코프는 프로그래밍의 핵심 개념 중 하나로, 이를 정확히 이해하는 것이 매우 중요합니다. 
  여러 번 읽어보고 위의 예제를 직접 코딩해보면서 스코프에 대한 이해를 더욱 깊게 해 보시기 바랍니다.

이상으로 "프로그래밍의 핵심: 스코프 이해하기"에 대한 글을 마치겠습니다. 만약 궁금한 점이나 오류가 있다면 아래 댓글로 남겨주시기 바랍니다. 🙏