[Javascript] callback 함수를 활용한 일반 함수와 화살표 함수 사용 및 this의 차이점 알아보기

callback 함수 이해하기

callback 함수는 다른 코드에서 넘어오는 즉 다른 함수의 인자로 사용되는 함수를 말한다.

 

 

일반 함수에서 콜백함수 사용하기

함수를 호출할 때 값을 넘겨줄 수 있는데 그때 넘겨준 값을 받아주는 함수가 callback 함수이다.

let basic = {
  // aa 가 콜백함수
  a: function (aa) {
    console.log(aa);
  },
};

basic.a("hi");

let basic2 = {
  b: function (bb) {
    if (bb == 1) {
      console.log("1번 로그 출력");
    } else if (bb == 2) {
      console.log("2번 로그 출력");
    } else if (bb == 3) {
      console.log("3번 로그 출력");
    }
  },
};

basic2.b(2);

함수를 호출 할 때 넘겨진 값을 비교하여 로그를 출력

function basic3(cc) {
  if (cc.length == 1) {
    console.log("매개변수 1개 넘어 갔을 때 출력");
  } else if (cc.length == 2) {
    console.log("매개변수 2개 넘어 갔을 때 출력");
  } else if (cc.length == 3) {
    console.log("매개변수 3개 넘어 갔을 때 출력");
  }
}

function basic11(a) {
  basic3(a);
}
function basic22(a, b) {
  basic3(a, b);
}
function basic33(a, b, c) {
  basic(a, b, c);
}

basic3(basic11);
basic3(basic22);
basic3(basic33);

넘겨진 값으로 비교하여 출력 할수도 있지만 넘겨진 값의 갯수를 넘겨줄 수도 있다.

let arr = [1, 2, 3, 4, 5];

arr.map(function (a) {
  console.log("map : ", a);
});

let simmap = {
  smap: function (callback) {
    callback.forEach(function (i) {
      console.log("simmap : ", i);
    });
  },
};

simmap.smap(arr);

이런식으로 map()과 동일한 동작을 하는 함수를 작성 할 수 도 있다.

 

화살표 함수에서 콜백함수 사용하기

화살표 함수의 기본 형으로 () 부분에 매개변수를 입력하여 함수를 작성한다.

let arrow = () => console.log("hi");
arrow();

let arr2 = [1, 2, 3, 4, 5];
let arrow2 = () => {
  // i는 인덱스 요소 b는 인덱스 번호
  arr2.forEach(function (i, b) {
    arr[b] = i;
    console.log("화살표 함수 : " + arr[b]);
  });
};

arrow2();

일반 함수에서 map() 똑같은 기능을 하는 일반 함수와 같은 기능을 하는 화살표 함수를 만들어 봤다.

let arrow3 = (w3) => {
  if (w3.length == 1) {
    console.log("매개변수 1개 넘어 갔을 때 출력");
  } else if (w3.length == 2) {
    console.log("매개변수 2개 넘어 갔을 때 출력");
  } else if (w3.length == 3) {
    console.log("매개변수 3개 넘어 갔을 때 출력");
  }
};

let arrow31 = (a) => {
  arrow3(a);
};
let arrow32 = (a, b) => {
  arrow3(a, b);
};
let arrow33 = (a, b, c) => {
  arrow3(a, b, c);
};

arrow3(arrow31);
arrow3(arrow32);
arrow3(arrow33);

매개변수가 1 ~ 3개가 넘어갔을때 갯수에 맞춰 출력해주는 화살표 함수

 

 

일반 함수와 화살표 함수에서의 this 

this는 함수를 호출 할때 상위 객체를 참조하는 키워드로 일반 함수와 화살표 함수에서 정의된 this는 차이가 있다.

일반 함수의 this는 객체의 메소드로 호출된 경우 해당 객체를 가리키게 되지만 일반 함수로 호출될 경우에는 window를 가리키게 된다.

반면 화살표 함수는 함수를 정의할때 결정 되기 때문에 상위 스코프의 값을 참조한다.

 

let obj = {
  thia: function () {
    console.log("obj 안에 선언 된 일반 함수 " + this);
    let thie = () => {
      console.log("obj 안에 선언 된 화살표 함수 " + this);
    };
    thie();
  },
  thib: () => {
    console.log("obj 안에 선언 된 화살표 함수 " + this);
  },
};

function thic() {
  console.log("전역 공간에 선언된 일반 함수 " + this);
}

let thid = () => {
  console.log("전역 공간에 선언된 화살표 함수" + this);
};

obj.thia();
obj.thib();

thic();
thid();