[3주차] 프로토타입

[aken-you]

주제

프로토타입

선정 이유

프로토타입에 대해서 구체적으로 더 알고 싶어서다.
예전에 아마존 미션때 크롱이 알려준 prototype 보면서 새삼스러워 이 주제를 들고왔다.

책 내용 (p119 ~ p121)

p119

프로토타입 연결 장치를 사용하는 방법을 프로토타입 클래스라 부릅니다.

p120

프로토타입 클래스 패턴에서는 이런 방식의 위임을 상속이라 부릅니다.

p121

클래스 메커니즘과 프로토타입 클래스 모두 저 밑바닥에서는 동일한 프로토타입 연결 장치로 설정되어 있습니다.

[aken-you]

다음 코드는 어떻게 동작할까?

const result = "hello world".slice(6);

"hello world" 데이터 자체의 타입은 primitive이다. (reference type이 아니다.)
근데 위 코드를 보면 slice를 메서드로 가지고 있는 것처럼 보인다.
"hello world"는 어떻게 slice 메서드를 호출할 수 있을까?

[aken-you]

B.1: 비교 연습하기

const dayStart = "07:30";
const dayEnd = "17:45";

// 회의가 근무시간 내에 이뤄질 경우 true 아닐 경우 false
// 1. startTime >= dayEnd이거나 startTime < dayStart false 반환
// 2. startTime < dayEnd일 경우 3부터 진행
// 3. startTime의 분에서 durationMinutes를 더한다. (회의 마친 시간)
//  a. 더한 값 >= 60 이라면 2에서 구한 "시" += Math.floor(더한 값 / 60); "분" = 더한 값 % 60
// 4. 3에서 구한 회의 마친 시간
//  a. <= dayEnd라면 true
//  b. > dayEnd라면 false

function scheduleMeeting(startTime, durationMinutes) {
  const [startH, startM] = startTime.split(':').map(Number);
  const [dayStartH, dayStartM] = dayStart.split(':').map(Number);
  const [dayEndH, dayEndM] = dayEnd.split(':').map(Number);
  
  if((startH < dayStartH) || (startH === dayStartH && startM < dayStartM)) return false;
  if(startH > dayEndH || (startH === dayEndH && startM >= dayEndM)) return false;
  
  let hours = startH;
  let minutes = startM + durationMinutes;
  
  if(minutes >= 60) {
    hours += Math.floor(minutes / 60);
    minutes = minutes % 60;
  }
  
  if(hours < dayEndH || (hours === dayEndH && minutes <= dayEndM)) return true;
  
  return false;
}

console.log(scheduleMeeting("7:00", 15));
console.log(scheduleMeeting("07:15", 30));
console.log(scheduleMeeting("7:30", 30));
console.log(scheduleMeeting("11:30", 60));
console.log(scheduleMeeting("17:30", 45));
console.log(scheduleMeeting("18:00", 15));

[aken-you]

B.2: 클로저 연습하기

function range(start,end) {
  
  const getRange = (start, end) => {
    const answer = [];
    
    if(start > end) return [];

    for(let i=start; i<=end; i++) {
      answer.push(i);
    }
      
    return answer
  }
  
  if(end === undefined) {
    return (end) => getRange(start, end);
  }
  
  return getRange(start, end);
}

console.log(range(3,3))
console.log(range(3,8))
console.log(range(3,0))

var start3 = range(3)
var start4 = range(4)

console.log(start3(3))
console.log(start3(8))
console.log(start3(0))

console.log(start4(6))

[aken-you]

B.3: 프로토타입 연습하기 (풀지 못함)

function randMax(max) {
    return Math.trunc(1E9 * Math.random()) % max;
}

// 릴 동작
var reel = {
    symbols: [
        "♠", "♥", "♦", "♣", "☺", "★", "☾", "☀"
    ],
    spin() {
        if (this.position == null) {
            this.position = randMax(
                this.symbols.length - 1
            );
        }
        this.position = (
            this.position + 100 + randMax(100)
        ) % this.symbols.length;
    },
    display() {
        if (this.position == null) {
            this.position = randMax(
                this.symbols.length - 1
            );
        }
        return this.symbols[this.position];
    }
};

var slotMachine = {
    // 각 릴은 reel 객체 상속 받아야 함
    reels: [
        Object.create(reel),
        Object.create(reel),
        Object.create(reel),
    ],
    // 세 릴이 돈다.
    spin() {
        this.reels.forEach(function spinReel(reel){
            // 마치 자기 메서드인 것 마냥 호출 => reel 객체 상속 받아야 함
            reel.spin();
        });
    },
    // 결과 출력
    display() {
        let result = '';
        this.reels.forEach((reel) => {
          const current = reel.symbols[reel.position];
          const prev = reel.symbols[reel.position-1];
          const next = reel.symbols[reel.position+1]
          result += `${current} | ${prev} | ${next}\n`
          
        })

       console.log(result);
    }
};

slotMachine.spin();
slotMachine.display();
// ☾ | ☀ | ★
// ☀ | ♠ | ☾
// ♠ | ♥ | ☀

slotMachine.spin();
slotMachine.display();
// ♦ | ♠ | ♣
// ♣ | ♥ | ☺
// ☺ | ♦ | ★

[bread1022]

다음 코드는 어떻게 동작할까?

const result = "hello world".slice(6);

"hello world" 데이터 자체의 타입은 primitive이다. (reference type이 아니다.) 근데 위 코드를 보면 slice를 메서드로 가지고 있는 것처럼 보인다. "hello world"는 어떻게 slice 메서드를 호출할 수 있을까?

객체 wrapper를 가지고 있기때문