[JavaScript] Scope의 정의와 만들어진 이유

coderH·2022년 2월 6일
1

JavaScript 연대기

목록 보기
3/11
post-thumbnail

오늘은 대부분의 프로그래밍 언어에 존재하는 scope에 대해서 JS를 기준으로 다뤄보려고 합니다.

scope란?

먼저 scope는 해석 그대로 범위를 뜻하며 프로그래밍에서는 변수나 함수가 사용되는 범위를 이야기합니다.

대부분의 프로그래밍 언어에는 전역범위(Global Scope)와 지역범위(Local Scope)가 있습니다.

자바스크립트도 마찬가지로 전역범위와 지역범위 2가지로 나눠지며 전역범위를 가진 변수를 전역변수,
지역범위를 가진 변수를 지역변수라고 합니다.

이 두 범위의 차이점을 변수를 기준으로 설명하고 왜 이렇게 나누어 놓았는지에 대해서 알아보겠습니다.

전역범위와 지역범위의 차이점

전역변수는 스크립트 내에서 모두 사용이 가능하고 지역변수는 특정지역내에서만 사용할 수 있으며 해당지역의 외부(해당지역의 바깥쪽)에서는 사용할 수 없습니다.

아래의 사진과 같이 실제로 우리가 코드를 작성하는 부분 전체가 스크립트입니다.

그래서 전역변수로 선언하면 이 스크립트 내부 어디서든 사용을 할 수 있습니다.

반면 지역변수는 정해진 범위의 안쪽에서만 사용 할 수 있고 해당 범위를 벗어나게 되면 변수 자체가 없어지므로 외부에서는 사용할수도 접근할 수도 없습니다.

아래에 노란색 박스가 있는 부분이 지역범위이며 노란색 박스의 바깥쪽 부분은 지역을 벗어나므로
지역변수로 선언된 local이라는 변수는 6번 라인에서는 정상적으로 동작하지만
12번 라인에서는 전역변수인 global변수와는 다르게 정의되지 않은 변수라며
에러가 발생하는 것을 볼 수 있습니다.

또한 지역범위는 각각의 독립된 지역을 가지기 때문에 같은 선상에 있다고해서 지역을 공유하지 않습니다.

아래 사진을 예로들어보면 local변수는 testA함수(주황색 박스)에서 선언되었습니다.
testA와 testB함수는 같은 깊이의 지역범위를 가지고있지만 서로 다른 함수이기 때문에 각각의 지역범위를 가지고 있습니다.
그래서 testA에서 선언된 local변수는 testB함수에서는 없는 변수로 판단됩니다.

만약 testB에서도 사용하고 싶다면 해당 변수를 보다 상위의 변수로 만들거나
testB함수를 testA함수 안에 중첩되도록 만들어주어야 합니다.

위 코드를 보시면 testA함수가 testB함수를 감싸는 형태가 되죠?
이러한 형태에서 testA함수는 부모, testB함수는 자식이 됩니다.
자식은 부모의 범위를 사용할 수 있지만 반대로 부모는 자식의 범위를 사용할 수 없습니다.

그래서 위의 사진을 예로 들어보면 자식인 testB함수는 부모의 지역변수인 localA에 접근이 가능하지만
반대로 testA함수에서는 testB함수에서 만들어진 지역변수 localB에 접근하지 못합니다.

scope가 나눠진 이유

그렇다면 왜 번거롭게 전역범위와 지역범위로 나눠놓았을까요?

바로 메모리때문입니다.

위에서 전역변수는 스크립트내 어디서든 사용이 가능하다고 말씀드렸죠?

그 말은 전역변수는 언제든지 사용될 수 있도록 스크립트가 실행되는 동안 계속 메모리에 상주하고 있어야 합니다.

하지만 지역변수로 선언하게 되면 해당 지역이 실행되는 동안만 메모리를 차지하고

이후 해당 지역이 끝나면 메모리에서 없어지기 때문에 외부에서 사용하지 못 하는 것입니다.

이렇게 변수가 생성되고 사라지는 것을 생애주기(Life Cycle)라고 하며
불필요한 메모리 사용량을 줄여 성능을 높이기 위해 scope가 존재합니다.

만약 모든 변수를 전역변수로 선언하게 되버리면

제가 올려드린 예시 코드는 10줄 전후에 매우 작은 코드이지만

이 코드가 몇백줄 몇천줄로 늘어나게 되면 실행되는 내내 선언된 변수가 메모리를 차지하고 있기 때문에 전역변수가 필요하지 않은데도 컴퓨터의 메모리를 계속 차지하고 있을겁니다.

또한 같은 범위안에서 변수가 많이 선언되므로 변수명이 겹치지 않도록 하다보면 변수명은 끊임없이 길어질 것이고 결국은 가독성이 떨어져 이 변수가 어디에 쓰이는 변수인지 파악하기 힘들게 됩니다.

그러면 실수로 변수의 값을 변경하거나 변수를 재선언하려는 상황도 생기겠죠?

따라서 변수를 선언할 때는 가능한 지역변수로 선언해 변수의 생애주기를 짧게 해 메모리의 부담을 줄여야하고 불가피한 경우에만 전역변수로 선언해주는것이 좋습니다.

다음에는 지역범위가 결정되는 2가지 종류(Function Scope와 Block Scope)에 대해서 다뤄보겠습니다.

0개의 댓글