변수의 유효범위 개념

https://ithub.tistory.com/209

기본적으로 알아야할 javascript 개념

** 제 글은 이 블로그의 포스팅을 보며 저 혼자만의 재정리 시간을 갖기 위해 작성한 글입니다.

 

---

변수의 유효범위

1. function에서 중괄호 안에 변수를 선언할 때는 지역변수로 설정됨.

2. if 또는 for 안에 변수를 선언할 때는 전역변수로 설정됨.

 

 

전역변수를 잘 사용하는 방법

- 전역변수를 사용함으로써 변수이름이 충돌하는 상황이 발생할 수 있다.

하나의 객체에 묶어서 전역변수 최소화

    var myApp = {};
    myApp.calculator = { left: null, right: null };
    myApp.coordinate = { left: null, right: null };

익명함수 사용하여 지역변수로 만들어 사용

(function() {
    var myApp = {};
    myApp.calculator = { left: null, right: null };
    myApp.coordinate = { left: null, right: null };
})();

 

 

정적 유효범위

- 정의되는 시점의 전역변수 값을 바로보는 것은 정적유효범위

- 사용되는 대상에 따라서 가지고 있는 변수에 맞게 값이 달라지는 것은 동적유효범위

정적 유효범위 예제

var i = 5;
function a() {
    var i = 10;
    b();
}
function b() {
    console.log(i);
}
a(); // 5 

 

 

내장 메소드

- 객체가 기본적으로 가지고 있는 메소드

- Array객체는 sort()를 내장메소드로 가지고 있음

function sortFunction() {
  return a-b; //오름차순 정렬 (내림차순은 b-a)
}
var numbers = [1, 3, 20, 13, 34];
console.log(number.sort(sortFunction));

 

 

클로저

- 외부함수가 종료된 이후에도 내부함수를 통해서 지역변수에 접근 가능한 기술

var temp = "global hello";

function outer() {
    var temp = "outer hello";

    function inner() {
        console.log(temp);  
    }
    return inner;
}

var k = outer();
k(); // outer hello

동일한 context 참조 (클로저 사용 전)

var arr = [];
for (var i = 0; i < 5; i ++) {
  // 여기서는 i=0,1,2,3,4
  arr[i] = function() {
    // 위의 for문이 모두 돌고나서 콜백함수 실행되어 i값은 계속 5 이다.  
    return i;
  }
}

for(var index in arr) {
  console.log(arr[index]()); // 5 5 5 5 5 
}

각기 다른 context (클로저 사용)

var arr = [];
for (var i = 0; i < 5; i++) {
  arr[i] = (function(id) {
    return function() {
      return id;  
    }
  })(i);
}

for ( var index in arr) {
  console.log(arr[index]()); // 0 1 2 3 4 
}

for문 안에서 var 대신 let을 사용하면 클로저를 사용하지 않아도 됨.
let은 기본적으로 블록스코프 변수(지역변수)이기 때문.

var arr = [];
for (let i = 0; i < 5; i ++) {
  arr[i] = function() {
    return i;
  }
}

for(var index in arr) {
  console.log(arr[index]()); // 0 1 2 3 4
}