-
[JavaScript] functionVScode/JavaScript 2022. 9. 8. 17:43
-자바의 메서드와 같은 뜻의 문법요소임
-반복되거나 단위로 구성될 명령을 하나의 이름으로 묶어놓고, 명령이 필요할 때 이름을 불러 실행하는 구조
-보통 head 태그 안의 스크립트 영역에서 함수를 정의해놓고, body의 이벤트에 연결하여 실행시킴: 벼튼이 클릭되면 실행되는 자바 스크립트 함수의 정의
-함수는 선언적 함수와 익명 함수가 있음
-선언적 함수는 생성당시 부를 이름을 부여해서 만드는 함수를 의미하고,
-익명 함수는 이름을 지정하지 않은 상태로 만들어서, 함수자체를 변수에 저장하여 변수이름으로 사용하곤 함
선언적 함수
-함수는 익명 함수이든 선언적 함수이든 head 영역의 script 태그 안에서 또는 body 영역의 script 태그 안에서 어디서든 호출 가능
-move(); → head의 스크립트 영역에서 직접 호출
익명함수
-하나의 변수에 익명함수를 대입하고 필요할 때마다 변수이름으로 실행할 수 있다는 장점이 있음
-이미 함수가 대입되어 있는 변수에 다른 함수를 대입하여 다른 함수가 실행되게 할 수도 있음
-익명함수를 저장한 변수는 저장된 함수의 몸체를 대신하지만 변수에 괄호를 붙이면 함수가 실행되는 모드로 변경됨
-함수의 정의영역 및 몸체를 변수에 저장하여 변수의 이름으로 호출하는 형태
-변수는 일시적으로 하나의 함수만 저장할 수 있으며 변수의 이름으로 함수를 호출할 시 현재 저장되어 있는 함수가실행됨
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Function01.html</title> <script type="text/javascript"> // 선언적 함수 function move(){ var output=Number(prompt('숫자 입력','숫자')); document.write(output); } // 익명함수 var func1=function(){ var output=Number(prompt('number: ','숫자')); document.write("<h2>"+output+"</h2>"); } // func1(); func1=function(){ document.write("<h2>hi</h2>"); } // func1(); func2=function(){ alert("hi"); } </script> </head> <body onload="func2();"> <!-- <script> func2(); </script> --> <input type="button" value="func2 실행" onclick="func2();"> <input type="button" value="move 실행" onclick="move();"> <!-- head에 정의된 함수가 버튼 또는 윈도우 이벤트에 연결되어져서 실행될 수 있음. --> </body> </html>1. 함수의 전달인수-매개변수
-자바스크립트 함수의 전달인수와 매개변수는 자바와 비슷하지만 매개변수의 자료형을 표시하지 않고 변수의 이름만 명시하고 사용함.
-리턴값의 사용은 자바와 같음.
function add(a,b){ c=a+b; return c; } var result=add(10,20); document.write("<h2>10+20="+c+"</h2>"); // -> 10+20=30 출력2. 매개변수의 사용
-생성되어 있는 매개 변수보다 전달인수의 갯수가 많으면 해당 전달인수는 무시됨
function f(x){ return x*x; } result=f(5,3); // 두번째 전달인수는 무시함 document.write("<h2>5*5="+result+"</h2>"); // -> 5*5=25 출력3. 함수의 오버로딩 사용예
-배열을 만들어주는 Array() 함수의 다양한 사용(오버로딩)
-array() 함수는 기본적으로 매개변수에 아무것도 입력하지 않게 정의됨
var array1=Array(); // 빈 배열을 만듦 var array2=Array(10); // 매개변수만큼의 크기를 가지는 배열을 만듦 var array3=Array(25,35,45,55); // 매개변수를 배열로 만듦. document.write("<h2>"+array1+"<br>"+array2+"<br>"+array3+"<br>"+"</h2>");
빈배열. 매개변수(10)만큼의 크기를 가지는 배열(','의 갯수 9개). 매개변수의 배열 4. arguments 변수 사용
function sumAll(){ document.write("<h1>"+typeof(arguments)+':'+arguments.length+"</h1>"); var s=""; var sum=0; for(var i in arguments){ s=s+arguments[i]+" "; sum=sum+arguments[i]; } document.write("<h1>arguments: "+s+"</h1>"); document.write("<h1>sum: "+sum+"</h1>"); } document.write("<br/>"); sumAll(1,2,3,4,5); document.write("<br/>"); sumAll(1,2,3,4,5,6,7,8,9); document.write("<br/>"); // 입력 매개변수를 모두 더해 리턴하는 함수
function addAll(){ var sum=0; for(var i in arguments){ sum=sum+arguments[i]; } return sum; } result=addAll(1,2,3,4,5,6,7,8,9,10); document.write("<h1>배열의 합계: "+result+"</h1>"); document.write("<br/>"); addAll('minus',2,5,6,8,7,4); // -> '배열의 합계: 55' 출력5. 리턴값이 익명함수인 경우
function returnFunc(){ // var f=function(){document.write("<h1>리턴된 함수의 출력</h1>");}; // retunr f; return function(){document.write("<h1>리턴된 함수의 출력</h1>");}; } var value=returnFunc(); // 함수의 리턴값(익명함수)을 변수에 저장함 value(); // 변수이름옆에 괄호를 붙여서 리턴된 익명함수를 호출함. // 화면에 "리턴된 함수의 출력"라고 출력함 returnFunc()(); // 함수 호출에 의해 리턴된 익명함수를 변수에 저장하지 않고 // () 안 붙여도 호출실행됨 // -> '리턴된 함수의 출력' '리턴된 함수의 출력' 출력6. 익명함수를 함수의 전달인수로 전달하는 경우
function varFunction(varFunc){ for(var i=0; i<5; i++) varFunc(); } // 매개변수에 괄호를 붙여서 호출하는 것을 보니, // 전달인수로 익명함수가 전달되나 봄 var func=function(){document.write('<h1>hello</h1>');} varFunction(func); // varFunction(function(){document.write('<h1>hello</h1>');}); // -> 'hello' 5번 출력7. 선언적 함수를 매개변수로 전달
function justFunction(){ document.write('<h1>hello</h1>'); } varfunction(justFunction);8. 지역변수와 유효범위
function test(name){ var output='hello'+name+' !'; return output; } // 위 함수 내의 output 변수는 지역 변수이므로, // 함수를 벗어나면 없는 변수가 됨 // document.write('<h1>'+output+'</h1>'); // 실험결과 에러 메세지: output is not defined // 지역변수는 자신을 감싸고 있는 중괄호를 벗어나는 순간 소멸됨 // 지역변수가 소멸되기 전에 그 값 리턴으로 전달받아 사용하면 // 지역변수값을 살려서 활용 가능함 var s=test(' javascript'); document.write('<h1>'+s+'</h1>'); // -> hello javascript !9. 클로저(closure)
-지역변수의 값을 살리고 활용하기 위해 리턴되는 함수의 리턴값으로 지정
// 함수내의 지역변수를 외부에서 활용하는 방법 function test2(name){ var output='hello'+name+'..!'; return function(){return output;}; // 지역변수를 담은 익명함수가 리턴됨 } var func1=test2(' javascript'); var s=func1(); // 리턴받은 함수를 호출해서 리턴 받은 값(test2의 output변수값)을 // s에 저장 document.write('<h1>'+s+'</h1>'); document.write('<h1>'+func1()+'</h1>'); document.write('<h1>'+test2(' javascript')+'</h1>');
함수의 재정의
-함수 호출 전 마지막에 지정된 함수가 실행됨
1. 익명함수의 재정의
-익명함수는 변수의 익명함수가 저장되는 시점에 변수의 이름으로 함수가 정의되듯 실행 결과를 갖을 수 있게 만들어짐
var func=function(){document.write('<h1>익명함수1</h1>');} func(); // 익명함수1 var func=function(){document.write('<h1>익명함수2</h1>');} func(); // 익명함수2
2. 선언적 함수의 재정의
-최초 실행시 내부의 실행명령들의 내용을 읽기 전에 선언적 함수들을 먼저 읽어서 사용준비를 함
-그 과정에 같은 이름의 함수가 있다면 나중에 정의된 함수가 그 이름의 함수로 결정됨
-따라서 아래 코드의 세번의 move() 함수 호출 명령은 모두 'move() 함수3 호출' 내용을 출력함
function move(){document.write('<h1>move() 함수1 호출.</h1>');} move(); function move(){document.write('<h1>move() 함수2 호출.</h1>');} move(); function move(){document.write('<h1>move() 함수3 호출.</h1>');} move();
'VScode > JavaScript' 카테고리의 다른 글
[JavaScript] vaildation, select tag, visibility, check (0) 2022.09.08 [JavaScript] Image (0) 2022.09.08 [JavaScript] BOM (0) 2022.09.08 [JavaScript] if, loop (0) 2022.09.08 [JavaScript] Basic (0) 2022.09.08