📆 2025.04.24 ‐ Advanced JavaScript: Functions, Prototypes, Closures, and Classes

🧠 배운 점 & 정리

오늘 공부하면서 인사이트, 개념 요약 등

• 프로토타입 체인을 이용한 상속 기능

  • 하위 생성자의 프로토타입을 상위 생성자의 객체로 지정

  • 상위 생성자의 모든 속성을 물려받아 사용할 수 있음

  • 상속 ex03-04.js

    • 중복속성

      /**
       * 고등학교 성적관리 생성자 함수(총점과 평균 계산)
      * @param {number} kor 국어 점수
      * @param {number} eng 영어 점수
      */
      function HighSchool(kor, eng) {
        // 속성 초기 화
        this.kor = kor;
        this.eng = eng;
      }
      
      HighSchool.prototype.sum = function () {
        return this.kor + this.eng;
      };
      
      HighSchool.prototype.avg = function () {
        return this.sum() / 2;
      };
      
      const s1 = new HighSchool(100, 91);
      console.log("고등학교 총점", s1.sum());
      console.log("고등학교 평균", s1.avg());
      

      

      /**
       * 대학교 성적관리 생성자 함수(총점, 평균과 학점 계산)
      * @param {number} kor 국어 점수
      * @param {number} eng 영어 점수
      */
      function College(kor, eng) {
        this.kor = kor;
        this.eng = eng;
      }
      
      College.prototype.sum = function () {
        return this.kor + this.eng;
      };
      
      College.prototype.avg = function () {
        return this.sum() / 2;
      };
      College.prototype.grade = function () {
        const avg = this.avg();
        if (avg >= 90) {
          return "A";
        } else if (avg >= 80) {
          return "B";
        } else if (avg >= 70) {
          return "C";
        } else if (avg >= 60) {
          return "D";
        } else {
          return "F";
        }
      };
      
      const c1 = new College(80, 91);
      console.log("대학교 총점", c1.sum());
      console.log("대학교 평균", c1.avg());
      console.log("대학교 학점", c1.grade());

      

    • 상속 받는 코드
      

      /**
       * 고등학교 성적관리 생성자 함수(총점과 평균 계산)
      * @param {number} kor 국어 점수
      * @param {number} eng 영어 점수
      */
      function HighSchool(kor, eng) {
        // 속성 초기 화
        this.kor = kor;
        this.eng = eng;
      }
      
      HighSchool.prototype.sum = function () {
        return this.kor + this.eng;
      };
      
      HighSchool.prototype.avg = function () {
        // 소수 첫째자리에서 반올림한다
        return Math.round(this.sum() / 2);
      };
      
      const s1 = new HighSchool(100, 91);
      console.log("고등학교 총점", s1.sum());
      console.log("고등학교 평균", s1.avg());

      

      /**
       * 대학교 성적관리 생성자 함수(총점, 평균과 학점 계산)
      * @param {number} kor 국어 점수
      * @param {number} eng 영어 점수
      */
      function College(kor, eng) {
        this.kor = kor;
        this.eng = eng;
      }
      
      // College가 HighSchool을 상속 받는다
      College.prototype = new HighSchool();
      College.prototype.**constructor** = College;
      
      College.prototype.grade = function () {
        const avg = this.avg();
        if (avg >= 90) {
          return "A";
        } else if (avg >= 80) {
          return "B";
        } else if (avg >= 70) {
          return "C";
        } else if (avg >= 60) {
          return "D";
        } else {
          return "F";
        }
      };
      
      const c1 = new College(80, 91);
      console.log("대학교 총점", c1.sum());
      console.log("대학교 평균", c1.avg());
      console.log("대학교 학점", c1.grade());

      constructor 메서드는 클래스의 인스턴스 객체를 생성하고 초기화하는 특별한 메서드입니다.
      

      • gpt 설명

        • HighSchool: 점수 → sum(), avg() 계산만 담당
        • College: HighSchool 기능 + grade() 확장
        • College.prototype = new HighSchool() 를 통해 상속 구현
        • constructor는 다시 College로 되돌려줘야 정확함

      • constructor란?

        • 🔧 constructor란?

          • constructor는 객체의 프로토타입(prototype) 객체에 기본으로 포함된 속성이야.
          • 이 속성은 해당 객체가 어떤 생성자 함수에 의해 생성되었는지를 가리켜.
          • 모든 함수는 기본적으로 .prototype.constructor 속성을 가지고 있어.

          예시:

          function HighSchool(kor, eng) {
            this.kor = kor;
            this.eng = eng;
          }
          
          console.log(HighSchool.prototype.constructor === HighSchool); // ✅ true
          

          이 말은 즉,

          const s1 = new HighSchool(100, 90);

          를 했을 때, s1.constructor === HighSchool 이 성립해.

          왜냐면 s1.__proto__ === HighSchool.prototype 이고, 그 안에 있는 .constructor가 HighSchool을 가리키니까!

          ---

        • 🔁 근데 상속할 때 문제가 생겨!

          College.prototype = new HighSchool();

          이렇게 상속하면 College.prototype은 이제 HighSchool의 인스턴스가 되니까,

          College.prototype.constructor는 HighSchool을 가리키게 돼.

          console.log(College.prototype.constructor === HighSchool); // ❌ 우리가 원하는 게 아님

          그래서 원래의 생성자 정보가 꼬이게 되고, 이걸 명시적으로 다시 설정해줘야 해:

          College.prototype.constructor = College;

          이렇게 하면:

          const c1 = new College(80, 91);
          console.log(c1.constructor === College); // ✅ true

          ---

        • 🔍 왜 constructor를 바르게 지정해야 할까?

          1. 디버깅/로깅할 때 어떤 생성자로 만들어졌는지 알 수 있음
          2. 클래스 체계를 흉내 낼 때 정확한 정보 제공
          3. 어떤 프레임워크/라이브러리는 constructor 값을 보고 타입 분기 처리하기도 함

          ---

        • 📌 요약

          • .constructor는 어떤 생성자 함수로 만들어졌는지 알려주는 속성
          • 상속할 때 prototype = new Parent() 하면 .constructor가 꼬이므로 constructor를 직접 재지정해줘야 함
          • 바르게 지정해두면 디버깅이나 타입 확인에서 유리함

  • 상속 ex03-04.js를 ex03-05.js로
    HighSchool → College 상속 흐름 시각 정리

    /* ex03-04 */
    /**
     * 고등학교 성적관리 생성자 함수(총점과 평균 계산)
      * @param {number} kor 국어 점수
      * @param {number} eng 영어 점수
      */
    function HighSchool(kor, eng) {
      // 속성 초기 화
      this.kor = kor;
      this.eng = eng;
    }
    
    HighSchool.prototype.sum = function () {
      return this.kor + this.eng;
    };
    
    HighSchool.prototype.avg = function () {
      // 소수 첫째자리에서 반올림한다
      return Math.round(this.sum() / 2);
    };
    
    const s1 = new HighSchool(100, 91);
    console.log("고등학교 총점", s1.sum());
    console.log("고등학교 평균", s1.avg());
    
    {...}
    console.log(College.prototype);
    // College의 프로토타입 출력
    

    

    /* ex03-05 */
    {...}
    /**
     * 대학교 성적관리 생성자 함수(총점, 평균과 학점 계산)
      * @param {number} kor 국어 점수
      * @param {number} eng 영어 점수
      */
    function College(kor, eng) {
      this.kor = kor;
      this.eng = eng;
    }
    
    // College가 HighSchool을 상속 받는다
    
    function inherite(Parent, Child) {
      // 첫번째 방법
      const F = new Function();
      F.prototype = HighSchool.prototype; // F의 프로토타입을 HighSchool의 프로토타입으로 변경
      College.prototype = new F(); // F인스턴스 생성후 College의 프로토타입으로 대입한다
      College.prototype.constructor = College;
      
      // 2번째 방법
      Child.prototype = Object.create(Parent.prototype);
      //create함수는 지정한 prototype 객체를 참조하는 인스턴스 생성
      Child.prototype.constructor = Child; 
      // 자식 생성자의 constructor 프로퍼티 복원
    }
    
    inherite(HighSchool, College);
    
    College.prototype.grade = function () {
      const avg = this.avg();
      if (avg >= 90) {
        return "A";
      } else if (avg >= 80) {
        return "B";
      } else if (avg >= 70) {
        return "C";
      } else if (avg >= 60) {
        return "D";
      } else {
        return "F";
      }
    };
    
    const c1 = new College(80, 91);
    console.log("대학교 총점", c1.sum());
    console.log("대학교 평균", c1.avg());
    console.log("대학교 학점", c1.grade());
    
    console.log(College.prototype);
    // College의 프로토타입 출력
    

    

