[TIL-18] Scope

da.circle·2022년 10월 3일
0

TIL

목록 보기
18/44

JavaScript Scope에 대해 조금 더 자세히 공부해보았다.

Block

  • 중괄호({})로 감싸져 있는 영역
  • function의 내부는 하나의 block이다.
function block() {
  return "block";
}
  • for문도 하나의 block이다.
for (let i = 0; i < 10; i++) {
  count++;
}
  • if문도 하나의 block이다.
if (i === 1) {
  let j = 'one';
  console.log(j);
}
  • block내부에서 선언한 변수는 해당 block 내에서만 사용할 수 있다.
function block() {
	let result = "block"  
	return result;
}

console.log(result); 
//Uncaught ReferenceError: result is not defined

Global Scope(전역 스코프)

  • block 외부에 선언한 변수를 global variable(전역 변수)라 한다.
  • 코드 어디에서라도 접근이 가능하다.
const color = 'red';
console.log(color);

function returnColor() {
//여기서도 color변수 사용가능!
  console.log(color);
  return color;
}

//여기서도 color변수 사용가능!
console.log(returnColor());

Scope 오염

  • 전역 변수를 너무 많이 사용하면 프로그램에 문제가 생길 수 있다.
  • global 변수 선언 시, 해당 프로그램의 어디에서나 사용할 수 있는 global namespace 를 갖게 된다.
    • namespace : 변수 이름을 사용할 수 있는 범위. scope라고도 하고 변수이름을 얘기할 때는 namespace라고도 한다.
  • global 변수는 프로그램이 종료될 때까지 계속 살아있다. block안에 있는 local 변수를 block이 끝나면 더 이상 사용할 수 없다는 의미!
  • global 변수가 계속 살아있어서 변수값이 계속 변한다면 해당 변수를 트래킹하기 힘들다.
  • 변수가 어디에 왜 필요한지 알려면 선언부까지 가서 확인해야 하는 번거로움이 있다.
const A = 'A';
const B = 'B';
let C = 'C';

const myAlpha = () => {
  C = "changeC"
  
  return "ABC : " + A + ', ' + B + ', ' + C;
};

console.log(myAlpha()); //ABC : A, B, changeC
console.log(C); //changeC

→ C라는 global변수

→ myAlpha 함수에서 새로운 변수 C를 선언해야하는데 let을 사용하지 않음

→ myAlpha 함수를 호출하면 C의 값이 changeC로 바껴있다.

⇒ global 변수였던 C에 영향이 갔다!!

⇒ 다른 함수에서 global 변수인 C를 사용하면 더이상 C가 아닌 changeC값으로 사용하게 된다.

⇒ 변수들은 block scope로 최대한 나누는게 좋다!

  • 코드 품질이 올라간다.
  • 기능별로 block을 나누면 코드를 이해하기 쉬워진다.
  • 유지보수가 쉬워진다.
  • block이 끝나면 변수의 저장도 끝나기 때문에 메모리 절약이 된다.
function myColor() {
  const haveColor = true;
  let color = 'blue'; 

  if (haveColor) {
    let color = 'pink';
    console.log(color); // pink
  }

  console.log(color); // blue 
}

myColor();
console.log(color); // Uncaught ReferenceError: color is not defined

→ if문의 block안에 color 변수를 선언

→ if문 안에서는 pink값 할당, if문 밖에서는 blue값 할당

⇒ 같은 이름의 변수를 사용하였으므로 scope namespace가 오염!

scope 오염을 공부하면서 전역변수가 편한것같아서 마구잡이로 사용하는 나를 되돌아보게 되었다.
변수 선언할 때 scope를 조금 더 신경써서 선언해야겠다.

profile
프론트엔드 개발자를 꿈꾸는 사람( •̀ ω •́ )✧

0개의 댓글