본문 바로가기

JavaScript&JQuery

자바스크립트의 함수

  함수 선언및 호출

코드를 만들어서 저장한 다음, 필요할 때 실행해서 사용하기 위한 것.

 

▶ 함수 선언 - function이라는 키워드를 사용한다.

함수정의문 : 함수를 사용하여 코드를 저장하는 것.

 

① 기본함수

 

기본적인 함수선언 방법이다.

function myFn(){}

 

② 익명함수

익명함수는 함수명 없이 참조변수에 함수를 할당한다.

var myFn = function(){}

 

 

▶ 함수 실행(호출)

함수 실행시 함수명 또는 변수명을 입력하면 함수가 한번 실행된다.

 

① 함수 실행시 외부함수 실행

 

② 함수의 내부에서 함수를 선언하여 간접실행

 

③ 재귀함수 실행

 

 

- 함수를 자기 자신 안에서 실행

break를 걸어주지 않으면 계속 실행하는 무한루트를 타게된다.

 


  함수 인수와 매개변수

함수 실행시 인수값을 넣어 함수 내에서 매개변수로 받아 값을 처리 할 수 있다.

 

▶ 매개변수 2개를 받아 함수 실행

 

▶ 매개변수 2개를 내부 함수에서 활용

 

 

 

 

  함수와 return

return : 데이터를 반환하거나 함수를 빠져 나올 때 쓴다.

 

▶ 함수를 빠져 나올 때

 

▶ 데이터를 반환 할 때

 

 


▶ 함수 실습

더보기

실습 1) fn이라는 함수가 있다 . fn 함수를 실행시키고, 이함수의 내부함수인 subFn을 실행시켜 num의 값이 50이 되도록 하고 num의 값을 콘솔에 출력시켜라.

var fn = function(){
	var num = 0;
    var subFn = function(){
    	num += 50;
    }
    subFn();
    console.log(num);
}
fn();

실습 2) fn2라는 함수가 있다. fn함수를 실행시키고, 이 함수의 내부함수인 subFn을 실행시켜 num의 값이 10이 되도록 하고 num의 값을 콘솔에 출력시켜라.(반복문)

var fn = function(){
	var num = 0;
    var subFn = function(){
    	num++;
    }
    for(var i=0;i<10;i++){
    	subFn();
    }
    console.log(num);
}
fn();

실습 3) fn3라는 함수가 있다. fn3함수에 인수 10,20을 넣어 실행시키고 이 함수의 내부 함수인 subFn를 fn3의 매개변수로 받은 값을 넣어 실행시켜라. subFn 함수에서는 첫번재 매개변수 값만큼 반복문을 돌리고 반복문의 인덱스 *2번째 인수값을 콘솔창에 출력시켜라.(반복문 사용)

var fn = function(n1,n2){
	var subFn = function(n3,n4){
    	for(var i=0;i<n3;i++){
        	console.log(i*n4);
        }
    }
    subFn(n1,n2);
}
fn(10,20);

실습 4) fn4라는 함수는 구구단을 출력시키기 위한 함수이다. fn4를 실행시키면서 삽입하는 인수값 기준으로 구구단을 출력하는 함수를 완성하라.

var fn = function(n){
	for(var i=1;i<=9;i++){
    	console.log(n*i);
    }
}
fn(6); //6단출력

실습 5) 아래의 배열값을 fn함수에서 매개변수로 받아 배열의 총합산값을 리턴하라.

var arr = [10,20,30,40,50,60,70,80,90];
var fn = function(Arr){ //매개변수 받기(함수를 실행하며 배열을 인수값으로 넣어 실행하여야 한다.)
	var sum = 0;
    for(var i=0;i<Arr.length;i++){ // 배열의 속성인 length를 사용할 수 있다.
    	sum += arr[i];
    }
	return sum;
}
fn(arr); //함수를 실행하면서 배열을 인수값으로 넣었다.

 

 

'JavaScript&JQuery' 카테고리의 다른 글

dom 객체  (0) 2020.04.03
자바 스크립트의 객체  (0) 2020.04.01
자바스크립트의 배열  (0) 2020.03.31
자바스크립트의 제어문  (0) 2020.03.31
JavaScript 연산자  (0) 2020.03.31