03Dec2019 TIL

Today I learned :

• arrow function vs ES5 function
• .call() / .apply()
• .bind()
• Array-like Object (nodes / els / arguments) 
  => Plus, How I can change array-like Object into Array for using array methods! : Array.from()

---

 

오늘 개념 없는 회사 기사 놈 때문에 열 받은 마음이 쉽게 가라앉지 않아,

맥주 두캔 벌컥 마시고 자리에 차분히 앉아 어제 이해하지 못한 채 남겨둔 것을 공부했다.

 

 .call() 과  .apply() 호출 매소드의 효용과 this를 이해하는 것이 관건이었다. 

let monkey = {
  name : 'Kiki',
  callName : function () {
 	console.log(`Hi ${this.name}`);
    }
 };
 
 let monkey2 = {
   name : 'Boba'
 };
 
 monkey.callName();					// 'Hi Kiki'
 monkey.callName.call(monkey2);				// 'Hi Boba'

 

monkey2 객체에 굳이 다음과 같은 코드를 입력하지 않고도,

 

monkey2.callName = function () {console.log(`Hi ${this.name}`)}

 

 .call()과  .apply() 메소드의 this에 내가 원하는 객체 이름을 넣으면, 간단하게 'Hi Boba'를 얻어낼 수 있는 것이다. 

즉, 해당 메소드는 함수의 this 를 조작하여 기존의 함수를 재활용할 수 있는 유용한 기능이었다!

 

 

 

 .bind() 는 앞선 호출 매소드처럼 this를 조작하지만, 함수를 호출하진 않는다. 

 

let result = monkey.callName.bind(monkey2);		//함수를 실행시키진 않는다.
result(); 		// 'Hi Boba'

 

 

 

아 슬슬, 그동안 배웠던 것을 블로그에 노트 필기 했던 것 처럼 정리해야하는데,

넘나 귀찮고 시간이 많이 걸리는 것... 일주일에 요일을 지정해 강제로 정리해야겠다. 더 쌓이기 전에!

아날로그적 인간이라 노트 필기를 해가며 자주 보는게 더 익숙하긴 한데,

이렇게 또 블로그에 예쁘게 보여주는 기능이 있어 이 공간에 자주 정리해줘야겠다는 생각도 듬...