(JavaScript) 함수

카테고리

{ "Hello World!" };/JavaScript／jQuery

작성일

2021. 12. 15. 17:17

작성자

갱수터

728x90

함수

메모리에 자바스크립트 코드를 저장할 수 있는 수단
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