달력

8

« 2020/8 »

  •  
  •  
  •  
  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  
  •  

함수값을 리턴하는 함수

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

   

함수를 리턴하는 함수 기능

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

   

   

함수를 리턴하는 함수를 이용해 자신을 재정의하는 self함수 정의

   

소스 코드

<html>

<head>

<meta charset="UTF-8">

<title>자신을 재정의하는 함수 2</title>

<script type="text/javascript">

//self() 함수 정의

var self = function () {

var a= 10;

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

return function () {

var b = 20;

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

}

}

//원래 함수에서 리턴 받은 새로운 함수 참조값 저장

self = self(); // a

//새로운 함수 참조값으로 함수 호출

self();                 // b

</script>

</head>

<body>

</body>

</html>

   

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

   

   

   

자신을 재정의하는 함수 도식도

   

   

   

동일한 결과이지만 외부 함수와 내부 함수 모두 익명함수로 self 함수 구현한 동일한 형태

   

소스 코드

<html>

<head>

<meta charset="UTF-8">

<title>자신을 재정의하는 함수 1</title>

<script type="text/javascript">

//self() 함수 정의

function self () {

var a= 10;

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

return function () {

var b = 20;

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

}

}

//원래 함수에서 리턴 받은 새로운 함수 참조값 저장

self = self(); // a

//새로운 함수 참조값으로 함수 호출

self();                 // b

</script>

</head>

<body>

</body>

</html>

   

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

   

출력결과

동일함

   

   

(참조)

익명 내부함수로 정의 및 내부 익명함수를 리턴값으로 반환

09.html

Posted by codedragon codedragon

댓글을 달아 주세요

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

   

함수값을 리턴하는 함수

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

   

함수를 리턴하는 함수 기능

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

   

   

익명함수를 반환하는 함수

   

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">

//outter() 함수 정의

function outter() {

var a = 10;

var b = 20;

// 익명 내부 함수 정의후 inner변수에 내부 함수의 참조값을 저장

var inner = function () {

var b = 30;

//내부 함수에서는 자신을 둘러싼 외부함수의 변수에 접근이 가능

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

//b변수는 자신의 함수내에 선언되어 있으므로 외부함수의 b변수가 아닌 자신의 변수 b값이 출력됩니다.

document.write(b);

}

//inner 함수 변수를 리턴

return inner;

}

//outter()함수가 호출되면 inner함수 변수의 참조값이 반환됩니다.

var inn = outter();

//inner함수 변수의 참조값인 익명내부 함수의 참조값이 inn변수에 반환되었으므로 ()통해 함수호출하여 내부 함수를 정상적으로 호출

inn();

</script>

</head>

<body>

</body>

   

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

   

   

   

함수 스코프 외부에서 내부 함수 호출 도식도

   

Posted by codedragon codedragon

댓글을 달아 주세요

내부 함수(inner function)

함수 내부에 선언한 함수.

내부 함수를 사용하면 외부에 이름이 같은 함수가 있어도 내부 함수가 우선적으로 호출됩니다.

   

function 외부 함수(){

function 내부 함수1(){

코드

}

 

function 내부 함수2(){

코드

}

   

내부 함수1( );

}

   

내부 함수 기능

  • 자바스크립트의 기능르 보다 강력하게 해주는 클로저 생성
  • 부모 함수 코드에서 외부에서의 접근을 막고 독립적인 헬퍼 함수를 구현

   

내부 함수 특징

  • 내부 함수에서는 자신을 둘러싼 외부함수의 변수에 접근이 가능합니다. (자바스크립트의 스코프 체이닝)
  • 내부 함수는 일반적으로 자신이 정의된 외부 함수 내부에서만 호출이 가능합니다. (자바스크립트의 함수 스코핑)

   

※함수 스코핑:

함수 내부에 선언된 변수는 함수 외부에서 접근이 불가능합니다.

기본적으로 함수 스코프 밖에는 함수 스코프 안에 선언된 모든 변수나 함수에 접근이 불가능합니다.

   

   

소스 코드

<html>

<head>

<meta charset="UTF-8">

<title>내부 함수 호출/함수 스코프</title>

<script type="text/javascript">

//outter() 함수 정의

