🙋 목표: 자바스크립트 기초를 공부하고 부족한 부분을 채우자.

1. Scope

🙌 is not defined라는 에러 메세지를 본 적이 있다. 변수가 아직 선언되지 않았다. 라는 뜻이다.

어떤 변수는 여기저기서 쓸 수 있는 반면에, 어떤 변수는 특정 함수내에서만 쓸 수 있다. 이런 개념이 바로 Scope이다.

2. Block

function 과 if 문, for 문을 하면서 우리는 block이란 ({}, curly brace)로 감싸진 것을 말한다.

함수도 함수 내부는 하나의 block이다.

function hi() {
  return 'i am block';
}

block내부에서 정의된 변수는 local(지역) 변수

function getResult() {
  const localValiable: 1;
}

3. Global(전역) Scope

scope는 변수가 선언되고 사용할 수 있는 공간이다.

scope 외부에서는 특정 scope의 변수에 접근할 수가 없다.

block밖인 global scope에서 만든 변수를 global variable(전역변수)라고 한다.

전역변수는 자바스크립트 코드내에 어디서든 접근이 가능하다.

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

4. Scope를 잘못쓰면

global 변수를 쓰면 여기 저기서 접근하기 쉬워서 쉽다고 생각할 수 있지만, 남용할 때는 문제가 생긴다로 한다.

global 변수를 선언하면, 해당 프로그램의 어디에서나 사용 가능한 global namespace를 갖는다.

namespace는 변수 이름을 쓸 수 있는 범위를 말한다.

scope라고도 하고 특히 변수이름을 얘기할 때는 namespace라고도 한다.

global 변수는 프로그램이 실행, 종료될 때까지 계속 살아있다. 메모리하고도 연관이 있는데 메모리에 탑재가 된다. 따라서 global 변수는 최소한으로 작성하는 것이 좋다.

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

앞으로 함수가 몇 백개, 몇 백만개 있을지 모르기 때문에 위처럼 global 변수를 남용하다가는 어디서 수정해야할 지 모르는 상황이 나올수 있기 때문에 조심해야 한다.

5. 그럼 좋은 Scoping은 뭘까? 잘 쓴 Scope는 무엇을 의미할까?

결국 우리는 변수들을 적재적소에 잘 선언하기 위해서 block과 scope를 잘 이해하고 사용해야 한다.

• 타이트한 scoping을 써서 코드 품질을 높히자!
• block으로 명확하게 구분지어서 코드 가독성을 올리자!
• 각각 기능별로 block을 나눠서 코드 이해도를 높히자!
• 나중에 코드를 다시 보더라도 잘 이해할 수 있도록 유지보수하기 좋게 신경을 쓰면서 작성하자!
• 잘 쓴다면 메모리도 절약이 된다는 것을 잊지말자!

6. Assignment

오른쪽에 설명해야 할 단어를 텍스트로 작성했는데 description 변수에 해당 단어에 대한 설명을 딱 한 문장으로 작성한다면

function whatIs(type) {
  let description;
  
  switch (type) {
    case 'scope':
      description = '변수가 적용되는 범위';
      break;
    case 'block':
      description = '중괄호로 묶여진 단위';
      break;
    case 'global scope':
      description = '전역 범위';
       break;
    case 'global variable':
      description = '전역 변수, 문서 전역에 영향력을 행사하는 변수';
       break;
    case 'block scope':
      description = '중괄호 안의 범위';
       break;
    case 'local variable':
      description = '지역 변수, 중괄호 안에서 선언되는 변수';
      break;
    case 'global namespace':
      description = '전역 변수를 사용할 수 있는 범위';
      break;
    case 'scope pollution':
      description = '전역 변수를 남용하여 값이 변경된 경우';
      break;
    default :
      description = ''
      break;
  }
  
  return description;
}