Scope

scope란?

• '변수가 어디까지 쓰일 수 있는지'의 범위를 의미합니다.
• 어떤 변수는 여기저기서 쓸 수 있는 반면에(var 같은 경우), 어떤 변수는 특정 함수 내에서만 사용이 가능한 이러한 개념이 Scope 입니다.

Block

• block이란 중괄호({}, curly brace)로 감싸진 것을 block이라고 합니다.

• {}(block) 내부에서 변수가 정의되면 변수는 오로지 block 내부에서만 사용할 수 있습니다.(변수의 효력이 내부에서만 살아있다!)

• {}(block) 내부에서 정의된 변수는 local(지역)변수라고 합니다.

• 함수,for,if 문도 하나의 block 입니다.

  함수의 내부는 하나의 block입니다.

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

for문도 {} 있으니 하나의 block입니다.

        for(let i = 0; i < 10; i++) {
        	let j = 'one'; 
        //(block 내부에서 선언이 되었기에 local변수 입니다.)
        	console.log(j);
        }

        function life() {
        	let result = 10; //local
        	return result;
        }
        console.log(result)// result가 정의되지 않았다고 에러가 뜬다!

console.log(result)에서 getResult 내부에 접근이 불가능 하기 때문에 result라는 변수가 존재하는지 모릅니다. 

result라는 변수는 getResult 함수의 {}(block)에서만 사용할 수 있습니다. 

Global(전역) Scope

• Scope는 변수가 선언되고 사용할 수 있는 공간.
• scope 외부(block밖)에서는 특정 scope의 변수에 접근이 불가 합니다.
• block 밖인 global scope에서 만든 변수를 global variable(전역 변수)라고 합니다.
• 코드 어디에서든 접근이 가능해서 변수 값을 확인할 수 있습니다.

        const color = 'red'; //전역변수
        console.log(color); //red;
        
        function returnColor() {
        	console.log(color); //red
        	return color;
        }
        console.log(returnColor());

returnColor 함수 내에서, returnColor 함수 밖에 있는 color라는 변수를 return 해주었습니다.

color 라는 변수는 **global** 변수이기 때문에 returnColor 함수의 block에서도 **"접근이 가능"**해서 'red'를 반환한 것입니다.

Scope의 오염1

• global 변수를 쓰면 여기 저기서 접근하기 쉬워서 좋다고 생각할 수 있지만, 남용하게 되면 프로그램에 문제를 일으킬 수 있다.
• global 변수를 선언하면, 해당 프로그램 어디에서나 사용이 가능한 global namespace 를 갖습니다. namespace 란 변수 이름을 사용할 수 있는 범위라는 뜻입니다.(=== scope) 변수 이름 을 얘기할 때 namespace 라고도 합니다.
• global 변수는 프로그램이 종료 될 때까지 살아 있습니다. ←→ 반면 local 변수는 {} 내부 block 이 끝나면 살아있지 않고 쓸 수 가 없습니다.

        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 변수에 'sirius'로 값이 변경되어 block 밖에서 변수에 접근해도 내부의 값과 동일하게 나온다.

좋은 Scoping 습관

• global 변수가 여기저기서 수정되면 안되기 때문에 변수들을 최대한 block scope으로 최대한 나눠놔야 합니다.
• 타이트한 스코프의 변수는 코드 품질을 올려줍니다!
  • 코드가 block으로 명확하게 구분되기 때문에 가독성이 좋습니다.
  • 나중에 코드를 수정할 일이 생겼을 때, 코드를 오랜만에 보더라도 잘 나뉘어 있으면 수정이 쉽습니다.(유지보수)
  • 전역 변수는 프로그래밍이 끝나야지 변수의 생명이 끝나지만 {} 내부를 빠져 나오면서 변수의 생명이 끝나기에 메모리 절약이 됩니다.
  • 즉 , 한마디로 요약하면 global 변수는 쓰지 않도록 노력해야 하고, 최대한 {} 내에서 let, const을 사용하여 변수를 새로 만들어서 쓰자는 말입니다!