• Class 사용

  • ECMAScript6(2015)에 추가된 키워드

  • 객체지향 언어의 class와 비슷한 방식으로 생성자 함수를 기술

  • 객체를 생성하고 prototype 기반의 상속을 보다 명료하게 표현

  • class는 사실 **함수**이며 class 선언문과 class 표현식 방식으로 사용

  • class 선언문

    // 기본 타입
    class 클래스명 {...}
    // 예시
    class hi {...}

    • class 표현식

    // 기본 타입
    const 변수 = class {...}
    // 예시
    const hi = class {...}

  • Class body와 메서드 정의

    클래스의 바디에 클래스 멤버변수(속성)와 메서드 정의

    멤버변수의 초기화는 Constructor 메서드에 정의
    

  • Constructor 메서드(생성자)

    • 객체를 생성하고 초기화 하는 메서드(생략 가능)
    • 주로 클래스 멤버변수를 초기화하는 작업
    • constructor라는 이름으로 작성
    • 하나만 작성 가능
    • super()로 부모의 생성자 호출 가능

    // ✅ Class 문법 (ES6)
    class HighSchool {
      constructor(kor, eng) {
        this.kor = kor;
        this.eng = eng;
      }
    }
    
    const s1 = new HighSchool(100, 90);
    console.log(s1.kor, s1.eng);
    

    // ✅ Function 생성자 방식
    function HighSchool(kor, eng) {
      this.kor = kor;
      this.eng = eng;
    }
    
    const s1 = new HighSchool(100, 90);
    console.log(s1.kor, s1.eng);
    

