자바스크립트 변수 의 유효범위
자바스크립트 변수 의 유효 범위 (scope)에 대해 정리해 보려고 합니다
변수의 유효 범위는
변수가 사용될 수 있는 범위를 나타내는 것으로
자바스크립트에서 유효 범위는
변수를 선언하고
선언한 위치에 따라 분류할 수 있는데요
여기서 선언의 위치는 보통 '{ }→ 중괄호'가 기준이 되며
-중괄호 외부에 선언되어, 애플리케이션 어디든 자유롭게 사용될 수 있는 특징을 가지고 있는 변수는 전역 변수
-중괄호 내부에 선언되어, 중괄호 내부라는 제한적인 범위 내에서만 사용하는 특징을 가지고 있는 변수는 지역변수라고 구분합니다
전역변수, 지역변수를 구분해서 사용하려는 이유?
선언 방식에 따라 변수 이름이 중복되면 오류가 발생할 수 있는데
전역 변수, 지역변수를 구분해서 사용하면
같은 이름을 가진 변수라도 상황에 따라 각각 다르게 사용될 수 있어서
여러 사람들과 같이 프로그램을 개발할 때
지역변수를 사용함으로써
중복되는 변수명의 이유로 오류가 발생하는 것을 방지할 수 있습니다
자바스크립트에서 변수의 유효 범위가 적용되는 경우는 ①함수(function) ②조건문(if문)과 ③반복문(for문) 3곳에서 자주 출몰하는데요
각각 특징이 있습니다
1. 함수(function)
1-1 전역 변수와 지역변수 위치에 각각 var로 선언한 변수인 경우
지역변수에 존재하는 var a=10;의 경우
지역변수가 존재하는 '함수 name()'을 호출했을 때만 실행되는 것을 볼 수 있습니다
1-2 전역 변수에서만 var로 선언된 경우 (지역변수 위치에서는 var을 안 붙였을 때)
처음에는 전역 변수, 지역변수가 각자 따로 활동하는 거 같더니
'함수 name1()'가 호출되고 나서 전역 변수를 호출했을 때는
'지역변수에 존재하는 b=20'으로 완전히 바뀌어 버린 것을 확인할 수 있습니다
1-3 전역 변수와 지역변수의 위치에 각각 let으로 선언한 경우
같은 변수명을 가졌는데도
함수를 호출했을 때만 함수 코드 내에서 let으로 활동하는 것을 볼 수 있습니다
1-4 전역 변수에서만 let으로 선언한 경우 (지역변수의 위치에서는 let 이 안 붙은 경우)
'함수 name1()'가 호출되자마자
전역 변수를 호출했을 때
전역 변수의 값(let d=4)이 지역변수의 값(d=40)으로 완전히 바뀌어 버리는 것을 확인할 수 있습니다
2. if문(조건문)
2-1 if문 중괄호 내부에서 선언한 변수 방법이 var인 경우
if문 중괄호 내부에서 선언된 변수인데도 불구하고
밖에서도 잘 불려지는것을 보아
if문에서 var로 선언한 경우에는 지역변수 의미를 가지고 있지 않는 것을 확인할 수 있습니다
때문에 아래 그림에서 볼 수 있듯이 각자 위치에서 var로 선언했지만
재선언이 가능한 var의 특성상
처음에 있던 'var a=1'을 if문 내부에서 선언한' var=10'으로 완전히 변경됩니다
2-2 if문 중괄호 내부에서 선언한 변수가 let인 경우
if문 중괄호 내부에서 let으로 선언하게 될 경우 중괄호 내부에서 시작하고 끝남을 확인할 수 있습니다
때문에 아래 그림에서 볼 수 있듯이
'if문 외부에서 선언한 let a=1'와
'if문 중괄호 내부에서 선언한 let a=10'은
각각 따로 사용되는 것을 확인할 수 있겠습니다
3. for문(반복문)
3-1 for문 내부에서 var로 선언한 경우
for문에서 var로 선언했을 경우에는 전역 변수로 사용됩니다
3-2 for문 내부에서 let으로 선언한 경우
for문에서 let으로 선언한 경우에는
for문의 지역변수로 사용되어
for문이라는 제한적인 공간에서만 실행되고 버려집니다
※ 요약
