JS 18 scope 2

06 Apr 2022

scope / 전역변수의 사용

불가피하게 전역변수를 사용해야 할 때

var MYAPP = {};

MYAPP.calculator = {
  left: null,
  right: null,
};
//

MYAPP.coordinate = {
  left: null,
  right: null,
};
//coordinate(좌표)

//calculator에서 (left+right)
//coordinate에서는 왼쪽과 오른쪽의 위치상 의미

MYAPP.calculator.left = 10;
MYAPP.calculator.right = 20;

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

document.write(sum());
// : 30

// 전역변수 MYAPP 하나에 함수로 값을 지정함

1번

(function () {
  var MYAPP = {};

  MYAPP.calculator = {
    left: null,
    right: null,
  };

  MYAPP.coordinate = {
    left: null,
    right: null,
  };

  MYAPP.calculator.left = 10;
  MYAPP.calculator.right = 20;

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

  document.write(sum());
})();
//이렇게 함수로 다 감싸버리면
//MYAPP은 함수안의 지역변수가 됨

2번

function myappfn() {
  var MYAPP = {};

  MYAPP.calculator = {
    left: null,
    right: null,
  };

  MYAPP.coordinate = {
    left: null,
    right: null,
  };

  MYAPP.calculator.left = 10;
  MYAPP.calculator.right = 20;

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

  document.write(sum());
}
myappfn();

// 이렇게 함수 명을 설정해서 호출할 수도 있음
// 하지만 이경우에는 myappfn이 전역변수가 되기때문에
// 단하나의 전역변수도 허용하지않으려면 1번 방법이 유효

이렇게 함수를 정의하고 바로 호출하는 방법을 익명함수 라고 함
이런 기법으로 전역변수가 전혀 존재하지 않는
애플리케이션을 구축할 수 있고
jquery등 많은 library에서 module화로 사용하는 방법

유효범위의 대상

JS에서

for (var i = 0; i < 1; i++) {
  var name = "coding everybody";
}
// JS에서는 for문 밖에서도 유효한 변수임

alert(name);
// JS에서는 함수의 중괄호 안에서 선언된 변수만이
// 함수의 지역변수가 되는 것

// for, if문 중괄호 안에서 선언된 변수는
// 지역변수가 아님

JAVA에서

for(int i = 0; i < 10; i++){
    String name = "egoing";
}
// string name 부분은
// JS에서 var name = 'egoing'; 과같음

System.out.println(name);
// console.log(name);

// : error

// for문 내에서의 지역변수 이기때문에
// 외부에서 호출하면 error가 남

정적 유효 범위

JS는 함수가 선언된 시점에서의 유효범위를 가지게 됨
이런 방식을
정적 유효범위(static scoping),
어휘적 유효범위(lexical scoping) 라고 함

var i = 5;
//전역변수 i

function a() {
  var i = 10;
  b();
}
// a라는 함수를 정의하는데
// i라는 지역변수를 가지고 있고 값은 10
// 함수a는 b라는 함수를 가지고있는데,

function b() {
  document.write(i);
}
//함수 b는 i를 출력하도록 정의되어있음

//여기서 i는 누구인가?

a();
// : 5

// a가 실행 - a안에있는 b를 확인 - b를 실행
// b는 함수내에 i가 있는지 검색 - 존재x
// 이때 함수b가 계산되는(선언되는) 시점에서
// 정의되어있는 변수는
// 전역함수 i 이므로 5가 검색됨

사용 될 때 X
정의 될 때 o

= 정적 유효범위 stactic scoping

코딩초기에는 큰 문제가 없을텐데,

프로그램의 몸집이 커지면 처음 겪고 이해할 수 없는

오류들이 나기 시작할텐데 높은 확률로

scope에 관련된 문제임

global / local variable의 개념을 잘 잡아두면

문제를 해결하는데 큰 도움이 될 것