• 클로저

  • 클로저란

    • 실행이 끝난 외부 함수의 변수에 접근할 수 있는 내부 함수

    • 함수가 생성되는 시점을 기준으로 접근 가능한 변수는, 그 유효범위가 사라진 후에도 접근 가능

    • 클로저로 인해 유효 범위가 사라진 변수와 함수를 사용할 수 있고, 변수의 경우 그 값을 변경할 수도 있다.

    • ex04-01.js

      const topLevel = "최상위 변수";
      
      function outer() {
        const innerVal = "outer의 지역변수";
        console.log(topLevel); //=> 1️⃣
        console.log(innerVal); //=> 2️⃣
      }
      
      outer();
      console.log(topLevel); //=> 3️⃣
      console.log(innerVal); //=> 4️⃣
      /* 출력 순서
        1️⃣ 2️⃣ 3️⃣ (4️⃣는 에러) 
      */

      • 1️⃣ 전역 변수 topLevel은 함수 내부에서도 접근 가능하다.
        스코프 체인에 따라 하위 스코프에서 상위 스코프 변수를 찾는다.
      • 2️⃣ innerVal은 outer 함수 내부에서 선언된 지역 변수이다.
        함수 안에서는 자유롭게 참조 가능하지만 함수 밖에서는 불가하다.
      • 3️⃣ topLevel은 전역 변수이므로 함수 외부에서도 문제 없이 접근됨.
        전역 스코프에서 선언된 변수는 어디서든 참조가 가능하기 때문이다.
      • 4️⃣ innerVal은 outer 함수가 종료되면 사라지는 지역 변수이다.
        함수 밖에서 접근하면 ReferenceError가 발생하게 된다.

      ---

      const topLevel = "최상위 변수";
      
      function outer() {
        const innerVal = "outer의 지역변수";
        console.log(topLevel); // 1️⃣
        console.log(innerVal); // 2️⃣
        return innerVal;
      }
      
      outer();
      console.log(topLevel); // 3️⃣
      console.log(innerVal); // 4️⃣
      
      /* 출력순서
        1️⃣ 2️⃣ 3️⃣ (4️⃣는 에러)
      */

      • 1️⃣ topLevel은 함수 외부에서 선언된 전역 변수이며, 함수 내부에서 자동으로 참조된다. 자바스크립트의 스코프 체인 덕분에 하위 스코프 에서는 상위 스코프에 있는 변수에 접근할 수 있게 된다.
      • 2️⃣ innerVal은 outer 함수 안에서 선언된 지역 변수이기 때문에 해당 함수 내부에서만 유효하다. 지역 스코프는 함수 실행 시 생기며 함수 종료와 함께 메모리에서 제거된다.
      • 3️⃣ topLevel은 전역에 선언되어 있기 때문에 어디서든 접근 가능하다.
        함수 밖의 console.log(topLevel)도 전혀 문제 없이 실행된다.
        전역 변수는 전체 코드에서 공유 가능한 값이다.
      • 4️⃣ innerVal은 outer 내부에서 선언되었기 때문에 외부에서는 참조할 수 없다. 함수 밖에서 접근하려고 하면 ReferenceError 발생.
        
        이는 함수 스코프에 따른 정상적인 동작이다.

      ---

      const topLevel = "최상위 변수";
      
      function outer() {
        const innerVal = "outer의 지역변수";
        console.log(topLevel); // => 1️⃣
        console.log(innerVal); // => 2️⃣
        const innerFn = function () {
          console.log(innerVal); // => 3️⃣
        };
        innerFn();
      }
      
      outer();
      console.log(topLevel); // => 4️⃣
      console.log(innerVal); // => 5️⃣
      /* 출력 순서
      1️⃣ 2️⃣ 3️⃣ 4️⃣ (5️⃣는 에러)
      */

      • 1️⃣ 전역 변수는 함수 내부에서도 참조할 수 있는 스코프 체인을 가진다.
      • 2️⃣ 지역 변수는 선언된 함수 내부에서만 유효하며 외부에서는 불가하다.
      • 3️⃣ 중첩 함수는 상위 함수의 지역 변수까지 접근할 수 있는 클로저다.
      • 4️⃣ 전역 변수는 어디에서든 접근 가능하여 오류 없이 출력된다.
      • 5️⃣ innerVal 은 outer함수가 종료되면 메모리에서 제거되므로 오류.

      ---

      const topLevel = "최상위 변수";
      
      function outer() {
        const innerVal = "outer의 지역변수";
        console.log(topLevel); // => 1️⃣
        console.log(innerVal); // => 2️⃣
        const innerFn = function () {
          console.log(innerVal); // => 3️⃣
        };
        return innerFn;
      }
      
      const innerFn = outer();
      console.log(topLevel); // => 4️⃣
      // console.log(innerVal); // => 5️⃣
      innerFn(); // => 6️⃣
      /* 출력 순서
      1️⃣ 2️⃣ 4️⃣ 6️⃣ (5️⃣는 주석 처리)
      */

      • 1️⃣ 전역 변수는 하위 함수에서도 접근 가능하다. 스코프 체인 덕분이다.
      • 2️⃣ 지역 변수는 선언된 함수 내부에서만 접근 가능하다. 정상 출력된다.
      • 3️⃣ 내부 함수는 부모 함수의 지역 변수를 참조할 수 있다. (클로저)
      • 4️⃣ 전역 변수는 어디에서든 접근 가능하여 오류 없이 출력된다.
      • 5️⃣ innerVal 은 외부에선 접근할 수 없어 주석 해제 시 오류 발생한다.
      • 6️⃣ innerFn은 outer의 지역변수를 기억하는 클로저로 동작한다.

  ---

  • 커링(currying)

    • 여러개의 인자를 받는 함수를 단일 인자를 받는 함수의 체인으로 호출하도록 바꾸는 함수형 프로그래밍 기법 중 하나

      • sum(x, y) -> sum(x)(y)

    • 함수형 프로그래밍 언어에 많은 공헌을 한 미국의 수학자, 논리학자인 하스켈 커리의 이름에서 따옴

    • 함수의 가독성, 재사용이 좋아짐.

    • 마지막 인자가 입력될 때까지 함수의 실행 타이밍을 조절할 수 있음.

    • ex04-03.js

      function sum(a, b, c) {
        return a + b + c;
      }
      console.log(sum(10, 20, 30));
      
      // 함수 선언식
      let currySum = function (a) {
        return function (b) {
          return function (c) {
            return a + b + c;
          };
        };
      };
      
      // 화살표 함수
      currySum = (a) => (b) => (c) => a + b + c; 
      // 실행 할 코드가 a, b, c 각각 하나이기 때문에
      // 중괄호 생략 가능함
      
      console.log(currySum(10)(20)(30));

      📌 정리된 호출 구조

      currySum(10)
         └──> returns (b) => (c) => a + b + c
      
      currySum(10)(20)
         └──> returns (c) => a + b + c
      
      currySum(10)(20)(30)
         └──> returns 60

    • ex04-04.js, index.html

        <script src="https://unpkg.com/lodash@4.17.21/lodash.js"></script>

      lodash 라이브러리의 유틸 함수들을 웹에서 바로 사용하기 위해 추가한다. ✅

      const sum = function (x, y) {
        return x + y;
      };
      
      const currySum = _.curry(sum);
      
      console.log(sum(10, 20));
      
      console.log(currySum(30)(40));
      

      앞서 03에서 열심히 함수를 리턴하는 방식으로 커링을 직접 만들었지만,
      lodash의 _.curry를 쓰면 이런 코드를 자동으로 커링 함수로 변환해준다.

  ---

  • 캡슐화

    • 객체 내부에서만 접근 가능한 속성을 만들어 사용하고 외부에서는 해당 속성을 직접 접근하지 못하도록 만드는 객체지향 언어의 특징(C++, Java에서는 private 키워드로 지정가능)

    • 함수 내부에서 선언한 지역변수는 외부에서 접근하지 못하는 반면 내부 메서드인 클로저에서는 접근 가능하다는 특징을 이용해서 구현

    • ES2019에서 class 정의시 속성명이나 메서드명 앞에 #을 붙이면 해당 class 내부에서만 접근 가능한 private 속성과 메서드 정의 기능이 추가됨

    • ex04-02.js

      // count 속성과 ride(), getCount() 메서드 작성
      const Counter = function () {
        this.count = 0;
        this.getCount = function () {
          return this.count;
        };
        this.ride = function () {
          this.count++;
        };
      };
      
      const c = new Counter();
      c.ride();
      c.ride();
      
      c.count += 40;
      
      console.log("전체 탑승자", c.getCount()); 

      • ✅ 현재 코드의 주요 문제점

        1. count를 외부에서 직접 수정 가능함 (캡슐화 위반)
        • 아래 코드처럼 외부에서 count를 직접 조작할 수 있어:

          c.count += 40;

        • 이렇게 되면 ride() 메서드를 우회해서 값을 변경하는 게 가능하니까,내부 로직의 신뢰성을 깨뜨리게 돼.
        • 예를 들어 누군가 실수로 c.count = -999처럼 바꾸면 전체 로직이 무너짐.
        2. 객체의 상태 관리가 허술함
        • ride() 메서드는 count를 1씩 증가시키는 역할인데,외부에서 직접 count를 바꿔버리면 ride() 호출 여부와 무관해짐.
        • 즉, 내부 동작 추적이나 디버깅이 어려워지고, "진짜 몇 번 탔는가?"를 보장할 수 없음.

      ---

      // 계선점
      // count 속성과 ride(), getCount() 메서드 작성
      const Counter = function () {
        let count = 0;
        this.getCount = function () {
          return count;
        };
        this.ride = function () {
          if (count < 40) {
            count++;
          } else {
            console.log("정원이 초과되었습니다.!");
          }
        };
      };
      
      const c = new Counter();
      c.ride();
      c.ride();
      
      for (let i = 0; i < 40; i++) {
        c.ride();
      }
      
      console.log("전체 탑승자", c.getCount());
      

      • ✅ 개선된 점

        1. count가 클로저로 보호됨 (은닉화 성공)
        • let count = 0;이 생성자 함수 내부에 선언되어,외부에서는 count에 직접 접근하거나 수정할 수 없음.
        • 이제 c.count += 40 같은 조작은 불가능하고, 오직 메서드로만 조작 가능함.
        2. 불필요한 전역 변수 사용 제거됨
           • for문에서 let i = 0을 사용해, i가 블록 스코프 변수가 되었음.
           • 이전에는 i가 전역 변수로 암묵 선언되어 다른 코드에 영향을 줄 수 있었지만,이젠 안전하게 해당 블록 안에서만 동작함.
             
        3. 정원 제한 기능 추가로 안정성 향상
        • ride() 메서드에 count < 40 조건이 생겨, 최대 탑승 인원 제한 가능.
        • 초과 탑승 시 "정원이 초과되었습니다.!" 메시지를 출력하고 증가하지 않음.
        • 실세계 조건(예: 엘리베이터 인원제한 등)과 유사하게 제어 가능함.
        4. 캡슐화 + 로직 제어 동시 적용
        • 내부 상태는 외부에서 숨기면서, 탑승 조건까지 논리적으로 제어함.
        • 코드의 일관성, 안정성, 유지보수성 모두 향상됨.

  ---

  • Partial application

    • 기존 함수의 매개변수 중 일부를 미리 채워둔 상태의 함수

    • 커링된 함수를 일부 단계까지만 호출한 후 반환받은 함수를 나중에 나머지 인자를 전달해서 실행

    • ex02-17-05.js

      // 기존 ex02-17-05.js
      var count = 0;
      const myObj = {
        count: 0,
        visit: function(){
          // 방문자를 한명 증가시킨다.
          this.count++; // this = myObj
          const visit2 = function(){
            this.count++; // this = window
          };
          visit2();
        },
      };
      
      myObj.visit(); // this = myObj
      myObj.visit();
      console.log('방문자수', myObj.count); // 2

      // 변경된 ex02-17-05.js
      var count = 0;
      const myObj = {
        count: 0,
        visit: function () {
          // 방문자를 한명 증가시킨다.
          this.count++; // this = myObj
          const visitN = function (n) {
            this.count += n; // this = window
          };
          visitN.call(this, 2); // count를 2명 증가 => 1 + 2 = 3
          visitN.call(this, 2); // count를 2명 증가 => 3 + 2 = 5
      
          const visit3 = visitN.bind(this, 3);
          visit3(); // conut를 3명 증가 => 5 + 3 = 8 
          visit3(); // conut를 3명 증가 => 8 + 3 => 11 
        },
      };
      
      myObj.visit(); // this = myObj => 11
      myObj.visit(); 
      // 11 → 12(11 + 1) → 14(12 + 2) → 16(14 + 2) → 19(16 + 3) → 22(19 +3) 
      console.log("방문자수", myObj.count); // 22

      • ✅ 어떻게 바뀌었는가?

        항목	왼쪽 코드	오른쪽 코드
        내부 함수 이름	visit2 (매개변수 없음)	visitN (매개변수 n 사용 가능)
        호출 방식	그냥 호출 (visit2())	call, bind 사용해 this 명확하게 설정
        this 바인딩 문제	내부 함수에서 this는 window (또는 undefined)	call, bind로 this를 명시적으로 myObj로 설정
        유연성	방문자 1명씩 증가만 가능	n명씩 유동적으로 증가 가능
        재사용성	없음	있음 → 함수 재사용 가능 (visitN, visit3)

        ---

        • 💡 어떤 점이 좋은가?

          1. this 바인딩 문제 해결
          • 왼쪽에서는 visit2()를 일반 함수처럼 호출해서 this가 myObj가 아님
          • 오른쪽에서는 call, bind를 사용해 this를 myObj로 고정시켜 문제 해결됨
          2. 유연한 매개변수 처리
          • 왼쪽은 무조건 1씩 증가
          • 오른쪽은 n을 전달할 수 있어, 1명, 2명, 3명 등 자유롭게 설정 가능 → visitN(this, 2) → 방문자 2명 증가
          3. 재사용성 향상
          • 오른쪽의 visitN은 범용 함수로 여러 상황에서 재사용 가능
          • bind로 미리 this 고정해 만든 visit3은 나중에 반복 호출하기도 쉬움
          4. 코드 확장성 향상
          • 함수 하나만 바꾸면 여러 상황에 적용 가능 → 유지보수 쉬워짐
          • 이후 방문 수를 로그에 저장하거나 조건부로 제한할 때도 유용함

        ---

        • 📌 한줄 요약
          👉 this 바인딩 문제를 해결하고, 매개변수를 받아 유연하고 재사용 가능한 함수 구조로 개선한 점이 핵심!

      ---

      • ✅ bind()란?
        bind()는 함수의 this 값을 고정해서 새로운 함수를 반환하는 메서드야.
        단, 바로 실행되지는 않고 고정된 this를 가진 새 함수만 리턴해!

        ---

        • 🧠 핵심 개념 정리

        • bind()는 기존 함수를 복제하면서 this를 지정한 함수로 만듦

        • 원본 함수는 변하지 않음

        • 언제 쓰냐면?

          • 나중에 호출할 때 this가 바뀌지 않도록 미리 고정하고 싶을 때
          • 이벤트 핸들러나 콜백 함수에 넘길 때 this가 꼬이는 걸 막기 위해

        • 📌 한줄 요약 (강화 버전)

          bind()는 함수의 this를 특정 객체로 고정한 새로운 함수를 반환해, 나중에 호출할 때도 this가 바뀌지 않도록 보장한다.

  ---

  • 메모이제이션

    • 클로저가 필요 없음

    • 메모이제이션 예제

    • ex02-23.js, ex04-05.js

      // ex02-23.js
      const isPrime = function (num) {
        isPrime._cache = isPrime._cache || {};
      
        if (isPrime._cache[num] !== undefined) {
          return isPrime._cache[num];
        }
      
        let prime = "맞음";
        for (let i = 2; i <= Math.sqrt(num); i++) {
          if (num % i === 0) {
            prime = "아님";
            break;
          }
        }
        isPrime._cache[num] = prime;
        return prime;
      };
      
      console.time("소요시간");
      console.log("3 -> ", isPrime(3));
      console.log("4 -> ", isPrime(4));
      console.log("5 -> ", isPrime(5));
      console.log("6 -> ", isPrime(6));
      console.log("7 -> ", isPrime(7));
      console.log("8 -> ", isPrime(8));
      console.log("9 -> ", isPrime(9));
      console.log("1000000007 -> ", isPrime(1000000007));
      console.log("1000000007 -> ", isPrime(1000000007));
      console.log("1000000007 -> ", isPrime(1000000007));
      console.timeEnd("소요시간");
      

      // ex04-05.js
      Function.prototype.memo = function (key) {
        this._cache = this._cache || {};
      
        if (this._cache[key] !== undefined) {
          return this._cache[key];
        } else {
          return (this._cache[key] = this(key));
        }
      };
      
      const isPrime = function (num) {
        let prime = "맞음";
      
        for (let i = 2; i < num; i++) {
          if (num % i === 0) {
            prime = "아님";
            break;
          }
        }
      
        return prime;
      };
      
      console.time("소요시간");
      console.log("3 -> ", isPrime(3));
      console.log("4 -> ", isPrime(4));
      console.log("5 -> ", isPrime(5));
      console.log("6 -> ", isPrime(6));
      console.log("7 -> ", isPrime(7));
      console.log("8 -> ", isPrime(8));
      console.log("9 -> ", isPrime(9));
      console.log("1000000007 -> ", isPrime.memo(1000000007)); // 첫번째 캐싱
      console.log("1000000007 -> ", isPrime.memo(1000000007)); // 2번째 캐싱
      console.log("1000000007 -> ", isPrime.memo(1000000007)); // 3번째 캐싱
      console.timeEnd("소요시간");
      

      isPrime.memo(3)
      │
      ├─> memo 메서드 실행
      │    ├─> 캐시 확인/초기화
      │    ├─> 캐시에 3이 없으므로
      │    │    └─> isPrime(3) 실행
      │    │         └─> 소수 판별 후 true 반환
      │    └─> 캐시에 저장 후 true 반환
      │
      isPrime(3)
      └─> isPrime 함수 바로 실행
            └─> 소수 판별 후 true 반환

      • ✅ 개선된 점 요약

        1. 메모이제이션 로직을 함수 밖으로 분리 (재사용 가능성 증가)

           • 🔽 왼쪽: isPrime 함수 안에서 _cache 관리
           • 🔼 오른쪽: Function.prototype.memo로 메모이제이션을 유틸리티 함수화 → 다른 함수에서도 .memo() 호출만으로 캐시 기능을 간편하게 쓸 수 있음
             

        2. 관심사의 분리 (기능 분리로 가독성 향상)

           • 왼쪽은 소수 판별 로직 + 캐시 로직이 뒤섞여 있음
           • 오른쪽은 isPrime은 오직 소수 판별만, memo는 캐싱만 처리해서 코드 역할이 명확히 나뉨

        3. 코드 재사용성 증가

           • Function.prototype.memo를 모든 함수에서 사용할 수 있음:

             const slowFn = (x) => { ... };
             slowFn.memo(x); // 캐싱 자동 처리

        4. 함수 정의가 더 순수해짐 (Pure Function화)

           • isPrime은 캐시나 외부 상태 없이 오직 인자만으로 동작
           • 이로 인해 테스트, 디버깅, 재사용이 훨씬 쉬워짐

        5. 코드의 확장성 향상

           • 이후 memo()에 만료 시간, 캐시 크기 제한 같은 기능도 쉽게 추가 가능
           • 개별 함수 수정 없이 메모이제이션 정책을 전역에서 관리할 수 있음

        📌 한 줄 요약

        기능 분리 + 재사용성 + 유지보수성 + 확장성까지 모두 좋아진 구조!

      • 설명

        // ex04-05.js
        Function.prototype.memo = function (key) {
          this._cache = this._cache || {};
        
          if (this._cache[key] !== undefined) {
            return this._cache[key];
          } else {
            return (this._cache[key] = this(key));
          }
        };
        
        const isPrime = function (num) {
          let prime = "맞음";
          for (let i = 2; i < num; i++) {
            if (num % i === 0) {
              prime = "아님";
              break;
            }
          }
          return prime;
        };
        
        const sayHello = function (name) {
          return "Hello" + name;
        };
        
        console.log(sayHello("캐싱 안함"));
        console.log(sayHello.memo("캐싱 함"));
        console.log(sayHello.memo("캐싱 함"));
        
        console.time("소요시간");
        
        console.log("3 -> ", isPrime(3));
        console.log("4 -> ", isPrime(4));
        console.log("5 -> ", isPrime(5));
        console.log("6 -> ", isPrime(6));
        console.log("7 -> ", isPrime(7));
        console.log("8 -> ", isPrime(8));
        console.log("9 -> ", isPrime(9));
        
        console.log("1000000007 -> ", isPrime.memo(1000000007));
        console.log("1000000007 -> ", isPrime.memo(1000000007));
        console.log("1000000007 -> ", isPrime.memo(1000000007));
        
        console.timeEnd("소요시간");
        

        • 1️⃣ 1. Function.prototype.memo = function (key) { ... }

          📌 핵심 기능

          모든 함수에 공통적으로 사용할 수 있는 메모이제이션 기능을 추가함

          this._cache를 통해 함수 단위로 캐시 객체를 저장

          같은 입력이 들어오면 결과를 다시 계산하지 않고 캐시된 값 반환

        • 2️⃣ sayHello.memo("캐싱 함")

          📌 역할

          • sayHello("캐싱 함")을 최초 한 번 계산 후 캐시에 저장
          • 두 번째부터는 새로 계산하지 않고 저장된 결과를 반환

          🧩 포인트

          • "캐싱 함" → 내부적으로 sayHello._cache["캐싱 함"]에 저장됨
          • 결과적으로 불필요한 계산을 줄여 성능 향상

          ---

        • 3️⃣ isPrime.memo(1000000007)

          📌 역할
          소수 판별 함수 isPrime에 대해 고비용 계산을 메모이제이션으로 최적화

          1000000007은 매우 큰 수이므로 첫 계산에 시간이 오래 걸림

          이후 동일한 입력에 대해선 즉시 캐시된 값 반환
          

        ---

        🧩 정리: 강조된 부분의 의미

        번호	코드	설명
        1️⃣	Function.prototype.memo	모든 함수에 캐시 기능 부여
        2️⃣	sayHello.memo(...)	단순 문자열 반환 함수도 캐싱 가능
        3️⃣	isPrime.memo(...)	고비용 연산의 캐싱 효과를 보여주는 사례

