Section 5. closure and prototype

Udemy - JavaScript: The Advanced Concepts

Section 5. Closures and Prototypal Inheritance

함수

함수는 Object

• code : 실행시킬 코드
• name (optional): 함수명
• 함수.prototype: { call, apply, bind, ... }
• 함수. __proto__ === Object.prototype : {toString, hasOwnProperty, ...}

함수는 1급 객체

일반적으로 다른 객체들에 적용 가능한 연산을 모두 지원하는 객체

• 변수에 할당 가능
• 객체의 인자로 넘기기 가능
• 객체의 리턴값으로 리턴 가능

Higher Order Function

함수를 매개변수나 return값으로 쓰는 경우

const multiplyBy = (num1) => {
  return function (num2) {
    return num1 * num2;
  }
}
//const mulitpleBy = (num1) => (num2) => num1*num2

const multiplyByTwo = multiplyBy(2);

클로저

MDN 정의 : 함수와 함수가 선언된 어휘적 환경의 조합
내 이해: 함수와, 그 함수가 참조하고있는 lexical 환경의 변수들

사용법 1. 메모리 절약

function heavyDuty() {
  const bigArray = new Array(7000).fill('😄');
  console.log('new array~~~');
  return (item) => bigArray[item];
}

const getHeavyDuty = heavyDuty();
console.log(getHeavyDuty(699));
console.log(getHeavyDuty(699));
console.log(getHeavyDuty(699));

사용법 2. 캡슐화

const makeButton = () => {
  let timer = 0;
  const passTime = () => timer++;
  const watchTime = () => console.log(timer);
  const launch = () => {
    timer = -1;
    return '💥';
  }

  setInterval(passTime, 1000);
  return {watchTime}
}

const launcher = makeButton();
launcher.watchTime()

주의사항

• 스코프체인을 타고 올라가므로 약간 느릴수있고
• 잘못쓰면 메모리누수의 원인이 됨

Prototype

JS는 프로토타입 기반 객체지향 프로그래밍

const dragon = {
  name: 'Tanya',
  fire: true,
  fight: function () { console.log("-100HP") },
  sing: function () { console.log(`I'm ${this.name} lalala~~~`) },
}

const lizard = {
  name: 'Kiki',
  fight: function () { console.log("-50HP") },
}

lizard.__proto__ = dragon; //보여주기용. 이건 성능 나쁘니 아래처럼 써야함

//let lizard = Object.create(dragon);
//lizard.name = 'Kiki';
//lizard.fight = function () { console.log("-50HP") };

lizard.sing() //lalala~~ 나한테 없는건 가져와쓰고
lizard.fight();  //1 : 나한테 있는건 overwrite

dragon.isPrototypeOf(lizard); //ture
lizard.hasOwnProperty('name'); //true
lizard.hasOwnProperty('fire'); //false

함수만 prototype 속성을 갖는다

직접 만든 함수 뿐 아니라, Object(), Array(), Function() 등도 object, array, function 객체를 생성할 때 사용하는 함수이므로 prototype 속성이 있다.

const a = {};
function b (){};

console.log(a.prototype); //undefined
console.log(b.prototype); //{constructor: ƒ}

console.log(typeof {});  //object
console.log(typeof Object); //function

함수로 내장함수 바꾸기

그러나 prototype를 직접 수정하는건 위험하니 다른 방법을 쓰자!

Array.prototype.map = function() {
  return this.join(', ');
}

console.log([1,2,3].map())	// 1, 2, 3

읽어본 글

https://www.zerocho.com/category/JavaScript/post/5741d96d094da4986bc950a0
https://ko.javascript.info/prototypes