(JavaScript) 함수

함수

• 메모리에 자바스크립트 코드를 저장할 수 있는 수단
• function 키워드로 함수 선언이 가능하다(코드 저장)
• 선언된 함수를 호출해야 저장된 코드가 실행된다.
• 함수에는 일반 함수와 익명 함수가 있다.
  - 일반함수 : 함수 선언 시 함수명을 지정, 선언 위치 상관없이 호출 가능(호이 스팅 기술)
  

  function 함수명( ){ 　//유효 범위(스코프) 내에 작성된 코드를 메모리에 저장 }

  호출 : 함수명();

  
  
  
  - 익명 함수 : 함수 선언 시 함수명이 없으며 대입(변수)해서 선언, 선언 위치 중요.
  

  변수 = function( ){ 　 }

  호출: 대입된 변수명();

 

 

매개변수가 있는 함수

function 함수명 (매개변수1, 매개변수 2, … , 매개변수n) {

　자바스크립트 코드;
}

함수명(데이터1, 데이터2, … , 데이터n);

• 함수 호출 시 데이터를 함수에 전달 할 수 있다.
• 함수 호출시 전달된 데이터를 받는 함수를 매개변수라고 한다.
• 함수 호출시 전달된 데이터의 순서와 매개변수 순서가 일치한다.
• 함수 호출시 전달되는 데이터를 인수, 함수에서 매개변수로 받은 데이터를 인자라고 한다.
• 매개변수에는 변수 선언 키워드가 생략된다.
• 매개변수가 지정되어 있더라도 인수 없이 호출이 가능하며, 인수 없는 자리에는 undefined값이 출력된다.

 

 

return

- 함수 내에 return 키워드가 있을 경우 호출 한 곳에 return에 지정된 값을 전달해준다.

- 함수를 종료 시킬 수 있다.

function myNumber(n1,n2){
	return n1 + n2;
}
	
var sum = myNumber(10,20);
console.log(sum);
	
var sum2 = myNumber(20,20);
console.log(sum2);
	
function myNum2() {
		
}
console.log(myNum2(), 'return 키워드 없다면?');

30
40
undefined 'return 키워드 없다면?'

 

 

콜백 함수

function myFunction(fn){
	console.log(fn, typeof fn);
    
	//인자가 함수임으로 실행할 수 있다.
	fn('홍길동');
}

myFunction(function(name){
	console.log('안녕하세요',name);
});

ƒ (name){ console.log('안녕하세요',name); } 'function'
안녕하세요 홍길동

 

 

내부 함수

- 함수 내에 함수
- 내부 함수는 외부에서 호출이 불가능하다.

var arr01=[10,20,30,40,50];
var arr02=[60,70,80,90,100];
var arr03=[60,70,80,90,100];
		
		
function sumArr(x,y,z){
	var sum=0;
			
	var sumFn = function (arr){
		var n = 0;			
				
		for(var i=0; i<arr.length; i++){
			n += arr[i];				
		}				
		return n;
	};
			
	sum += sumFn(x); //내부 함수 임으로 함수 내부에서는 호출 가능
	sum += sumFn(y);
	sum += sumFn(z);
			
	return sum;			
}
		

console.log(sumArr(arr01,arr02,arr03));

 

내부 함수를 외부에서 호출해보기

function myFn2() {		
			
	function mySubFn() {
		console.log('내부 함수');
	}
			
	return mySubFn;
			
}
console.log(myFn2(), '내부함수 리턴 받기');
var resultFn = myFn2();
resultFn(); // = myFn2()();

 

 

 

 

재귀 함수

- 함수 내부에서 나 자신을 실행

//재귀 함수 리턴 예제 function reA(){ 　return reB(); } function reB(){ 　return reC(); } function reC(){ 　return 100; } console.log(reA());  --> 콘솔창에 100 찍힘

var cnt = 0;
function myFn3() {
	console.log(++cnt);
			
	if(cnt < 10) { //무한 루프 안되도록 조건식
		myFn3(); //나 자신 호출
	}					
}
myFn3();	




//재귀호출 리턴		
function myFn4(cnt) {
	console.log(++cnt);
			
	if(cnt < 10) { //무한 루프 안되도록 조건식
		return myFn4(cnt); //나 자신 호출
				
	}else {
		return cnt;
	}	
}
		
var result = myFn4(0);
console.log(result, '재귀 호출 후 결괏값');

아래의 코드는 랜덤으로 0~45의 랜덤 숫자를 뽑는 코드이다.
ranNum 함수를 통하여 중복되는 숫자 없는 로또 숫자를 뽑도록 하여라.
(6자리 -> 6개의 크기를 가진 배열을 반환)

function ranNum(getArr) {

	var ran = Math.round(Math.random() * 45);
	var arr;

	if (getArr != undefined) {
		arr = getArr; //매개변수가 값이 있다면 arr 이라는 변수에 매개변수의 값을 대입하고
	} else {
		arr = []; //매개변수가 값이 없다면 arr이라는 배열 객체를 만든다.

	}

	if (ran > 0) {
		var isCheck = truㄷ;
		for (var i = 0; i < arr.length; i++) {
			if (ran == arr[i]) {
				isCheck = false;
				break; //동일한 값이 나오면 isCheck에 false를 넣고 break걸어주기
			}
		}
		if (isCheck) { //동일한값이 아닐때
			arr.push(ran); //arr 배열에 ran 넣기
		}

	}

	if (arr.length < 6) { //6개가 안 채워지면 나를 또 호출

		return ranNum(arr); //6갠지 아닌지 체크할려면 매개변수로 배열을 가져와야함

	} else {//6개 채워지면 구하자고 했던 값(= 배열) 호출
		return arr;
	}

}

var result = ranNum();
console.log(result, '로또');

 

 

함수 선언과 동시에 바로 실행하기

(function(name){
	console.log('선언과 동시에 실행', name);
})('홍길동');

크로져

- 함수 실행 시 주위 환경을 기억하고 있다.

// 크로져 성격 예시

function myFn() {
	var str = '홍길동'; //지역변수는 외부에서 접근 할 수 없다.
	return function() {
		return str;
	}
}

//myFn(); 함수가 실행이 되더라도 지역 변수는 호출이 불가능하다.
//console.log(str); 오류

console.log(myFn()); //홍길동이 출력 되는게 아니라 함수 내용이 출력됨
		
//리턴 받은 함수를 실행시 그 함수의 환경을 기억하고 있다.
//실행되는 함수 기준의 전역변수 str의 값을 기억하고 있어 결괏값 홍길동이 나온다.
console.log(myFn()()); //홍길동 출력

익명함수로 지정해서 사용하는 방법	실제 크로져 사용 예시

 

 

 

버튼을 클릭했을 때 동작하는것 > 콜백함수 (언제 내가 쓴 코드가 쓰일지 모르니깐)

버튼의 배열이(그룹핑) 있을때 순서를 모르고, 크로져를 줘 버튼을 누르면 버튼의 인덱스값을 가져올 수 있다.

class="btn"으로 동일(그룹핑)한 버튼3개	1. 이벤트를 걸려면 대상을 찾아야한다 querySelectorAll():배열로 버튼을 검색함 > 이벤트 걸 수 있는 준비 (동기화) var btnArray = document.querySelectorAll('.btn'); console.log(btnArray);
	2. 버튼에 클릭 행위를 했을 때 함수를실행 (비동기화)  for(var i=0; i<btnArray.length; i++){ 　btnArray[i].addEventListener('click', function(){ 　　console.log(i); 　}); } --> 이렇게 하면 btnArray의 크기인 3값만 계속 나오게 됨
	3. 주위 환경을 기억하는 크로져를 줘 버튼의 인덱스 값을 가져오게 한다. for(var i=0; i<btnArray.length; i++){ 　(function(n){ 　　btnArray[i].addEventListener('click', function(){ 　　　console.log(n);  　　}); 　})(i); }

 

 

 

 

 

 

fgfdgdfgdfgdfg