🔗 배웠던 파일

• index.html 커링(currying) 기법 라이브러리 스크립트 등록

• ex02

  • 17-05 bind 메서드
  • 23 반쪽자리 메모이제이션 적용해보기

• ex03

  • 02 prototype을 사용하지 않고 생성자 함수 내부에 메서드 작성
  • 03 prototype으로 메서드 작성
  • 04 프로토타입 체인을 이용한 상속 기능 구현
  • 05 create, 중간자 함수 사용
  • 06 프로토타입 체인을 이용한 상속 기능 구현

• ex04

  • 01 closure 첫만남
  • 02 closure 외부 스코프에서 count의 값을 올리지 못하게 막는 예제
  • 03 커링(currying) 기법 사용하기
  • 04 커링(currying) 기법 사용하기
  • 05 prototype으로 여러 함수를 캐시 시키도록 수정

❓ 생긴 질문 / 더 알아볼 것

• 아..오늘 배웠던거 너무 어렵다... 선생님께서 오늘 배운거 어려운 개념이라고 하는데 진짜~ 너무 어려웠다... 질문도 막 하고 싶은데 아직 지식이 없는지 질문이 떠오르진 않았다..

🔗 참고 자료

• 상속과 프로토타입 | javascript.info
• 상속과 프로토타입 | mdn
• class | mdn
• class | 모던자바스크립트
• closure | javascript.info
• closure | 모던자바스크립트
• 메모이제이션 | TapK의 velog
• bind | mdn
• 커링 (Currying) | javascript.info
• 노션 정리 링크