달력

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

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

댓글을 달아 주세요

즉시 실행 함수(immediate funtions)

함수를 정의함과 동시에 바로 실행되는 함수

익명함수를 응용한 형태

즉시 실행함수는 한번 수행 후, 다시 호출할 수 없습니다.

이런, 특성으로 최초 한 번의 실행만을 필요로 하는 초기화 코드부분에 패턴으로 사용되어 집니다.

   

즉시 실행 함수 형식

( function( ) {

코드

})( )

괄호 ( ) 로 함수리터럴을 사용한 함수 정의 부분을 감쌉니다. 그런 다음 함수가 바로 호출될 수 있게 ( ) 괄호 쌍을 추가합니다.

   

즉시 실행 함수 패턴

라이브러리 코드가 처음 로드되어 초기화할 때, 즉시 실행 함수 패턴이 많이 사용되어 집니다.

라이브러리 코드를 즉시 실행 함수 내부에 정의하게 되면 라이브러리 내의 변수들은 함수 외부에서 접근할 수 없게 됩니다. 이렇게 함으로써 이후 다른 자바스크립트 라이브러리들을 동시에 로드하더라도 라이브러리간 변수 이름 충돌 같은 문제를 방지할 수 있습니다.

   

라이브러리

즉시 실행 함수

설명

jQuery 1.11.1

(function( global, factory ) {

…………….

})(window);

window를 즉시실행함수의 인자로 넘기며 호출합니다.

Underscore 1.3.3

(function(){

var root=this;

var previousUnderscore=root._;

…………….

}).call(this);

call함수를 this인자와 함께 사용하였습니다. 실행시 this가 즉시 실행함수 내부의 this에 연결되어 root라는 함수 내부 변수에 저장되어 사용되어 집니다.

Sugar 1.2

(function(){

………………

buildObject();

buildFunction();

initializeClass(date);

})( );

특별한 인자 없이 즉시 실행함수를 호출합니다.

   

   

소스 코드

<html>

<head>

<meta charset="UTF-8">

<title>즉시 실행 함수</title>

<script type="text/javascript">

(function (name) {

            document.write(name + ' 실행되었습니다.');

})('즉시실행함수');

</script>

</head>

<body>

</body>

</html>

   


   

출력 결과

('즉시실행함수')로 즉시 실행 함수를 호출 했으며, 이 때 '즉시실행함수' 라는 문자열을 인자로 념겨 호출하였습니다. 이 값은 즉시 실행 함수의 name매개 변수에 넘겨져서 출력되게 됩니다.

   

Posted by codedragon codedragon

댓글을 달아 주세요

  1. 준티 2017.02.12 13:48 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다~

콜백함수(callback function)

익명함수의 대표적인 응용형태가 콜백함수이며 코드를 통해 명시적으로 호출하는 함수가 아닙니다.

개발자는 단지 함수 정의만 하고, 어떤 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출해주는 함수가 콜백함수입니다.

   

대표적인 콜백 함수 사용 예) 자바스크립트의 이벤트 핸들러 처리

   

자바스크립트의 이벤트 처리와 콜백함수 호출 도식도

   

   

학습 내용

웹페이지 로드시 경고창을 띄워주는 과정에서의 처리과정에 대해 학습

   

   

소스 코드

<html>

<head>

<meta charset="UTF-8">

<title>이벤트 처리와 콜백함수</title>

<script type="text/javascript">

// 페이지 로드시 호출될 콜백 함수

window.onload = function() {

alert('콜백함수가 실행되었습니다.');

};

</script>

</head>

<body>

</body>

</html>

   

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

   

   

   

window.onload이벤트핸들러와 콜백함수 처리 도식도

웹페이지load 이벤트 발생 후 window.onload이벤트 핸들러에서 호출한 콜백함수가 실행되었습니다

   

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

내부 함수 호출/함수 스코프  (0) 2014.06.09
즉시 실행 함수  (1) 2014.06.09
이벤트 처리와 콜백함수  (0) 2014.06.08
익명 함수 형태의 내부 함수  (0) 2014.06.08
jQuery 파일 CDN 경로  (0) 2014.06.08
jQuery의 특징  (0) 2014.06.08
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">

/* callFunctionTenTimes() 한번 호출해서 justFunction() 7 호출 */

// 함수를 열번 호출하는 함수

function callFunctionTenTimes(otherFunction){

for(var i=0; i<7; i++){

//매개변수로 전달된 함수를 호출

otherFunction();

}

}        

//함수 호출 (전달할 함수를 익명함수 형태로 기재)        

callFunctionTenTimes(function(){

document.write('Hello JavaScript World!!! <br>');

});

   

