- 메모리에 코드를 저장하는 수단이다.
- function 키워드로 함수를 선언한다.
- 함수는 선언 후에 실행을 해야 저장된 코드가 실행이 된다.
- 함수는 익명함수, 일반함수가 있다.
- 함수는 지역변수, 전역변수 차별이 확실하다.
🔸일반함수 구문 : function 함수명 ( ){ }
🔹익명함수 구문 : var 함수명 = function ( ){ }
- 이름이 있는 함수
- 일반함수는 선언 위치에 상관없이 호출이 가능하다.
*호이스팅기술 : 자바스크립트가 처음 읽힐 당시에 모든 객체(변수, 함수)의 선언부를 맨 위로 끌어올린다. 함수전체(함수명, 함수바디)가 통째로 호이스팅 되어 맨 위로 올라가기 때문에 위치상관없이 읽을 수 있다.
<script type="text/javascript">
//fn01 메모리에 함수영역에 있는 코드를 저장
function 함수명(){
함수 로직
}
function fn01(/*매개변수*/){
console.log('fn01'); //출력:fn01
//return;
}
fn01();
</script>
- 이름이 없는 함수
- 단독으로 선언이 불가능하며, 대입을 해줘야 선언이 가능하다. (변수, 매개변수)
- 호출부 위에 선언이 되어있어야 정상작동을 한다.
(순서상 : 선언 -> 호출)
<script type="text/javascript">
var fn02 = function(/* 매개변수 */){
console.log('fn02');
//return;
}
</script>
선언된 일반함수 -> 함수명();
익명함수 -> 대입된 변수명();
<script type="text/javascript">
fn03(); //호이스팅 적용 -> 선언위치 상관없이 호출
function fn03(){
console.log('fn03');
}
fn03();
//fn04(); -> 익명함수 호출은 선언 아래에서 호출 해야함
var fn04 = function(){
console.log('fn04');
}
fn04();
</script>
- 함수를 실행하지 않고 호출 시 함수 코드를 가지고 온다.
- 함수코드를 다른 변수에 저장이 가능하다.
<script type="text/javascript">
function fn05(){
console.log('fn05 함수 실행')
}
var fn06 = function(){
console.log('fn06 함수 실행')
}
var fnv01 = fn05; //함수 실행하지 않아야 변수에 함수 주소 대입가능
var fnv02 = fn06;
console.log(fnv01,fnv02);
//매개변수에 함수 대입하기
function fn07(fn){
console.log(fn,'매개변수');
console.log(typeof fn,'자료형 확인');
if(typeof fn == 'function'){
fn(); //함수임으로 실행 가능
}
}
fn07(fn05); //fn07함수를 실행하면서 fn05 함수 코드를 인수로 삽입
fn07(fn06); //fn07함수를 실행하면서 fn06 함수 코드를 인수로 삽입
fn07(function(){ // 함수호출시 인수로 함수코드를 전달
console.log('익명함수');
})
</script>
- 함수명(매개변수) -> 함수 호출 시 인수를 넣어 인자값을 받을 수 있는 수단
- 함수 호출 -> 함수명(인수1, 인수2..) -> 함수 매개변수(인자1, 인자2...)
<script type="text/javascript"> function vfn01(n1,n2){ //인수로 삽입된 순서대로 매개변수 순서 위치에서 받는다. console.log(n1,n2); //n1 ->10, n2 ->20 } vfn01(10,20); vfn01(10);//매개변수 갯수와 인수값이 틀려도 호출은 가능하다. // 인자값이 없는 매개변수는 undefined를 가지게 된다.
vfn01(10,20,30); // 매개변수에서 인자 받는 위치가 없어도 실행은 가능하다.
```