함수가 종료되면서 호출되는 개념이라 클로저라고 붙였을 거라 추측.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
/* function returnFunc(name){
var msg = "반갑습니다." + name + "님!!!";
return msg;
}
// 아래와 같이 쓰려면, 변수의 지역성이 문제가 된다. 함수가 끝나면 msg 변수는 사라진다.
alert(msg);
// 어떻게 하면 alert(msg)를 사용할 수 있을까?
// 방법(1) return 값으로 msg를 보낸다. 그리고 alert 함수에 담는다.
var msg = returnFunc('홍길동');
alert(msg);
*/
// 방법(2) 클로저(return에 위치한 함수) 활용
function returnFunc(name){
var msg = "반갑습니다." + name + "님!!!";
return function(){
alert(msg);
};
}
/* returnFunc('최길동');
alert(msg) // 오류 발생 */
// 아래의 형태에 익숙해지자. 함수를 리턴값으로 받으면 지역변수가 계속 살게된다. 생각과는 다르다.
var f = returnFunc('조길동');
f();
f();
// 더 많이 쓰이는 형태라고 한다. 그런데 이렇게 1회성으로 사용할거면 왜 이런 형태를 쓰는가?
// 매개변수의 값을 좀 더 유연하게 활용할 수 있기 때문이다. wow!
// 바로 위의 f(); 형태는 name이 '조길동'인 msg만 활용할 수 있다.
returnFunc('홍길동')();
returnFunc('박길동')();
returnFunc('임길동')();
</script>
</head>
<body>
</body>
</html>
<구글링>
클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다. 이를 조금 더 간단히 말하면 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다라고 말할 수 있겠다.
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] 숫자 변환함수 비교 및 활용 예제(Number, parseInt, parseFloat) (0) | 2020.06.17 |
|---|---|
| [JS] 자바스크립트 내장함수 (타이머함수, 코드실행함수, 숫자변환함수) (0) | 2020.06.17 |
| [JS] 논리 연산자의 우선순위 및 적용 예제 (0) | 2020.06.17 |
| [JS] 일치연산자 종류(==, ===, !=, !==) 및 문자열 비교 방법 (0) | 2020.06.17 |
| [JS] 매개변수의 값이 입력되지 않았을 때(undefined) 처리 방법 4가지 (0) | 2020.06.16 |
