this, binding

• this 키워드는 실행 컨텍스트 자체를 의미하며, 함수로 어떻게 호출하느냐에 따라 달라진다

  • this 예시 코드

• binding은 특정 값을 가리키도록 고정하는 것을 의미하는데, this 키워드로 binding 할땐 아래 방법들로 호출할 수 있다

  const obj = { name: 'Jacob' };
  
  function hello1() {
  	console.log(this.name);
  }
  
  function hello2(param) {
  	console.log(param + ', ' + this.name);
  }
  
  function hello3(param, punc) {
  	console.log(param + ', ' + this.name + punc);
  }
  
  // bind : this 값을 영구적으로 설정
  const boundHello1 = hello1.bind(obj);
  boundHello1(); // Jacob
  
  // call : this를 명시적으로 설정, 파라미터 추가
  hello2.call(obj, 'Hi'); // Hi, Jacob
  
  // apply : call과 유사, 파라미터가 배열
  hello3.apply(obj, ['Hi', '!!!']); // Hi, Jacob!!!
  

Closure (클로저)

• 함수와 그 함수가 선언된 환경의 조합

function 외부함수(외부변수) {
  return function 내부함수() {
    console.log(외부변수);
  };
}

const 예제클로저 = 외부함수('클로저 예제');
예제클로저();

• 위 예제에서 내부함수 + 외부변수의 조합을 Closure라 칭한다
• Closure 함수를 호출할 때 외부변수에 접근 및 활용할 수 있는데, 이는 상태를 유지하거나 또는 데이터를 은닉할 때 활용할 수 있다

Hoisting

• 호이스팅 의미는 무언가를 끌어올린다는 뜻인데, Javascript에선 변수나 함수를 상단으로 끌어올리는 특징이라 할 수 있다

testFunc();

function testFunc() {
	console.log("Hoisting Test!");
}

• 위 예제에선 testFunc란 함수 호출이 먼저 나오고, 그 다음 함수 선언이 나오기에 컴파일 에러가 발생할듯 하지만 Hoisting 특징으로 인해 에러 없이 동작하게 된다
• 이는 컴파일 할때 호출한 코드를 보고 testFunc 함수를 메모리에 먼저 올린 후 이후 코드에 접근하기에 이상 없이 실행되는 것

Prototype

• Javascript에서 객체 상속을 구현하는 메커니즘
• 모든 객체는 다른 객체를 참조하는 프로토타입 링크를 갖고 있으며, 브라우저 콘솔로는 prototype 속성을 같이 확인할 수 있다

• 위와 같이 Foo를 여러개 선언하여도 프로토타입 링크를 따라가 참조하기에 필요한 속성들을 상속받을 수 있는 것
  • 이는 반대로 프로토타입이 수정되면 의도치 않게 상속 받은 객체들은 동작하지 않을 수도 있다
• 프로토타입은 모든 객체가 공유하고 있기에, 각 객체들이 복사 없이 상속받을 수 있어 리소스 활용을 최적화 시킬 수 있다