JAVASCRIPT STEP 32 - Function

★ Function

• "함수는 1급 객체이다"
• 1급 객체, First class object
• 함수를 객체처럼 취급한다. > 함수를 값처럼 취급할 수 있다.
• 1. 함수를 변수에 담을 수 있다.(저장)

n1 = f1; //함수명이 가지고 있는 주소 값을 복사
console.log(typeof n1);

• 2. 함수를 매개변수에 전달할 수 있다.

function a6() {
    console.log('a6');
};

function a7(temp) { //temp = a6
    console.log('a7');
    temp();
};

//매개변수로 함수(a6)를 전달
a7(a6);

• 3. 함수를 반환값으로 사용할 수 있다.

//함수를 반환값으로 사용할 수 있다.

function a9() {
    console.log('a9');
}

function a10() {
    return a9; //함수 자체를 반환값으로 사용
}

let result = a10();
result(); //a9();

a10()();

 

■ JavaScript에서 함수를 만드는 방법

• 1. 함수 선언문

//함수 선언문
function m1() {
    console.log('m1');
}

• 2. 함수 표현식(리터럴) = 익명 함수(Anonymous Function)

//함수 표현식(리터럴)

function m2() {
    console.log('m2');
}

let n2 = m2;

// 이 형태는 목적이 > 함수를 변수에 넣기 위해서 선언!!
//                        > 함수를 독립적으로 사용할 의도가 전혀 없음!!
let n3 = function m3() {
    console.log('m3');
};

n3(); // 호출

//실제 자주 사용하는 형식 -> 익명 함수
let n4 = function() {
	console.log('익명함수');
};

//익명함수 호출2
(function() {
    console.log('익명함수2');
})(); //즉시 호출(재사용 할 필요X, 1회성 조작할 때 사용)

 

■ 버튼을 사용한 상황

document.all.btn1.onmousedown = m5;

//버튼의 클릭을 위해서 만들어진 전용 함수
function m5() {
    // alert(event.buttons);
    // console.log(event==null);
};

//익명함수를 이벤트 함수로 사용!! > 함수를 오용(X) > 안정성, 가독성
document.all.btn2.onmousedown = function () {
    alert(event.buttons);
};

 

■ 타이머를 사용한 상황

setTimeout(m8, 1000);

function m8() {
    alert('beep');
}

setTimeout(function() {
    alert('beep!!');
}, 1000);

 

■ 사용자 정의객체 상황

 //사용자 정의 객체

let hong = {
    name : '홍길동', //객체 멤버 변수
    age : 20,
    address : '서울시 강남구',
    hello : function() {
        //객체 메소드
        console.log('안녕하세요. 저는 ' + this.name + ' 입니다.')
    }
};

console.log(hong.name);
hong.hello();