무엇 인가를 배우는 과정이 그 열정에 비해 더욱더 어렵다면 무너지기 마련이다. 그럴 땐 무너지기 보다는 그 배움에 대한 열정을 늘리는 것 또한 방법이지 않을까? 요즘은 이 생각으로 하루를 버티며 나아간다.
많은 선배 개발자들에게 깊은 존경을 표하며 글을 시작하려 한다.
그리고 또한 같은 상황의 이제 막 개발을 시작한 우리 새싹 개발자들에게도 응원을 보내며 다같이 얼굴이 반쪽이 되더라도 포기하지 않길 바라며 시작해 보겠다.
scope란?
Scope를 우리말로 번역하면 ‘범위’라는 뜻을 가지고 있다. 스코프(Scope)란 ‘변수에 접근할 수 있는 범위’라고 생각하면 이해가 쉽다.
JS에선 스코프는 2가지 타입이 있. 바로 global(전역)과 local(지역)로 나눠 진다. .
전역 스코프(Global Scope)는 말 그대로 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미이고 지역 스코프(Local Scope)는 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다는 의미이다.
자바스크립트에서 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하게 되는데, 함수 몸체에 선언한 변수는 해당 함수 내부 안에서만 접근할 수 있는데, 이걸 함수 스코프(function-scoped)라고 한다. 함수 스코프가 바로 지역 스코프의 대표적인 예라고 할 수 있다.
스코프의 종류-local(지역)
위의 예제에서 print함수를 호출하면 console엔 1이 출력 될까? 2가 출력 될까?
print 함수는 2가 출력되고, a는 1이 출력 되는 것을 알 수 있다.
우선 print 함수가 자신의 scope 안에 변수 a가 있는지 찾아본 후 let a= 2; 찾아내 출력하면 그의 기능은 끝이난다.
스코프의 종류-global(전역)
위의 내용 대로라면 함수 내부에서 a를 선언하지 않으면 a는 선언되지 않았다는 에러가 출력 될까?
직접 콘솔창에서 확인해 보자!
결과는 예상과는 다르게 전역 스코프에 선언되어있는 a의 값인 1이 출력되는 것을 확인할 수 있다! 이는 Scope Chain에 의해 일어난 현상인데, 현재 자신의 scope에서 사용하고자 하는 변수가 없다면 Scope Chain을 통해 해당 변수를 찾게되는 것 이다!
Scope Chain이 무엇인지 감이 안 잡힌다면 쉽게 설명해둔 글을 첨부해 이해를 하고 넘어가도록 하자!
출처-https://developer-alle.tistory.com/369
우리는 이로써 전역 scope와 지역scope에 대해 이해할 수 있게 되었다!
하지만 이제 시작이라면 당신은 믿을 수 있겠는가?
전역변수와 지역변수.
앞서 말했던 scope의 개념에서 크게 벗어나지 않는다. 오히려 scope는 변수의 수명을 이해하기 위해 필연적인 존재라 할 수 있다. 앞서 말했던 scope의 범위 개념을 변수에 적용하기만 하면 된다. 전혀 어렵지 않지만. 매우 중요하다. 물론 좋은 코드는 변수의 유효 범위를 직관적이고 명시적으로 작성하지만 우리는 좋지 않은 코드도 드물지 않게 접하게 됨으로 코드 내에 서의 변수 범위를 판별 한다는 것은 코드를 읽는 능률을 올림과 매우 밀접한 관계를 갖고 있다. 함께 변수의 범위에 대해 알아보도록 하자!!
전역 변수란?
위의 함수를 콘솔창에 찍어보자!
함수 밖에서 혹은 최상단에 변수를 선언하면 그 변수는 전역변수가 됩니다.
즉,어떤 함수 안에서도 그 변수에 접근 할 수 있는 것이다!
때문에 함수 fscope 내에서 vscope를 호출 했을 때 함수 밖에서 선언된 vscope의 값 global이 반환된 것을 볼수 있다!
이로써 전역변수 = 모든 함수가 접근 가능한 변수. 라고 정리할 수 있다!
지역 변수란?
위의 함수를 콘솔창에 찍어보자!!!
위의 예시에서 변수 vscope을 조회(4행) 했을 때는 함수 내에서 선언한 지역변수 vscope(3행)의 값인 local이 사용되었다.하지만 함수 밖에서 vscope를 호출(7행) 했을 때는전역변수 vscope(1행)의 값인 global이 사용된 것을 알 수 있다! 지역변수의 유효 범위는 함수 안이고,전역변수의 유효 범위는 App 전역인데, 같은 이름의 지역변수와 전역변수가 동시에 있다면 지역변수가 우선시 된다는 것을 알 수 있다!
그렇다면 이 예시의 함수는 어떤 결과가 출력 될까?
이러한 출력이 나오는 이유는 var를 사용하지 않은 지역변수는 전역변수가 되기 때문이다.따라서 3행은 전역변수의 값을 local로 변경하게 된 것이다. var을 쓰는 것과 쓰지 않는 것의 차이는 선언자에 대한 고찰 편에서 다루어 뒀으니 같이 대조해보며 이해하면 좋을 것 같다! :)
이로써 scope가 변수의 수명을 결정하게 되는 중요한 개념이라는 것을 우리 모두 알게 되었다!
변수의 유효 범위와 스코프의 유효 범위를 숙지하고 있다는 것 만으로도 코드의 독해력이 기하급수적으로 증가 할 수 있다는 걸 우리 모두 상기 시키며! 좋은 코드를 써내려 감 뿐 아니라 나쁜 코드도 잘 읽어 내는 멋진 개발자가 되기를 소망하며 블로그를 마치겠다!