</script>

</head>

<body>

</body>

</html>

   

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

   

인자로 넘긴 익명함수가 callFunctionTenTimes()함수 내부에서 정상적으로 호출된 것을 확인할 수 있습니다.

   

Posted by codedragon codedragon

댓글을 달아 주세요

선언적 함수 vs 익명 함수

선언적 함수

익명 함수

선언적 함수를 사용할 경우는 호출 문이 먼저 나와도 에러 없이 처리됨

  

익명 함수를 사용할 경우는 호출 문이 함수 선언 이후에 호출되어야 에러가 발생하지 않음

   

   

학습 내용

  • 선언적 함수: 동일한 함수명 사용가능
    • javascript는 동일한 함수명 사용가능
    • 동일한 함수명 사용시 에러 나지 않음
    • 마지막에 호출된 함수가 수행됨
  • 선언적 함수: 함수 선언 전에 호출
  • 익명함수: 동일 함수명 사용
  • 익명함수: 함수 선언 전에 호출

   

   

전체 소스

   

<html>

<head>

<meta charset="UTF-8">

<title>선언적 함수 vs 익명 함수</title>

<script type="text/javascript">

//javascript 동일한 함수명 사용가능

//동일한 함수명 사용시 에러 나지 않음

//마지막에 호출된 함수가 수행됨

document.write('선언적 함수: 동일한 함수명 사용가능 ===========<br>');

function aaa(){

document.write('함수1 aaa<br>');                

}

function aaa(){

document.write('함수2 aaa<br>');                

}

//함수 호출

aaa();

   

document.write('<br>선언적 함수: 함수 선언 전에 호출 ===========<br>');

//선언적 함수를 사용할 경우는 호출문이 먼저 나와도 에러없이 처리됨

//함수 호출

bbb();

function bbb(){

document.write('함수 bbb<br>');

}

   

   

document.write('<br>익명함수: 동일 함수명 사용===========<br>');

var ccc = function(){

document.write('함수1 ccc <br>');

};

var ccc = function(){

document.write('함수2 ccc <br>');

};

//함수 호출

ccc();

   

document.write('<br>익명함수: 함수 선언 전에 호출 ===========<br>');

//선언적 함수를 사용할 경우는 호출문이 먼저 나와도 에러없이 처리됨

//익명 함수를 사용할 경우는 호출문이 함수 선언이후에 호출되어야 에러가 발생하지 않음

//함수 호출        

//ddd();        //오류 발생

var ddd = function(){

document.write('함수 ddd <br>');

};        

   

</script>

</head>

<body>

</body>

</html>

   

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

   

   

   

익명함수: 함수 선언 전에 호출

소스 코드

ddd();        //오류 발생

var ddd = function(){

document.write('함수 ddd <br>');

};        

   

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

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

익명 함수 생성 (함수 표현식 방식), function expression

함수 리터럴로 하나의 함수를 만들고, 생성된 함수를 변수로 할당하여 함수를 생성하는 방법으로,

자바스크립트에서는 함수도 하나의 값처럼 취급됩니다.

함수표현식을 사용한 익명함수 생성시 세미콜론(;)을 붙이는 것을 권장합니다.

var 함수변수= function (매개변수명 ) {

코드

return 반환값 // 반환할 값이 있을 경우 지정

};

   

함수 호출

함수변수(매개변수에 전달할 값);

   

   

소스 코드

<html>

<head>

<meta charset="UTF-8">

<title>함수표현식으로 함수생성</title>

<script type="text/javascript">

//add() 함수 표현식 정의

var add = function (x, y) {

return x + y;

};

//add 가지고 있는 함수 참조값을 plus변수에도 그대로 할당

var plus = add;

//함수 표현식으로 생성된 함수 호출

document.write(add(1,2) + '<br>');

//동일한 함수 참조값을 가진 변수를 통해 함수 호출

document.write(plus(3,4) + '<br>');

   

</script>

</head>

<body>

</body>

</html>

   

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

   

Posted by codedragon codedragon

댓글을 달아 주세요

   

콜백함수(callback function)

익명함수의 대표적인 응용형태가 콜백함수이며 코드를 통해 명시적으로 호출하는 함수가 아닙니다.

개발자는 단지 함수 정의만 하고, 어떤 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출해주는 함수가 콜백함수입니다.

   

대표적인 콜백 함수 사용 예) 자바스크립트의 이벤트 핸들러 처리

   

자바스크립트의 이벤트 처리와 콜백함수 호출 도식도

   

   

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')();

  

   

   

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

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

댓글을 달아 주세요