[JavaScript]자바스크립트 함수 스코프

 

스코프

컨테이너 구실을 하는 일련의 '버블'

스코프 안에 확인자(변수 & 함수) 선언

 

💻 함수 기반 스코프

 

함수 기반 스코프란,

함수를 기준으로 스코프가 생성됨

function foo(a){
   var b = 2;
   function bar() {
       var c = 3;
  }
}

 

foo함수 & bar 함수 & 글로벌 스코프 는 자체 스코프 버블 존재

• foo 함수 스코프 버블 👉 a, b, c, bar() 포함
• bar 함수 스코프 버블 👉 c 포함
• 글로벌 스코프 버블 👉 foo() 포함

❗ 스코프 버블 내의 확인자는 외부에서 접근 불가

bar();//ReferenceError
console.log(a,b,c); //ReferenceError

 

함수 스코프

• 모든 변수가 함수에 속함
• 함수 전체에 걸쳐 사용 및 재사용

👉 다른 타입의 값을 필요에 따라 사용 (자바스크립트 변수의 동적 특성)

---

💻 일반 스코프에 숨기기

 

함수의 스코프를 이용하면,

변수와 함수를 숨길 수 있음.

 

+최소 권한의 원칙 : 필요한 것만 최소한으로 남기고 숨긴다.

 

❗ 필요없이 함수와 변수를 공개하면, 불필요 & 위험

function doSomething(a) {
   b = a + doSomethingElse(a*2);
   console.log(b * 3);
}
function doSomethingElse(a) {
   return a - 1;
}
var b;
doSomething(2); // 15

의도하지 않은 방식으로 사용될 수 있으며, 실행에 전제되는 가정들이 훼손가능

 

👇

function doSomething(a) {
  function doSomethingElse(a) {
    return a - 1;
  }
  var b;
  b = a + doSomethingElse(a*2);
  console.log(b * 3);
}
doSomething(2); // 153.2.1 충돌회피

doSomething만이 내부 변수와 함수를 통제

 

💡 충돌 회피

 

스코프를 이용한 확인자 숨김 👉 동명의 다른 용도를 가진 확인자의 충돌 회피

function foo(){
   function bar(a) {
       i = 3; // var i = 3;으로 충돌 회피
       console.log(a + i);
  }
   for (var i = 0; i < 10; i++) {
       bar(i * 2);
  }
}
foo();

foo의 i변수와 bar의 i 변수 충돌

👉 bar의 i : var i =3;으로 변경

(👉 변수 명 변경)

 

+라이브러리를 불러와 사용할 경우, 글로벌 스코프에서 충돌이 일어나기 쉽다.

👉 글로벌 스코프에 하나의 고유 이름을 가지는 객체 선언문 생성, 확인자가 아닌 속성형태로 사용

👉 모듈을 이용하여 관리

---

💻 스코프 역할을 하는 함수

 

일반적인 코드로 함수를 선언하여 호출하는 방식

: 이름을 통해서 함수를 선언하고 호출해야하여, 둘러싼 스코프를 오염

 

함수 표현식으로 사용

var a = 2; 
(function test() { 
	var a = 3; 
})(); 
console.log(a); // 2

함수를 둘러싼 스코프에 묶이는 대신 자신의 내부 스코프에 묶임.

👉 둘러싼 스코프 오염 해결

 

💡 익명 vs 기명

 

익명 함수 표현식

setTimeout( function() { // 익명 함수 
	console.log("I waited 1 second"); 
}, 1000); // I waited 1 second

익명 함수 표현식의 단점

• 익명 함수는 디버깅이 어려움
• 재귀 호출 및 자기 참조 시, 폐기예정인 arguments.callee의 참조가 필요 
• 코드 이해력 어려움. 

👉 이름 사용하는 것(기명 함수)을 권장

 

💡 함수 표현식 즉시 호출

 

즉시 호출 함수 표현식 (IIFE)

var a = 2; 
(function test() { 
  var a = 3; 
  console.log(a); // 3 
})(); 

console.log(a); // 2 

(function test(global) { 
  var a = 3; 
  console.log(a); // 3 
  console.log(global.a); // 2 
})(window); 

console.log(a); // 2 

(function test(undefined) { 
  var a; 
  if (a === undefined) { 
  console.log("oh, NO!!"); // oh, NO!! 
  } 
})();

함수 표현식과 호출을 동시에 가능