Dev-dotoli TIL

JS 18 scope 1



함수지향


함수형 언어로서 JS의 면모를 배울예정
JS의 함수는 강력하고 핵심적인 요소임
함수에 대한 이해없이는 JS를 잘 다루기 어려움



scope (유효범위)


scope는 변수의 수명(범위)을 의미함

  • scope : 겨누는 곳 이라는 그리스 단어에서 파생됨
    telescope, microscope 등에서 쓰이며
    겨누는 곳 = 범위 를 의미하게 됨


var vscope = "global";
//함수 밖에서 할당된 변수 vscope을

function fscope() {
  alert(vscrope);
}
//함수 fscope은 함수 바깥에서 선언된 vscope이라는
//변수에 접근할 수 있음

fscope();
// : alert으로 global

함수 밖에서 변수를 선언하면 그 변수는 전역변수가 됨

  • 전역변수: 에플리케이션 전역에서 접근가능한 변수
    어떤 함수 안에서도 변수에 접근 할 수 있음
var vscope = "global";

function fscope() {
  var vscope = "local";
  alert(vscrope);
}
fscope();
// : alert으로 local
// 가까운 함수내에서 정의된 변수에 먼저 접근함
  • global variable(전역변수)
  • local variable(지역변수)

같은 이름의 전역변수와 지역변수가 동시에 정의된다면
자신에게서 가까운 지역변수가 우선함

var vscope = "global";

function fscope() {
  alert(vscope);
}
function fscope() {
  alert(vscope);
}
fscope();
// : alert으로 global
fscope2();
// : alert으로 global
var vscope = "global";

function fscope() {
  var vscope = "local";
  var lv = "local variables";
  alert(lv);
}

fscope();
// : alert으로 local variables
alert(lv);
// undefined
// loval variable인 lv에 접근할 수 없기때문


var vscope = "global";

function fscope() {
  var vscope = "local";
}

fscope();
alert(vscope);
// global
var vscope = "global";

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

fscope();
alert(vscope);
// local

// var로 지정해주지않아서 지역이 아니라
// 전역인 vscope을 재할당한 것
var vscope = "global";

function fscope() {
  var vscope = "local";
  vscope = "local";
}

fscope();
alert(vscope);
// : gobal

// 이미 지역변수를 local로 지정해 놓아서
// 아래 있는 변수할당이 지역변수를 가리킴


전역변수를 써야하는 명확한 이유가 없다면?
항상 지역변수를 쓰는 습관을 들여야함

협업, 유지/보수 과정에서
변수이름을 다양하게 사용하면서 충돌이 일어날 가능성이 매우 높음

local variable을 사용하면 이런 문제가 많이 해결됨



유효범위의 효용


function a() {
  var i = 0;
}
for (var i = 0; i < 5; i++) {
  a();
  document.write(i);
}
// : 01234
function a() {
  i = 0;
}
for (var i = 0; i < 5; i++) {
  a();
  document.write(i);
}
// : 무한로딩

// for문 안에 있는 i의 값이 전역변수로 선언됨
// 함수a를 호출하면 var이 없는 i가 호출되기때문에
// 호출될때마다 i가 0으로 초기화 됨
// 따라서 i는 for문으로 호출될때마다
// 계속 0이므로 i<5 조건을 만족하지 않으므로 무한로딩

이런식으로 변수명때문에 충돌하는 일이 잦았기때문에
과거에는 변수명 사용이 매우 조심스러웠고
현재는 global/local variable의 개념이 생김

객체지향이라는 관점도 이러한 문제에서 출발해
도달하게된 방법이라고 이해하면 좋음