javascript - 유효범위

지역 변수 / 전역 변수

유효범위(Scope)는 변수의 수명을 의미한다.

let vscope = "global"

function fscope(){
  console.log(vscope)
}

fscope() // global

여기서 포인트는 fscope() 함수가 함수 밖 변수에 접근할 수 있다는 것

let vscope = "global"

function fscope(){
  let vscope = "local"
  console.log(vscope)
}

fscope() // local

함수 안에 vscope를 선언하면 그 값을 가진다. global의 경우 전역변수, local은 지역변수

let vscope = "global"

function fscope(){
  vscope = "local"
  
}

fscope()
console.log(vscope) // local

vscope에 재할당이 가능하게 let으로 선언하고 함수 안 vscope에 const를 없애고 console.log를 함수 밖으로 빼서 실행하면 local이 나온다. 이유는 함수 밖 console이 호출하는 건 전역에 있는 vscope인데 fscope()에서 재할당 되어서 local로 값이 바뀐 것이다. (공부 더 필요)

let vscope = "global"

function fscope(){
  let vscope = "local"
  vscope = "local"
  
}

fscope()
console.log(vscope) // global

함수에 let으로 선언한 vscope를 넣으면 global로 바뀐다. 지역 변수가 선언되지 않은 변수는 우선적으로 local 변수가 있는지 확인한다. 만약 local 변수가 없으면 전역 변수를 사용한다.

유효범위 효용

function a(){
  i = 0;
}

for(let i =0; i<5; i++){
  a()
  console.log(i) // 무한 반복
}

for 문 안에 i는 전역 변수고 함수 a안에 i는 전역 변수를 가리킨다. for문이 실행될 때마다 i 값이 0으로 초기화 되어서 무한 반복이 된다.

전역 변수 사용하기

let OBJECT = {}

OBJECT.calculator = {
    'left' : null,
    'right' : null
}
OBJECT.coordinate = {
    'left' : null,
    'right' : null
}
 
OBJECT.calculator.left = 10;
OBJECT.calculator.right = 20;


function sum(){
    return OBJECT.calculator.left + OBJECT.calculator.right;
}

console.log(sum()) // 30

전역 변수 OBJECT를 하나 생성하고 여러 프로퍼티를 사용해서 결과값을 다르게 할 수 있다. 익명 함수(즉시 실행 함수)로 전역 변수가 없는 함수를 만들 수 있다.

정적 유효범위

자바스크립트는 함수가 선언된 시점에서 유효범위를 갖는다. 이러한 유효 범위의 방식을 정적 유효범위 혹은 lexical scoping 이라고 한다.

let i = 5;
function a(){
  let i = 10;
  b()
}

function b(){
  console.log(i) // 5
}

a()

함수 a 를 호출하면 지역 변수 a의 값은 10이 된다. 그리고 함수 b를 호출하면 함수 b 내부에 변수 i가 있는지 찾는다. 지역 변수가 없다면 전역 변수를 찾는다. 함수 b가 호출 됐을 때 i를 찾는지 아니면 정의되었을 때 i를 찾는지가 여기서 포인튼데 정적 유효범위에 따라 정의되었을 때 전역 변수를 가져온다.

함수 b는 어디서 사용될지 모른다. 사용될 때의 함수 안의 변수에 접근하면 동적인 유효 범위다.

참고 : 생활코딩