• 자바스크립트 클로저란?
• 자바스크립트 프로토타입이란?

💬 Answer

🌏 함수형 프로그래밍

👉 함수형 프로그래밍이란?

소프트웨어가 커짐에 따라 복잡하게 엉킨 스파게티 코드를 유지보수 하는 것이 매우 힘들어, 이를 해결하기 위해 함수형 프로그래밍 패러다임에 관심을 갖게 되었다.
거의 모든 것을 순수 함수로 나누어 문제를 해결하는 기법.
작은 문제를 해결하기 위한 함수를 작성하여 가독성을 높이고 유지보수를 용이하게 함.

👉 클로저

클로저란 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.

내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다. 이러한 메커니즘을 클로저라고 한다.

function outter(){
    var title = 'coding everybody';  
    return function(){        
        alert(title);
    }
}
inner = outter();
inner();

이 경우 inner에서 outter이 호출되고 그다음 inner()에서 outter는 종료되지만, 외부함수의 지역변수 title이 출력된다.
즉, 클로저란 내부함수가 외부함수의 지역변수에 접근 할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 말한다.

👉 프로토타입

Java,Python등 객체 지향언어에서 많이 볼 수 있는 Class.
하지만 자바스크립트는 객체지향언어지만, Class는 없고, 프로토타입이라는 것이 있습니다.
(ES6에서 Class문법이 추가됨.)

JavaScript에서 기본 데이터 타입을 제외한 모든 것이 객체입니다.
객체가 만들어지기 위해서는 자신을 만드는데 사용된 원형인 프로토타입객체를 이용하여 객체를 만드는데, 이 때 만들어진 객체안에 __proto__속성이 자신을 만들어낸 원형을 의미하는 프로토타입 객체를 참조하는 숨겨진 링크가 있습니다. 이 링크를 프로토타입이라고 정의합니다.

function Person() {
  this.eyes = 2;
  this.nose = 1;
}
var kim  = new Person();
var park = new Person();
console.log(kim.eyes);  // => 2
console.log(kim.nose);  // => 1
console.log(park.eyes); // => 2
console.log(park.nose); // => 1

이 경우 메모리에는 eyes와 nose가 두개씩 총 4개 할당됩니다.
100개를 만들면 200개가 할당.

이런 문제를 프로토타입으로 해결.

function Person(){}
Person.prototype.eyes = 2;
Person.prototype.eyes = 1;

var kim = new Person();
var park = new Person();

이 경우 Person.prototype이란 빈 object가 어딘가 존재하고, Person함수로부터 생성된 객체(kim,park)들은 어딘가에 존재하는 Object에 있는 값을 사용합니다.
즉, eyes와 nose를 어딘가 넣어놓고, kim과 park이 공유해서 사용하는 것.

📘 참고

https://velog.io/@kyusung/함수형-프로그래밍-요약
https://mangkyu.tistory.com/111
https://opentutorials.org/course/743/6544
https://medium.com/@bluesh55/javascript-prototype-이해하기-f8e67c286b67