function outter() {

var a = 10;

var b = 20;

// inner() 내부 함수 정의

function inner() {

var b = 30;

//내부 함수에서는 자신을 둘러싼 외부함수의 변수에 접근이 가능

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

//b변수는 자신의 함수내에 선언되어 있으므로 외부함수의 b변수가 아닌 자신의 변수 b값이 출력됩니다.

document.write(b);

}

//내부 함수는 일반적으로 자신이 정의된 외부 함수 내부에서만 호출이 가능

inner();

}

outter();

//Uncaught ReferenceError: inner is not defined

inner();

</script>

</head>

<body>

</body>

</html>

   

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

   

   

   

내부 함수 호출 도식도와 함수 스코프

   

Posted by codedragon codedragon

댓글을 달아 주세요

익명 함수 형태의 내부 함수 선언 및 익명 내부 함수 리턴

   

   

소스 코드

<html>

<head>

<meta charset="UTF-8">

<title>익명 함수 형태의 내부 함수</title>

<script type="text/javascript">

function f(){

//익명함수 형태의 내부 함수

return function(){

document.write('Hello World!!!');

};                

}

//함수 호출

f();

//내부 함수를 호출한 것이지 반환값을 받는 아니여서 출력이 되지 않음

</script>

</head>

<body>

</body>

</html>

   

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

   

내부 함수를 호출한 것이지 반환값을 받는 것 아니여서 출력이 되지 않음

   

   

소스 코드

<html>

<head>

<meta charset="UTF-8">

<title>익명 함수 형태의 내부 함수</title>

<script type="text/javascript">

function f(){

//익명함수 형태의 내부 함수

return function(){

document.write('Hello World!!!');

};                

}

//함수 호출

//f() 구동시킨 결과인 내부함수 참조값이 result변수에 전달

var result = f();

//var result = function(){ document.write('Hello World!!!'); };        //동일한 결과

//()함수 호출 연산자를 이용해 result() 리턴된 내부 함수 실행

result();

</script>

</head>

<body>

</body>

</html>

   

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

   

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

즉시 실행 함수  (1) 2014.06.09
이벤트 처리와 콜백함수  (0) 2014.06.08
익명 함수 형태의 내부 함수  (0) 2014.06.08
jQuery 파일 CDN 경로  (0) 2014.06.08
jQuery의 특징  (0) 2014.06.08
선언적 함수형태의 내부 함수2  (0) 2014.06.08
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

댓글을 달아 주세요

선언적 함수형태의 내부 함수

-내부 함수 (선언적 함수) : 함수 안에 함수 생성

-내부 함수는 함수 안에 선언 후 호출해 주어야 함

-내부 함수는 외부코드에서 접근 불가능합니다.

-내부 함수는 함수 내부에서 해당 함수를 재귀적으로 호출하거나, 디버거 등에서 함수를 구분할 때 사용되어 집니다.

   

   

소스 코드

<html>

<head>

<meta charset="UTF-8">

<title>내부 함수</title>

<script type="text/javascript">

function f(){

function g(){

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

}

}

//함수 호출

f();

//f() 호출되고 g() 호출되지 않음

   

</script>

</head>

<body>

</body>

</html>

   

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

   

내부 함수는 함수 안에 선언 후 호출해 주어야 함

   

   

소스 코드

<html>

<head>

<meta charset="UTF-8">

<title>내부 함수</title>

<script type="text/javascript">

function f(){

function g(){

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

}

//내부 함수 호출

g();

}

//함수 호출

f();

//f() 호출되고 g() 호출되지 않기 때문에 f()내부에서 g()함수를 호출해 주어야 .

   

</script>

</head>

<body>

</body>

</html>

   

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

   

Posted by codedragon codedragon

댓글을 달아 주세요

   

내부 함수

함수 내부에 선언한 함수.

내부 함수를 사용하면 외부에 이름이 같은 함수가 있어도 내부 함수가 우선적으로 호출됩니다.

   

function 외부 함수(){

function 내부 함수1(){

코드

}

 

function 내부 함수2(){

코드

}

코드

}

   

   

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

자바스크립트 내장 함수  (0) 2014.06.05
함수를 반환하는 함수와 클로저  (0) 2014.06.05
내부 함수  (0) 2014.06.04
함수의 return 값 활용  (0) 2014.06.04
가변인자 함수  (0) 2014.06.04
함수의 매개변수  (0) 2014.06.04
Posted by codedragon codedragon

댓글을 달아 주세요