일반함수, 화살표 함수(Arrow function)에서 this

일반함수

• constructor를 내장 (constructor는 들어있는 게 많아서 무거움)
  
  
• 객체의 메서드로 많이 사용 (this를 찾기 위해)
  
  
• 일반함수에서 사용하는 this
  : 나를 호출한 대상을 찾음
  
  

다양한 예시

// 일반함수에서 this
function func() {
   console.log(this); // Window
}
func(); // 호출한 대상이 없기 때문에 전역객체 Window가 출력

// 객체 안의 일반함수(메서드)에서 this
let newJeans = {
   name: '민지',
   age: 20,
   sayHi: function () {
      console.log(this); // {name: '민지', age: 20, sayHi: ƒ}
   }
}

newJeans.sayHi(); // sayHi를 호출한 newJeans가 출력

// 객체 안의 객체 안의 일반함수(메서드)에서 this
let newJeans = {
   name: '민지',
   age: 20,
   sayHi: {
      hello: function () {
         console.log(this); // {hello: ƒ}
      }
   }
}

newJeans.sayHi.hello(); // hello를 호출한 sayHi가 출력

// 헷갈리는 문제
let newJeans = {
   name: '민지',
   age: 20,
   sayHi: function () {
      console.log(this); // 1번 {name: '민지', age: 20, sayHi: ƒ}

      function hello() {
         console.log(this); // 2번 Window 
      }

      hello();
   }
}

newJeans.sayHi();
/* 
1번
: sayHi를 호출한 것은 newJeans이기 때문에 객체 newJeans가 출력

2번
: hello를 호출한 대상은 없음. sayHi는 감싸고 있을 뿐 직접 호출한 것이 아니다.
그래서 전역객체인 Window가 출력
*/

📍주의)
스코프, 괄호로 감싸준 대상이 아닌 호출한 대상을 찾음.
그래서 호출한 대상이 없으면 전역객체인 Window 반환

---

화살표함수 (Arrow function)

• constructor를 내장하지 않음
  
  
• 메서드 안의 함수로 많이 사용 (상위 this를 가져오기 위해)
  
  
• 화살표 함수에서 사용하는 this
  : 자체를 바인딩(가지지) 않음
  부모나 상위요소가 사용한 this 값을 그대로 사용
  (일단 주변에서 찾고 없으면 상위로 감. 그래서 제일 상위인 Window를 찾아가기도 함)
  
  

다양한 예시

// 화살표 함수에서 this
let func = () => {
   console.log(this); // Window
}
func(); // 상위의 값을 찾아가다 제일 상위인 Window 출력

// 객체 안의 화살표 함수(메서드)에서 this
let newJeans = {
   name: '민지',
   age: 20,
   sayHi: () => {
      console.log(this); // Window
   }
}

newJeans.sayHi(); // 상위의 값을 찾아가다 제일 상위인 Window 출력

// 객체 안의 객체 안의 화살표 함수(메서드)에서 this
let newJeans = {
   name: '민지',
   age: 20,
   sayHi: {
      hello: () => {
         console.log(this); // Window
      }
   }
}

newJeans.sayHi.hello(); // 상위의 값을 찾아가다 제일 상위인 Window 출력

// 헷갈리는 문제1 - 화살표 함수 안의 일반함수
let newJeans = {
   name: '민지',
   age: 20,
   sayHi: () => {
      console.log(this); // 1번 Window 

      function hello() {
         console.log(this); // 2번 Window 
      }

      hello();
   }
}

newJeans.sayHi();

// 헷갈리는 문제2 - 화살표 함수 안의 화살표 함수
let newJeans = {
   name: '민지',
   age: 20,
   sayHi: () => {
      console.log(this); // 1번 Window 

      let hello = () => {
         console.log(this); // 2번 Window 
      }

      hello();
   }
}

newJeans.sayHi();

// 헷갈리는 문제3 - 일반함수 안의 화살표 함수
let newJeans = {
   name: '민지',
   age: 20,
   sayHi: function () {
      console.log(this); // 1번 {name: '민지', age: 20, sayHi: ƒ}

      let hello = () => {
         console.log(this); // 2번 {name: '민지', age: 20, sayHi: ƒ}
      }

      hello();
   }
}

newJeans.sayHi();

// 고차함수 사용시 - forEach의 콜백함수를 일반함수로 사용
let newJeans = {
   name: '민지',
   total: 0,
   num: [10, 20, 30, 40, 50],
   numTotal: function () {
      this.num.forEach(function (item) { // forEach에 콜백함수로 일반함수가 들어감
         this.total += item; // 일반함수에서 호출한 대상이 없어서 this는 Window
      })
      return this.total; // numTotal은 newJeans에 의해 호출되었음으로 newJeans.total인 0이 출력
   }
}

console.log(newJeans.numTotal()); // 0

// 고차함수 사용시 - forEach의 콜백함수를 화살표 함수로 사용
let newJeans = {
   name: '민지',
   total: 0,
   num: [10, 20, 30, 40, 50],
   numTotal: function () {
      this.num.forEach((item) => { // forEach에 콜백함수로 화살표 함수가 들어감
         this.total += item; 
        /*
        	상위요소인 numTotal이 가진 this 값이 newJeans이기 때문에 여기서 this는 newJeans임.
        	즉, this.total == newJeans.total
        */
      })
      return this.total; // 150
   }
}

console.log(newJeans.numTotal());

---

축약된 메서드 (Concise Method)

• ES6 신문법
• 코드 작성 시 : function 생략
• constructor를 내장하지 않음
• Concise Method에서 사용하는 this
  : 일반함수처럼 나를 호출한 대상을 찾음

// 기본 사용
const std = {
  name : 'song',
  num : 20231205,
  sayHi(){ // 기존 `sayHi : function(){`에서       `: function`이 생략된 모습
     console.log(`안녕, 나는 ${this.name}라고 해`);
  }
}