함수의 유효 범위 [JavaScript][클로저][apply/call]

함수 내부에서 선언된 변수

[광고 누르면 오늘의 행운 상승!!]

→ 함수 내부에서만 유효

function A(){
	var innerVar = 100;
	return innerVar;
}

function B(){
	return innerVar; // A 함수 내부의 선언된 변수를 사용했기 떄문에 에러
}

단 전역변수는 가능

 

어휘적 유효 범위

• 함수가 실행될 때 환경 유효 범위에 포함
  → 함수가 정의 될 당시의 환경도 유효 범위에 포함

function D(){
	return function(s){
		return "Hi " + s + "!";
	}
}

var temp = D();
var result = temp("James"); // 내부 함수 가리킴 (function(s))

document.write(result);

-출력
Hi James!

※내부 함수 변수 temp에 할당되어 D()를 벗어나서 실행

 

• 아래 코드도 실행 가능

function D(){
	var point = "!"; //변수 선언
	return function(s){
		return "Hi " + s + point; //사용 불가
	}
}

내부 함수 temp 할당 전
D의 내부에 정의되어 유효 범위 일부가 됨
-> point 변수는 부모 함수의 변수로 접근 가능 //클로저

 

클로저

function colsure(argA){
	return function(argb){
		return argA + argB;
	}
}

var temp = closure(100);

// argA = 100
// temp(50)은 150 반환

클로저가 중요한 이유 : 
closure이 실행되고 내부 함수 temp 반환 후 종료
-> 함수 종료 시 가비지 콜렉션에 의해 객체 제거

※ 종료된 함수 내부 변수 참조 ※

 

<<클로저의 다른 예 1>>

function wrapper(){
		var innerVar = 100;
		var innerFunc = function(n){
				return n + innerVar;
		}
		var result = innerFunc(50);
		document.write(result);
}
wrapper();

- 중첩 함수
- 외부함수 실행 시 내부 함수 정의 되어 실행
- 프로세스 완료 후 함수 종료
- 150 출력<<클로저의 다른 예 1>>

 

<<클로저의 다른 예 2>>

var globalVar;

function wrapper(){
		var innerVar = 100;
		globalVar = function(n){
				return n + innerVar;
		}
	
}
wrapper();
var result = globalVar(50);
document.write(result);

- 중첩 함수 150 출력
- wrapper 실행 시 내부함수 전역변수 globalVar 에 함수 할당
- 함수 정의된 상태의 유효 범위 존재
-> wrapper안의 지역 변수 계속 접근 가능

• 클로저 : 코드와 유효 범위 포함 JavaScript의 함수 = 클로저 함수가 클로저로 인식되는 경우 → 중첩 함수에서 내부 함수가 외부로 전달되고 실행 될 때 → 외부로 전달되고 실행 되는 함수
• 클로저의 예 : Ajax

메소드 apply, call

• 함수에 전달인자 적용하는 메소드 : apply, call

function add(x,y){
	return x + y;
}

var sum = add(2,3);
document.write(sum);

apply 메소드 

var sum = add.apply(null, [2,3]);
//전달인자를 적용하여 함수 실행

var sum = add.call(null, 2,3);
//전달인자를 나열하여 함수 실행
// 전달인자 한 개일 때 사용

 

• 두 개 이상의 미지수 있는 수식 : 미지수 하나씩 적용하며 결과 도출

function add(x,y){
	if(typeof y == "undefined"){
		return function(y) {return x + y;};
	}
	return x + y;
}

var xVar = 2;
var addCurring = add.call(null, xVar);
var yVar = 3;
var result = addCurring.call(null, yVar);
document.write(result)

하나의 전달인자 코드 내 가시화 ->
하나의 전달인자 add함수에 적용 ->
새로운 함수 반환 ->
두번째 전달인자 가시화 ->
새로운 함수에 적용->

※Curring※