JavaScript 함수

자바스크립트에서 함수란

소스코드의 집합으로 메소드, 모듈, 기능, 프로시져등 말한다

자바스크립트에서는 function 자료형이다.

함수는 인자/매개변수, 리턴값을 가질 수 있다.

함수선언

반환값 선언없이 function 키워드만 이용하여 사용

function키워드 뒤에 함수명을 작성하여 사용하는 방법(선언적 함수)

function에 함수명을 작성하지 않고 변수에 대입하는 방법(익명함수)

스스로 동작하는 함수(익명함수) -> 이벤트 처리시 사용

선언적함수 - 표기법

function 함수명(매개변수){

처리 로직

[retrun 값;]

}

<h3>선언적 함수</h3>

<p><code>function 함수명(){ 처리로직 }</code></p>

<button onclick="test1();">실행</button>

<script>

function test1(){

alert("test1()함수가 실행");

}

test1();

</script>

변수에 함수는 넣어 작성방법(callback 형태, 익명함수) - 표기법

var f1 = function(매개변수){

처리 로직

[return 값;]

}

<h3>함수 표현식(익명함수를 변수에 저장)</h3>

<p><code>var f1 = function(){ 로직처리 }</code></p>

<button onclick="test2();">실행</button>

<script>

//test22가 실행되는 이유는 호이스팅 때문이다. function은 애초에 이 자료형이

//함수라고 알려줬기 때문에 실행까지 가능하다. 선언보다 호출이 먼저 가능하다.

test22();

function test22(){

alert("실행 되니??");

}

//함수를 변수에 대입 후 사용이 가능, 선언보다 호출을 먼저할 수 없다.

//변수에 값을 넣기전까진 자료형을 모르기 때문에 사용불가

var f1 = function test2(){

alert("test2() 실행");

}

f1();

</script>

스스로 동작하는 함수(호출없이 바로 실행, 익명함수) - 표기법

(function( ){

처리로직

})();

<h3>스스로 실행 함수 self invoking</h3>

<p><code>(function(){ 처리로직 })();</code></p>

<div id="area"></div>

<script>

(function (){

document.getElementById('area').innerHTML ='실행되니?.?';

})();

</script>

함수의 매개변수

일반 자바와 같이 매개변수를 만들어서 로직에 이용이 가능하지만 워낙 자유로운 자바스크립트는 매개변수마저 자유롭기 때문에 매개변수를 설정해주지 않아도 기본적으로 arguments(배열)라는게 매개변수로 들어가 있어서 매개변수를 사용하지 않아도 arguments(배열)로 값을 받을 수가 있다. 또한 지정된 매개변수 개수보다 많이 넣을 수 있는데 문제는 없지만 무시되고 적게도 가능하는데 누락된 매개변수는 undefined으로 자동설정, return값도 설정해 주지않으면 undefined로 반환된다.

<h3>함수의 매개변수</h3>

<button id="btn">실행확인</button>

<p id="p4"></p>

<script>

//value를 설정하고 밑에서 사용해도 되고 주석처리처럼 빈칸으로 만들고 밑에 로직에서 arguments로 받을 수 있다.

function test4(/*value*/){

document.getElementById('p4').innerHTML += arguments;

//document.getElementById('p4').innerHTML += value;

console.log(arguments);

}

document.getElementById('btn').onclick = function(){

test4("너무더워어워어");

test4('땀이 난다');

}

</script>

매개변수로 함수전달

함수도 하나의 자료형이다. 그렇기 때문에 매개변수로 전달이 가능!!

익명함수도 매개변수로 넣을 수 있는데 그건 1회용으로만 사용이 가능하다.

<h3>매개변수로 함수를 전달</h3>

<p>함수도 하나의 자료형이다. 그래서 매개변수로 사용할 수 있다.</p>

<h4>선언적 함수를 매개변수로 전달</h4>

<div id="area1"></div>

<button onclick="func(func2);">실행</button>

<script>

function func(fun){

console.log('func실행');

console.log(func+" "+typeof(func));

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

fun(i);

}

}

function func2(num){

console.log(num+'번째');

}

</script>

함수리턴(클로저)

함수 내부에서 사용했던 지역변수를 외부에서 사용하기 위해 사용

클로저

-지역변수만 남기는 현상

-리턴 함수로 인해 생겨난 공간

-리턴 되는 함수 자체

-남겨진 지역변수

<script>

//클로저함수

function yoo(){

var age =19;

console.log(age);

return function(){

return ++age;

}

};

var t = yoo();

console.log(t());

console.log(t());

console.log(t());

function closure(name){

//var msg='하2 ㅎ2 ㅎㅇㄹ'+name+'님 방가방가';

var msg='하2 ㅎ2 ㅎㅇㄹ 방가방가 ';

return function(name){

return msg+name;

}

};

var closure1 = closure('병승');

console.log(closure1('정하'));

//console.log(msg);

</script>

내장 함수(인코딩, 디코딩)

<div id="area1"></div>

<button onclick="test();">실행</button>

<script>

function test(){

var src="http://www.naver.com?test=한글입니다.";

var escapeURI = escape(src);

var enURI = encodeURI(src);

var enURICom = encodeURIComponent(src);

var area = document.getElementById('area1');

area.innerHTML +='escape() : '+escapeURI+'<br>';

area.innerHTML +='encodeURI() : '+enURI+'<br>';

area.innerHTML +='endoceURIComponent() : '+enURICom+'<br><br>';

area.innerHTML +='escape() : '+unescape(escapeURI)+'<br>';

area.innerHTML +='encodeURI() : '+decodeURI(enURI)+'<br>';

area.innerHTML +='endoceURIComponent() : '+decodeURIComponent(enURICom)+'<br>';

}

<h3>eval()</h3>

<p>문자열로 스크립트코드를 작성한 것을 실제코드처럼 해석해주는 기능</p>

<label>숫자1 : <input type="text" name="su1" id="su1"></label>

<label>숫자2 : <input type="text" name="su2" id="su2"></label>

<button onclick="testEval();">실행</button>

<button onclick="testIsNaN();">실행</button>

<div id="area3"></div>

<script>

function testEval(){

var textCode='';

//파싱처리(parseInt)를 안해주면 그냥 문자2개를 이어붙이게 된다. ex)10+10= 1010식

textCode='var num1=parseInt(document.getElementById("su1").value);';

textCode +='var num2=parseInt(document.getElementById("su2").value);';

textCode +='var sum=0;';

textCode += 'sum=num1+num2;';

textCode += 'document.getElementById("area3").innerHTML=num1+"과"+num2+"의 합은"+sum+"입니다."';

eval(textCode);

}

//isNaN처리

var a =100;

a*='가';

console.log(a+':'+typeof a);

console.log(a=='NaN');

console.log(a==NaN);

console.log(isNaN(a));

console.log(a/0);

function testIsNaN(){

var num1=parseInt(document.getElementById("su1").value);

var num2=parseInt(document.getElementById("su2").value);

var sum=0;

sum=num1*num2;

if(isNaN(sum)){

document.getElementById("area3").innerHTML="잘못된 형식의 계산입니다.";

}else

document.getElementById("area3").innerHTML=num1+"과"+num2+"의 곱은"+sum+"입니다."

}

</script>