JavaScript의 전역 및 로컬 변수

JavaScript의 변수는 데이터를 저장하고 처리하는 데 필수적입니다. 이러한 변수가 유효한 위치와 코드의 어느 영역에 액세스할 수 있는지 이해하는 것이 중요합니다. 전역 변수와 로컬 변수의 유형이 다르므로 "범위"(가시성 영역)를 이해하는 것은 기본입니다. 이제 글로벌 변수와 로컬 변수가 무엇인지 자세히 알아보겠습니다.

주요 결과

• 전역 변수는 코드의 모든 곳에서 액세스할 수 있는 반면, 로컬 변수는 해당 함수 내에서만 볼 수 있습니다.
• 함수 외부에 변수를 정의하면 전역 변수가 되고 함수 내부에 정의하면 로컬 변수가 됩니다.
• 명확하고 유지 관리하기 쉬운 코드 구조를 위해 스크립트 시작 부분에 전역 변수를 선언하는 것이 유리합니다.

단계별 지침

변수의 정의 및 가시성

첫 번째 단계에서는 변수를 만드는 방법과 변수의 가시성이 무엇을 의미하는지 살펴보겠습니다. 다음 예제와 같이 함수 외부에 변수를 선언하면 전역 변수가 됩니다.

여기서는 myVariable이라는 전역 변수를 만듭니다.

지역 변수로 함수 만들기

다음으로 두 개의 함수를 만듭니다. 지역 변수를 생성하는 localFunction 함수를 하나 호출합니다. 이 변수는 함수 내에서만 볼 수 있습니다. 함수를 정의해 봅시다.

localFunction에서 5라는 값을 가진 지역 변수 localV를 생성하고 출력합니다.

함수 호출하기

이제 localFunction을 호출하여 숫자 5를 출력하겠습니다. 코드에서 함수를 호출한 후 출력은 다음과 같이 표시됩니다:

지역 변수의 가시성 테스트

이제 다른 함수에서 지역 변수 localV를 사용해 보겠습니다. 이것이 작동하지 않는다는 것을 알 수 있습니다. 다른 함수를 호출하여 어떤 일이 발생하는지 살펴봅시다.

localV 변수가 localFunction 내에서만 표시되기 때문에 오류가 발생합니다.

콘솔에서 오류 확인

오류가 발생하는 이유를 더 잘 이해하기 위해 콘솔에서 코드를 살펴봅시다. 마우스 오른쪽 버튼을 클릭하고 '검사'를 선택하면 DOM 탐색기와 콘솔을 열어 오류를 분석할 수 있습니다.

여기서 localV가 정의되지 않은 것을 볼 수 있습니다. 이는 변수가 해당 함수 외부에 존재하지 않는다는 가정을 확인시켜 줍니다.

전역 변수 정의하기

이제 두 함수에서 모두 사용할 수 있는 전역 변수를 만들어 보겠습니다. 이 변수를 globaleVariable이라고 부르고 간단한 텍스트 값을 지정합니다.

이제 이 전역 변수는 두 함수에서 모두 호출할 수 있으며 출력은 동일합니다. 한 번 테스트해 봅시다.

변수 정의 및 호출 순서

변수와 함수 정의의 순서가 중요하다는 점에 유의해야 합니다. 전역 변수를 그 용도보다 아래에 만들면 정의되지 않은 문제가 발생합니다.

전역 변수를 필요로 하는 함수가 정의보다 먼저 전역 변수를 호출하기 때문입니다. 이를 방지하려면 코드 맨 위에 전역 변수를 정의하는 것이 좋습니다.

지역 변수와 그 사용에 대해 자세히 알아보기

이제 다른 함수에서 또 다른 지역 변수를 만듭니다. 여기서는 localVariable이라고 부르고 그 값을 12로 설정합니다.

이 지역 변수는 다른 함수가 아닌 자체 함수 내에서만 사용할 수 있습니다. 두 로컬 변수를 모두 사용하면 프로그램의 복잡성에 따라 프로그램의 인내심과 질서를 유지할 수 있습니다.

개념 요약

이제 JavaScript에서 변수의 가시성과 범위에 대한 기본 개념을 이해했습니다. 전역 변수는 모든 함수에 표시되는 반면, 지역 변수는 해당 함수 내에만 존재합니다. 가독성과 유지보수성을 높이려면 전역 변수를 코드의 중앙 위치에 정의하는 것이 좋습니다.

요약 - JavaScript에서 변수의 가시성

요약하자면, 변수를 정의하는 방식이 변수의 가시성과 범위에 직접적인 영향을 미친다는 것을 배웠습니다. 실수를 피하기 위해 변수를 어디에 배치하는지 항상 주의하세요.