달력

12

« 2019/12 »

  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  

함수를 반환하는 함수와 클로저

   

함수값을 리턴하는 함수

일반 값처럼 함수 값을 리턴할 수 있습니다.

   

함수를 리턴하는 함수 기능

  • 함수를 호출함과 동시에 다른 함수로 바꾸기
  • 자기 자신을 재정의하는 함수 구현

   

   

익명함수를 반환하는 함수

   

function outerFunction() {

return function () {

alert('Hello World .. !');

};

}

outerFunction()();

   

   

클로저의 사용

함수 안에 있는 변수는 지역 변수이므로 외부에서 사용할 수 없습니다.

클로저를 사용하면 이 규칙을 위반하여 지역변수를 사용할 수 있도록 할 수 있습니다.

   

익명함수를 반환하는 함수에 지역변수가 있으면 익명함수는 클로저 함수로서 지역변수를 가져다 쓸 수 있습니다.

   

클로저란

- 지역 변수를 남겨두는 현상

- 함수 outerFunction()로 인해 생성된 공간

- 함수 outerFunction() 내부의 변수들이 살아있음

- 리턴되는 함수 자체

- 살아남은 지역 변수

   

function outerFunction(name) {

var output = 'Hello ' + name + '.. !';

return function () {

alert(output);

};

}

outerFunction('play')();

  

   

지역변수 규칙에 위배

f()종료 하여 결과값이 반환되었는데 f()에 있는 지역 변수 var n가 호출됨

클로저 현상(내부 함수 사용시 지역변수를 남겨두는 것

지역변수는 함수가 실행될 때 생성되고 함수가 종료될 때 사라지는데

내부함수를 만들고 내부함수를 감싸고 있는 함수의 지역변수를 내부함수에서 호출할 때 내부함수를 감싸고 있는 외부 함수가 종료되었지만 내부함수에서 지역변수를 호출할 수 있도록 지역변수를 남겨두는 현상)

   

   

학습 내용

  • 내부 함수 정보 출력
  • 내부 함수 실행 (호출후 반환값을 변수에 저장후 호출)
  • 내부 함수 실행 (호출함수 실행한 후 바로 호출)

   

   

소스 코드

<html>

<head>

<meta charset="UTF-8">

<title>내부함수와 지역변수</title>

<script type="text/javascript">

function f(){

//지역 변수

var n = 100;

function g(){

document.write('n=' + n + '<br>');

document.write('g() is called');

}

//선언적 함수 반환 (내부 함수 정보 반환)

return g;

}        

//f() 실행시켜 내부함수를 반환받음

var result = f();

//내부 함수 정보 출력

document.write('내부 함수 정보 출력 ==========<br>');

document.write(result + '<br>');

   

document.write('<br>내부 함수 실행 (호출함수 반환값을 변수에 저장 호출)==========<br>');

/* 클로저: 내부 함수 사용시 지역변수를 남겨두는

지역변수는 함수가 실행될 생성되고 함수가 종료될 사라지는데

내부함수를 만들고 내부함수를 감싸고 있는 함수의 지역변수를 내부함수에서 호출할

내부함수를 감싸고 있는 외부 함수가 종료되었지만

내부함수에서 지역변수를 호출할 있도록 지역변수를 남겨두는 현상 */                

//내부 함수 실행

result();

   

document.write('<br>');

document.write('<br>내부 함수 실행 (호출함수 실행한 바로 내부 함수 실행) ==========<br>');

//f()실행한 바로 g()함수(내부 함수)호출

//변수에 저장하지 않고 내부 함수 바로 출력

//f()실행한후 반환되는 내부함수 호출

f()();

</script>

</head>

<body>

</body>

</html>

   

출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/10.html>

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

내부 함수에서 지역 변수 접근

   

   

소스 코드

<html>

<head>

<meta charset="UTF-8">

<title>내부 함수</title>

<script type="text/javascript">

function f(){

var n = 123;

//내부 함수

function g(){

document.write('n = ' + n + '<br>');

document.write('g() is called');

}

//내부 함수 호출

g();

}

//함수 호출

f();

</script>

</head>

<body>

</body>

</html>

   

출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/08.html>

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

지역변수 vs 전역변수

지역변수

함수 안에서 var를 사용해서 선언한 변수

함수가 끝나면 소멸

