23. Scope

JavaScript에서 scope이란, '변수가 어디까지 쓰일 수 있는지'의 범위를 의미합니다.

1. Block

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

ex) function, if, for 문 의 중괄호로 감싸진 것들

이 block 내부에서 정의된 변수는 local 변수 라고 해서 함수 내부에서만 사용이 가능하다.

function getResult(){
    let result = 10;
    
    return result;
}

console.log(result)

ReferenceError: result is not defined

위를 보면 result 는 함수 getResult() 의 {} 안에서만 정의된 local 변수이기 때문에 함수 밖에서는 사용이 불가능하다.

cf)

for ( var i = 0 ; i < 5 ; i++){
  console.log(i);
}

console.log(i)

0
1
2
3
4
5 // 초반 부의 Notion 을 보면 var 보단 let 과 const 를 쓰라는 말이 있었다. 이렇게 for 의 local 변수선언 시 var 을 쓰면 밖에까지 나와버리기 때문이다.

2. Global(전역) Scope

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

const color = 'red';
console.log(color);


function returnColor() {
  console.log(color);
  return color;
}


console.log(returnColor());

이처럼 변수 선언을 특정 함수나 조건문 안에서 하는 것이 아닌 밖에서 하면 Global Scope

에서 선언할 수 있다.

3. Scope의 오염

편하긴 하되 , 남용하면 프로그램에 문제를 일으킨다.

namespace라는 것은 변수 이름을 사용할 수 있는 범위라는 뜻입니다. scope이라고도 하고 특히 변수이름을 얘기할 때는 namespace라고도 합니다.

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

이러한 global 변수가 일으키는 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);

'Night Sky: The Moon, Sirius, The Milky Way'
'Sirius'

보면 처음에 global 변수로 let stars = 'North Star' 를 해놨기 때문에, 변수 starts의 값을 'North Start' 로 알고 있을 수 있지만, 함수를 실행함으로써 값이 새로 할당이 되었고, 이를 scope가 오염이 되었다 라고 말한다.

4. 좋은 Scoping 습관

3에서의 상황이 자주 일어날 수 있기에 우리는 왼만하면 변수를 블록안에다가 선언하는 습관

을 들여야 한다. 이런 습관을 들였을시에 다음과 같은 장점들이 있다.

• 코드가 block으로 명확하게 구분되기 때문에 코드 가독성이 올라갑니다.
• 코드가 한줄한줄 쭉 나열된 것이 아니라 각각의 기능별로 block을 나누면 코드가 이해하기 쉬워집니다.
• 나중에 코드를 수정할 일이 있을 때, 코드를 오랜만에 보더라도 잘 나뉘어 있어서 유지보수가 쉬워집니다.
• 프로그램이 끝날때까지 변수가 살아있는 것이 아니라서(block이 끝나면 local 변수의 삶이 끝나서) 메모리 절약도 됩니다.

cf) switch

if 조건문의 비슷하다. 하지만 조건이 많은 경우 더 나은 가독성을 지닌 switch를 사용할 수 있다.

let c = prompt('1 or 2 or 3 을 입력하시오')
                 
switch(c){
    case '1':
    	c = '1 입니다';
        break;
    case '2':
    	c = '2 입니다';
    	break;
    case '3':
    	c = '3 입니다';
    	break;
    default:
        c = '아무 값도 넣지 않았습니다.'
}