달력

12

« 2019/12 »

  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  

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

   

   

소스 코드

<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 callFunctionTenTimes(otherFunction){

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

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

otherFunction();

}

}

function justFunction(){

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

}

//함수 호출

callFunctionTenTimes(justFunction());

   

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

   

callFunctionTenTimes(justFunction( )); > callFunctionTenTimes(justFunction);로 수정해야 합니다.

이런식으로 코드를 작성하면 매개변수로 함수를 전달하는 것이 아니라 함수를 1회 실행되는 것을 의미함으로 따라서 전달되는 함수가 없기 때문에 함수가 한번 실행된 후 오류가 발생함

   

   

   

전체 소스

<html>

<head>

<meta charset="UTF-8">

<title>선언적 함수를 매개변수로 받는 함수</title>

<script type="text/javascript">

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

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

function callFunctionTenTimes(otherFunction){

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

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

otherFunction();

}

}

function justFunction(){

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

}

//함수 호출

callFunctionTenTimes(justFunction);

//callFunctionTenTimes(justFunction());

//이런식으로 코드를 작성하면 매개변수로 함수를 전달하는 것이 아니라 함수를 1 실행되는 것을 의미함으로

//따라서 전달되는 함수가 없기 때문에 함수가 한번 실행된 오류가 발생함

</script>

</head>

<body>

</body>

</html>

   

출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/05.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

댓글을 달아 주세요

학습 내용

  • 선언적 함수: 호출하면 동작
    • 인자 없는 함수 호출
    • 인자 있는 함수 호출
    • 인자 있는 함수 호출하여 연산된 값 반환

   

  • 익명 함수
    • 인자 없는 익명함수 호출
    • 익명 함수 매개변수 대입
    • 익명 함수 매개변수 전달 후 반환되는 값 출력

   

   

;(세미콜론) 사용

선언적 함수 생성시에는 세미콜론을 붙이지 않지만

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

   

   

소스 코드

   

<html>

<head>

<meta charset="UTF-8">

<title>함수</title>

<script type="text/javascript">

document.write('인자 없는 함수 호출 ================<br>');

//선언적 함수

function check1(){

document.write('호출하면 동작됨<br>');

}        

//함수 호출

check1();

document.write('<br>인자 있는 함수 호출 ================<br>');

//인자 전달하여 함수 호출

function check2(msg){

document.write(msg + '() 좋아합니다.<br>');

}

//함수 호출

check2('사과');

document.write('<br>인자 있는 함수 호출하여 연산된 반환 ================<br>');

function check3(num){

return num * num;

}

//함수 호출

var number = check3(10);

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

//익명 함수: 함수명이 없으며 함수를 변수명인 처럼 사용하는 기법

document.write('<br>익명 함수 ================<br>');

var fruit1 = function (){

document.write('과일을 좋아합니다~<br>');

};

//함수 호출

fruit1();

document.write('<br>익명 함수 매개변수 대입 ================<br>');

var fruit2 = function(item){

document.write(item + ' 너무 좋아합니다~<br>');

};

//함수 호출

fruit2('파인애플');

document.write('<br>익명 함수 매개변수 전달 반환되는 출력 ================<br>');

var fruit3 = function(x, y){

return x + y;

};

//함수호출

var result = fruit3(3, 7);

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

   

   

</script>

</head>

<body>

</body>

</html>

   

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

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

   

함수 정의 /호출 형식

선언적 함수 생성, function statement

함수 리터럴을 이용해 함수를 생성하며 선언적 방식으로 함수 정의 시 반드시 함수명을 정의해야 합니다.

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

코드

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

}

   

function

함수 리터럴은 function키워드로 시작

함수명

함수 몸체의 내부 코드에서 자신을 재귀적으로 호출하거나 자바스크립트 디버거가 해당 함수를 구분하는 식별자로 사용됩니다.

함수명은 생략 가능 하며 함수명이 없는 함수를 익명함수하고 합니다.

매개변수

기존 언어의 함수 매개변수 형태와 거의 비슷하지만,

매개변수 타입을 기술하지 않는 것이 차이가 있습니다.

(리턴 값과 매개변수로 넘기는 값에 변수 타입을 기술하지 않는다는 점이 큰 차이)

코드

함수 몸체로 실제 함수가 호출됐을 때 실행되는 코드 부분입니다.

   

함수 호출

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

   

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

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

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

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

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

코드

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

};

   

함수 호출

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

   

Function( )생성자 함수

일반적으로 자주 사용되지 않으므로 소스 분석 수준으로만 알아두기 바랍니다.

var 함수= new Function (arg1, arg2, arg3,…… argN, functionBody)

arg1, arg2, arg3,…… argN

함수의 매개변수

functionBody

함수가 호출될 때 실행되는 코드를 포함한 문자열

   

함수 호출

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

   

   

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

가변인자 함수  (0) 2014.06.04
함수의 매개변수  (0) 2014.06.04
자바스크립트 함수 정의 및 호출 형식  (0) 2014.06.04
자바스크립트 함수 정의/역할  (0) 2014.06.04
ch04-function  (0) 2014.06.04
continue  (0) 2014.06.04
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

댓글을 달아 주세요