함수 안에서 var를 명시한 변수는 지역변수이기 때문에 함수 종료 후 메모리에서 소멸됨

함수 종료 후에 다시 지역변수 호출하면 오류 발생

전역변수

함수 밖에서 만들어진 모든 변수

(중요)함수 안에서 var 없이 만들어진 변수var를 명시하지 않고 전역변수 선언하는 것은 권장하지 않음

함수가 끝나도 메모리에 남아 있음

   

   

학습 내용

  • 함수 안에서 var로 명시한 지역 변수 호출
  • 함수 밖에서 var로 명시한 지역 변수 호출
  • 전역 변수 호출
  • 전역 변수 재 호출
  • 함수 안에서 var 없이 변수 선언(전역 변수)
  • var없이 전역 변수 명시 1, 2, 3

   

   

함수 밖에서 var로 명시한 지역변수 호출

소스 코드

function test1(){

//지역 변수

var i = 10;        

document.write(i + '<br>');

}

//함수 호출

test1();

document.write('<br>함수 종료 : ' + i + '<br>');        //에러 발생

   

출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/03.html>

   

함수 안에서 var를 명시한 변수는 지역변수이기 때문에 함수 종료 후 메모리에서 소멸되어 함수 종료 후에 다시 지역변수 호출하면 오류 발생

   

   

   

var 없이 전역 변수 선언

소스 코드

p;

function test6(){

p = 50;

document.write(p + '<br>');                

}

test6();

   

출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/03.html>

   

var를 명시하지 않고 전역변수를 만들 때 선언만 하고 초기화 하지 않은 상태에서 함수 안에서 초기화해서 호출하면 오류 발생함

   

   

전체 소스

<html>

<head>

<meta charset="UTF-8">

<title>지역변수 vs 전역변수</title>

<script type="text/javascript">

document.write('지역 변수 호출 ==================<br>');

function test1(){

//지역 변수

var i = 10;        

//지역 변수 호출

document.write(i + '<br>');

}

//함수 호출

test1();

//함수 밖에서 지역 변수 호출

//document.write('<br>함수 종료 : ' + i + '<br>');        //에러 발생

/* 함수 안에서 var 명시한 변수는 지역변수이기 때문에 함수 종료 메모리에서 소멸됨

함수 종료 후에 다시 지역변수 호출하면 오류 발생 */

   

document.write('<br> 전역 변수 호출 ==================<br>');

var j;        //전역 변수

function test2(){

j = 300;

document.write(j + '<br>');

}

test2();

   

document.write('<br> 전역 변수 호출 ==================<br>');

function test3(){

document.write(j + '<br>');

}

test3();

   

document.write('<br> 함수안에서 var 없이 변수 선언(전역 변수) ==================<br>');

function test4(){

//전역 변수, 권장하지 않음

m = 30;

document.write('함수 안에서 호출: ' + m + '<br>');

}

test4();

document.write('함수 종료 호출: ' + m + '<br>');

   

document.write('<br> var없이 전역 변수 명시1 ==================<br>');

n = 40;

function test5(){

document.write(n + '<br>');                

}

test5();

   

document.write('<br> var없이 전역 변수 명시2 ==================<br>');

//var 명시하지 않고 전역변수를 만들 선언만 하고 초기화 하지 않은 상태에서 함수 안에서 초기화해서 호출하면 오류 발생함

//p;

function test6(){

p = 50;

document.write(p + '<br>');                

}

test6();

   

document.write('<br> var없이 전역 변수 명시3 ==================<br>');

//var 명시하지 않고 전역변수 선언(권장하지 않음)

//권장하지 않음

//p;

q = 20;

function test7(){

q = 60;

document.write(q + '<br>');                

}

test7();

</script>

</head>

<body>

</body>

</html>

   

출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/03.html>

   

Posted by codedragon codedragon

댓글을 달아 주세요

자바스크립트 함수관련 강의 맵

   

   

'Development > JavaScript, jQuery, ...' 카테고리의 다른 글

자바스크립트 함수 정의 및 호출 형식  (0) 2014.06.04
자바스크립트 함수 정의/역할  (0) 2014.06.04
ch04-function  (0) 2014.06.04
continue  (0) 2014.06.04
break label  (0) 2014.06.04
break  (0) 2014.06.03
Posted by codedragon codedragon

댓글을 달아 주세요