자바스크립트 7 - 함수 종류와 작성방법

함수연습 필수~!

1. 함수 종류에는 익명함수와 선언적 함수가 있다.  

함수는 선언부와 호출부가 있다. 즉,

함수선언 -> 함수실행문작성 -> 리턴으로 반환하는 식으로 작동한다. 

익명함수는 선언하고 난 이후에 호출한다. 

선언적 함수는 어디에 선언해도 자스에서 이미 가장 먼저 읽어주기 때문에, 선언부를 어디에 적어도 호출이 된다. 

fun1();

let functionName = function(){
    alert('좋은아침입니다.-functionName함수호출');
};
functionName();

function fun1(){
    alert('좋은아침입니다.-fun1함수호출');
};

let fun2 = function(){
    let call =prompt('이름이 뭐니~?','');
    alert(call + '~! 반갑다~!');
}
fun2();

---

 

2. 함수는 return 키워드로 값을 반환할 수 있다. 

매개변수 parameter : 함수를 정의할 때 ()안에 받는 값을 말한다. 

function sum(num1, num2){
    return alert(num1+num2);
}
sum(13215464131321,86946313);

function rtfun(){
    alert('함수호출1 - 리턴전실행문');
    return;
    alert('함수호출2 - 리턴후실행문');
};
rtfun();

var call = rtfun();
console.log('typeof rtfun : ' + typeof(rtfun));

---

3. return키워드는 함수를 종료한 다는 의미를 갖는다.

var call2 = function(){
    alert('함수호출1 - 리턴전실행문');
    return;
    alert('함수호출2 - 리턴후실행문');
};
console.log('typeof rtfun : ' + typeof(call2));

 

---

4. 함수 정의시 매개변수를 인자값으로 받아 실행할때 받은 인자값을 넣어 실행 할 수 있다. 

arguments : 아래 코드처럼 매개변수를 함수 선언시 넣지 않고, 실행할 때 배열의 형태로 갖는 값이 있다.

arguments[0], arguments[1], arguments[3]...를 갖고 있다. 

function sum(){
    let num = 0;
    for(let i=0; i<arguments.length; i++){
        num += arguments[i];
    }
    return num;
}

console.log(sum(1,2,3,4,5));

---

4-1. 매개변수가 있을때와 없을때 호출방법 : ()여부 확인하기~!

//호출되는 함수에 매개변수가 없을 때
 btn1.addEventListener('click', test1);
 function test1(){
     console.log('버튼1을 클릭했습니다');
 }
 //호출되는 함수에 매개변수가 있을 때
 btn2.addEventListener('click', function(){test2(5)});
 function test2(i){
     console.log('버튼2을 클릭했습니다' + i );
 }

---

5. 콜백함수 : 매개변수를 함수로 받을 수 있다.

//콜백함수 : 매개변수로 전달하는 함수 호출
function test2(callBack){
    for(let i=0; i<10; i++){
        callBack();
    }
}

let callBack = function(){
    document.write('콜백함수 호출 <br>');
}
test2(callBack);

function test3(cbf, cbp, num){
    for(let i=0; i<10; i++){
        console.log(num + 'X' + i + '=' + num*i);
        if(i<10) cbp(i);
    }
    cbf();
}
function callBackProgress(n){
    console.log((n*10)+'% 진행중입니다. ');
}
function callBackFinish(){
    console.log('함수 종료');
}

test3(callBackFinish, callBackProgress, 5);
//매개변수로 함수를 호출 할 때는 ()를 안쓴다.

---

6. 재귀함수 : 자기자신을 함수로 리턴받을 수 있다. 

//재귀함수 : 자신을 호출하는 함수
let i =0;
function test1(){
    i++;
    document.write('재귀함수 호출 : '+  i + '번째입니다. <br>');
    if(i<5) test1();
}
test1();

---

 

7. 클로저 : return 반환값으로 함수를 받을 수 있다. 

클로저란, 생명주기가 함수가 종료되면서 끝난다.

 function test(name){
   let output = `Hellow ${name}~!`
   return function(){//클로저 : 생명주기는 함수가 종료되면서 끝남                
   		console.log(output);                
   	}
   }
   test('Happy')();//즉시실행

---

 

8. 즉시실행함수는 함수선언부 바로 뒤에 ();를 붙인다. 보통 익명함수에서 사용한다.

함수를 통째로 ()로 묶고 뒤에서 ();를 붙인다.

(function(){
    alert('함수호출1 - 리턴전실행문');
    return;
    alert('함수호출2 - 리턴후실행문');
})();

---

9. 내장함수 : setInterval, setTimeout

let timeout = setTimeout(function(){
    console.log('3초 후에 실행하는 함수');
}, 3000);
// clearTimeout(timeout);

let interval = setInterval(function(){
    console.log('2초마다 실행하는 함수');
},2000);
clearInterval(interval);

---

10. 전역변수와 지역변수의 차이를 알아야 한다.

전역변수는 어느 { } 블록 내부에도 모두 들어가 적용할 수 있다.

지역변수는 { }선언된 블록 내부에서만 유효하다. 

let i = 0;
let num =300;//전역변수초기화       
function theTest(){
    let num = 200;//지역변수초기화
    console.log(`theTest함수 : ${num}`);
}
theTest();
function theFun(){
    console.log(`theFun함수 : ${num}`);
}
theFun();