[Javascript] 콜백함수,this 키워드

콜백함수란?

• 콜백함수는 간단하게 '함수 안에서 실행하는 또 다른 함수' 이다. 즉,파라미터로 변수가 아닌 함수를 전달하는 것을 말하며, 함수이름 없이 익명으로도 전달 가능한 함수를 일컫는다.
• 콜백함수가 유용한 이유는, 콜백 함수만을 바꿔줌으로서 하나의 함수를 여러가지로 응용할 수 있기 때문이다.

콜백함수 사용원칙

1. 익명의 함수 사용

   콜백함수는 함수의 내부에서 실행되기 대문에 이름을 붙이지 않아도 된다.

   array.forEach(function(x){
   	console.log(x)
   });

2. 함수의 이름(만) 넘기기
   자바스크립트는 null과 undefined 타입을 제외하고 모든 것을 객체로 다룬다. 즉, 함수를 변수 or 다른 함수의 변수처럼 사용할 수 있다. 함수를 콜백함수로 사용할 경우 함수의 이름만 넘겨주면 된다. 즉,

   ()를 붙일 필요가 없다.

콜백함수 주의점

1. this를 사용한 콜백함수

   this 짚고 넘어가기

   1. 그냥 쓰거나

   console.log(this)
   //window {어쩌고} 출력

   함수 안에서 쓰면 this는 window를 뜻한다.

   function a(){console.log(this)}
   	a();
   	// window {어쩌고} 값이 출력됨

   Q. window가 무엇?

   A. Window는 모든 전역변수,함수,Dom을 보관하고 관리하는 전역객체이다. 예를 들면, document.getElementById(),alert(),console.log() 등등 함수들을 보관하는 보관소(큰 오브젝트) 라고 생각하면 된다.

   2. strict mode 일 때 함수 안에서 this를 쓰면 undefined 이다.

   'use strict';
   function a(){
   	console.log(this)
   }
   a();
   //undefined 출력

   IE 10 버전 이상에선 'use strict'라는 키워드를 페이지 최상단에 추가하면 strict mode로 자바스크립트 작성이 가능한데, 이 strict mode는 var 키워드 없이 변수를 선언하거나, 변수를 arguments라는 이상한 키워드로 선언하거나 등의 실수를 방지해준다. 이러한 strict mode에선 this 키워드를 일반 함수 안에서 불렀을 때, undefined 라는 값으로 강제 지정해준다.

   3. method (Object 안의 함수)에서 this를 쓰면 this는 메소드를 가지고 있는 오브젝트를 뜻한다.

   object 자료형에는 함수를 넣을 수 있다. 이러한 함수들을 method 라고 한다.

   var obj = {
    data:'name',
    func : function(){console.log(this);
   }
   obj.func();
   //결과값 : {data:'name',func:f}

   이 method 안에 this를 쓰면 호출시{data:'name',func:f} 이러한 값이 출력되는데, 이는 obj 를 뜻한다.

   즉, method 안에서 this를 쓰면 this는 메소드를 가지고 있는 오브젝트를 뜻한다.

   4. constructor 안에서 쓰면 constructor 로 새로 생성되는 오브젝트를 뜻한다.

   - 자바스크립트에서 오브젝트를 여러개 만들고 싶을 경우, 복사하는 것이 아닌 constructor 라는 것을 이용한다.

   function constructor(){
     this.name = 'Park'
   }
   var obj2 = new constructor();

   여기에서 this는, constructor로부터 새로 생성될 오브젝트를 의미한다.

   new 키워드를 이용하면 새로운 object를 생성할 수 있게 된다.

   4. eventlistener 안에서 쓰면 this는 e.currentTarget 이라는 의미이다.

   document.getElementById('btn').addEventListner('click',function(e){ console.log(this) });

   여기서 this를 소환하면 e.currentTarget과 같은 의미이다. 즉, 지금 이벤트가 동작하는 곳을 뜻한다.

요약 : this가 뜻하는 바는 this가 어떤 함수 안에 들어있는 지만 잘 체크하면 됨

참고 : arrow function

arrow function 사용 이유?

1. 함수 본연의 기능을 아주 잘 표현한다.

2. 소괄호 생략이 가능하다.

3. 중괄호 생략도 가능하다.

var multi = (x)=>{return x*2}
var multi2 = x => {return x*2}
//파라미터가 하나라면 소괄호 생략 가능
var multi3 = x => x*2;
//return 한줄 뿐이라면 중괄호와 return 생략 가능

arrow function 과 this 관계

arrow function 을 쓰면 내부에서 this값을 쓸 때, 밖에 있던 this값을 그대로 사용한다.

즉, 함수가 쓰인 위치에 따라 내부의 this값은 변하는데, arrow function 은 어디서 쓰든간에 내부의 this값을 변화시키지 않는다.

var obj = {
  func:function(){console.log(this)}
}
obj.func()
//결과 : 함수를 갖고 있는 object인 obj가 출력
var obj2 = {
  func : ()=>{console.log(this)}
}
obj2.func()
//결과 : window가 출력
// why? this 값은 함수를 만나면 항상 변하는데, arrow function안에서는 변하지 않고 밖에 있던 this인 window를 그대로 쓴다.