JavaScript_Function_함수

<함수선언>

1) 선언적 함수

: 함수에 이름을 집어 넣는다.

<button onclick="test1();">실행확인</button>
	<script>
		function test1(){//함수에 이름을 집어넣음
			console.log('test1함수 실행');
		}
	</script>

 

2) 익명 함수

: 함수에 이름없이 만드는 것.

: 변수에 이름을 집어 넣는다.--> 익명함수에 대한 실행은 변수명으로 불러와서 사용!

<button onclick="test2();">실행확인</button>
	<script>
		var test2 = function(){
			console.log('test2함수 실행')
		}
     </script>

 

<함수 전달인자와 매개변수>

1) 매개인자로 전달하기

: 지정된 매개변수보다 많은 개수를 호출하는 것을 허용하지만 초과된 인자는 무시되고 출력되지 않는다.

: 지정된 매개변수보다 적은 개수를 호출하는 것은 허용하지만 전달이 되지 않은 매개변수는 underfined라고 뜬다.

 즉, 들어간 값이 없어서 value에 확인할 수 있는 값이 없다는 뜻이다.

<button id="btn1">실행확인</button>
	<script>
		document.getElementById('btn1').onclick = function(){//함수명 적지않아도 연결할 수 있다.id로 실행
			test3('안녕', '반가워');
			test3();//undefined 들어간 값이 없어서 벨류가 확인할 수 있는 값이 없어서 이렇게 뜸
			
		}
		function test3(value){
			console.log('test3호출');
			console.log(value);
			
			console.log(arguments);//**숨겨져있는 배열, 내가 넘겨받은 모든값들을 저장해 놓는 배열.
		}
	
	</script>

arguments

: 숨겨져있는 넘겨받은 모든 값들을 저장하는 배열.

 

2) 매개인자로 스스로를 전달하기

2-1) 방법1

subject를 매개인자로 넣는 전달하기

<button onclick='test4("JavaScript");'>JavaScript</button>
	<button onclick='test4("jQuery");'>jQuery</button>
	<script>
		function test4(subject){
			alert('오늘 배운 내용은' + subject +'입니다.');
			
		}
	</script>

 

2-1) 방법2

this를 매개인자로 넣어서 전달하기

<button onclick='test4(this);'>JavaScript</button>
	<button onclick='test4(this);'>jQuery</button>
	<script>
		function test4(subject){//**this지금현재 있는 곳(코드) = 나, 어떤코드에 들어가있는것에 따라 다르게 나옴
			console.log(subject);//this 자바스크립트에 내장된 변수
			alert('오늘 배운 내용은' + subject.innerHTML +'입니다.');
		}
	</script>

this로 지금현재 있는 곳=나 스스로를 전달. this = subject안에 innerHTML

 

<함수의 리턴처리>

반환타입이 없어도 반환 가능.

<button onclick="test6();">실행확인</button>
	<script>
		function test6(){
			var ran = returnFunc();//반환타입없어도 반환가능
			alert(ran);
		}
		function returnFunc(){
			return Math.random() * 100 + 1;
		}
	</script>

returnFunc()에 담은값을 변수 ran에 넣어서 alert(ran)으로 불러와 알림창에 띄운다.

 

<매개변수로 함수 전달>

: 매개변수를 통한 함수 전달

<button onclick='test7(calledFunction);'>실행확인</button>
	<script>
		function test7(v){//v에 calledFunction이 들어감, 매개변수에 함수전달
			v();
		}
		function calledFunction(){
			alert('calledFunction 실행');
		}
	</script>

onclick='test7(calledFunction);'의 매개변수 calledFunction를 test(v)의 v가 받아와서 v를 실행시키면

v는 calledFunction을 실행시키는 것이다.

 

<함수리턴>

<button onclick="test8()();">실행확인</button>
	<script>
		function test8(){//소괄호 추가
			return function(){
				alert('함수 반환 성공');//펑션함수가 이름없는 함수여서 이렇게 소괄호로 추가해서불러옴. 호출해서 반환까지 받아온것이기 때문에 ()를 한번더 넣어서 받아옴으로써 실행된다.
			}
		}
	</script>

test8( )의 function이름이 없어서 ( ) 빈 소괄호를 추가해서 이름은 없지만 반환은 받을 수 있게

test( )( )로 함수를 리턴받을 수 있다.

 

<내장함수>

eval( )

: 문자열을 자바스크립트 코드로 변환해서 실행 (문자열 --> 숫자로 변경)

(자바스크립트코드로 변경하다보니 계산식으로 변경)

계산식 : <input type="text" id="test1"><button onclick="test9()">실행확인</button>
	<script>
		function test9(){
			var test = document.getElementById('test1').value;
			console.log(test);//테스트 문자열
			console.log(eval(test));//자바스크립트코드로 변경하다보니 계산식으로 변경
			
			var str = '';
			str += 'var num1 = Number(prompt("숫자 입력"));';//다 문자열로 쓴거
			str += 'var num2 = Number(prompt("숫자 입력"));';//다 문자열로 쓴거
			str += 'var sum = num1 + num2;';//다 문자열로 쓴거
			str += 'alert(num1 + " + " + num2 + " = " + sum);';//다 문자열로 쓴거
			
			console.log(str);
			eval(str);
		}
	</script>

test에 담긴 문자열을 eval( )에 담아서 숫자로 변경시켜준다.

 

<infinity와 NaN>

infinity : 무한

NaN : Not a Number 숫자가 아니다.

<button onclick="test10();">실행확인</button>
	<script>
		function test10(){
			var num1 = 10 / 0;
			var num2 = 10 / '김나리';
			
			console.log(num1); //Infinity
			console.log(num2); //숫자가 아니다 NaN(Not a Number)
			
			console.log(typeof num1);//둘다 숫자타입
			console.log(typeof num2);
			
			console.log(num1 == Infinity);//true
			console.log(isFinite(num1));//정해진 수가 있나 확인
			console.log(isNaN(num2));//true
			console.log(num2 == NaN);//false
			
			var num3 = -10 / 0;
			console.log(num3);//-Infinity
			console.log(num3 == -Infinity);//true
		}
	</script>

num1, num2 둘다 숫자타입이다.

num2는 문자로 나눌 수 없기 때문에 NaN로 나온다.

무한대에는 음의 무한대, 양의 무한대가 있다. num3의 예시처럼 음의 무한대가 나올 수 있다.