[JS] 함수

함수

메모리에 코드를 저장 할 수 있는 수단으로 function이라는 키워드를 사용하여 선언이 가능하다.  함수는 선언 후에 호출이 되어야 저장된 코드가 실행되며 일반함수와 익명함수가 존재한다.

함수 선언

function를 활용하여 선언한다. 함수 선언 시 중괄호를 유효범위 혹은 스코프라고 하며 전역변수와 지역변수 구분이 확실하다. (함수 스코프: var, 블록 스코프 : let, const)

일반함수 구문: function 함수명 ( ) { } → 호이스팅 기술을 지원한다.
익명함수 구문 : function ( )  { } → 변수에 대입이 가능하다.

※ 익명함수 호출 시에는 익명함수가 호출부 위에 선언이 되어 있어야한다.

※ 호이스팅이란?

→ 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것

// 일반함수 선언 (정의문) : fuction 함수명 () {}
function getMemberName() {
console.log("일반함수", "getMemberName");
}
// 익명함수 선언 : 변수명 (var, let, const) = fuction(){}
var fnGetMemberName = function () {
console.log("익명함수", "fnGetMemberName");
};
// 화살표함수 : 변수명 (var, let, const) = () => {};
var arrowFnGetMemberName = () =>
console.log("화살함수", "arrowFnGetMemberName");

함수 호출

선언된 함수명으로 호출을 할 수 있으며 '함수명( );' 방식으로 함수명 '( )'를 붙여줘야 호출이 된다. '( )' 에는 인수를 삽입하여 호출 할 수 있고 익명 함수를 호출시에는 대입된 변수명( )를 하여 함수 호출이 가능하다.

// 함수 선언 코드와 이어서
getMemberName(); //일반 함수 호출
fnGetMemberName(); //익명 함수 호출
arrowFnGetMemberName(); //화살 함수 호출

매개 변수가 있는 함수

함수호출시 값을 삽입하여 호출을 하게 되면 매개변수로 받을 수가 있으며 선언시 '()' 안에 매개변수명을 지정할 수 있다. 매개변수의 갯수만큼 호출 시 값을 넣어 함수를 호출 해야하며 매개변수 선언에는 var나 let 키워드가 필요없다.

구문 : function 함수명(매개변수명, 매개변수명 ….) {}
호출시 : 함수명(인수, 인수 …..);

function sum(n1, n2){
	console.log(n1 + n2);
}
sum(10,20);
var sum2 = function(n1, n2, n3){
	console.log(n1 + n2 + n3);
}
sum2(10,20,30);

return

함수 내부에 return 키워드를 사용할 수 있다. return 키워드와 값을 지정하게 되면 함수를 호출한 곳에 값을 전달하게 하며return 키워드를 만날 경우 함수는 종료 된다

구문 : return 값;

function returnCall(n1, n2){
	return n1 + n2;
}
//호출한 곳에 값을 전달 해준다.
var result = returnCall(10,20);
console.log(result);

재귀 함수

선언된 함수 내부에 자기 자신을 호출하는 방법으로 재귀호출은 꼭 필요한 상황이 아니면 지양해야 한다.

//카운팅 된값이 10 이상이면 리턴 하기 (재귀호출 종료하기)
var myFn = function(n){
console.log('함수 호출');
if(n == 10) return ;
myFn(n + 1);
};

내부 함수

함수 내부에 함수가 존재한다.

var myFn = function(){
    console.log('함수 호출');
    var subFn = function(){
            console.log('내부 함수 호출');
        }
    subFn();
};
myFn();

고차 함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수입니다.

function fnArgFuction(fn) {
    console.log(fn, "고차함수");
    fn("홍길동");
}

콜백 함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수입니다. 매개변수로 받은 함수를 실행 시 인수값을 삽입하여 실행할 경우, 인수로 삽입된 함수에서 매개변수로 값을 받을 수 있습니다. (비동기화 처리 시 주로 사용된다.)

fnArgFuction(function (name) {
    console.log(name, "콜백함수");
});

 

고차함수와 콜백함수

매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고 하며, 매개변수를 통해 콜백 함수를 전달받는 함수를 고차함수 라고 한다

객체 생성자 함수

함수를 new 연산자를 활용하여 객체화 시킬 수 있는 방법입니다.

• 함수 내부에 this 키워드 활용
• new 연산자를 활용하여 객체화 되었을 시 Object형태로 변환
• this 키워드로 선언된 변수들은 외부에서 접근 가능
• var 혹은 let으로 선언된 변수들은 외부에서 접근 불가능
• this 키워드 혹은 함수가 확장(prototype)이 되었다면 그 함수는 객체 생성자 함수이다.
• 객체 생성자 함수 선언 시 함수명은 주로 파스칼 표기법으로 앞글자는 대문자로 표기한다.

//선언 - 일반적인 함수와 동일
var MyFn = function(){
    //var 혹은 let으로 선언된 변수는 외부에서 접근 불가능
    var name = '홍길동'; 
    this.age = 20;
}
var mf = new MyFn();
//this 키워드를 활용하여 선언된 변수는 외부에서 접근가능
console.log(mf.age);

//정보은닉
var MyFn2 = function(){
    var name = '홍길동';
    this.getName = function(){
         return name;
    }
    this.setName = function(myName){
         name = myName;
    }
}
var mf2 = new MyFn2();
console.log(mf2.getName()); //결괏값 홍길동

- prototype (확장)

원형함수를 확장시킨다. (상속 개념)

함수명.prototype.변수명 = 값 혹은 함수

MyFn.prototype.age = 20;

//prototype으로 확장 후 객체화
var mf = new MyFn();
console.log(mf.age);

MyFn.prototype.getAge = function(){
    //prototype이나 this 키워드로 생성된 변수 혹은 메서드는 this 키워드로 활용하여 접근
    return this.age;
}
console.log(mf.getAge());

-즉시 실행 함수

정의되자마자 즉시 실행되는 함수

(function(className) {
    console.log(className);
})('name');

사용이유

• 필요없는 전역 변수의 생성을 줄일 수 있다.
• private한 변수를 만들 수 있다.

-클로저 (closer)

함수 실행시 상위 함수 내의 환경을 기억하고 있으며 주로 콜백함수와 같이 쓰인다.(비동기적인 코드에서 쓰임)

function closerFn(name) {
    var memberName = name;
    return function () {
      return memberName;
    };
}

//예시
const ClickBtn = document.getElementById("ctnBtn");
const resultH4 = document.getElementById("result");
const closureFun = (function(){
    let cnt = 0;
    return function(){
        cnt++;
        return cnt;
    }
})();
ClickBtn.addEventListener("click", function(){
    resultH4.innerHTML = "클릭횟수 : " + closureFun();
});

장점

• 데이터를 보존할 수 있다.
• 정보 접근을 제한한다.(캡슐화)
• 모듈화에 유리하다.