[24/09/05-11] 안내 및 질문 모음집

[minjeongss]

📚 분량

25장-27장

🎤 발표자

조천산

질문

25장

• 자바스크립트에는 왜 추상클래스가 없는지, 구현할 수 있는 방법은? (김민석)
• 정적 메서드를 사용하는 이유와 실제 사례는 무엇이 있는가? (김민정)
• 클래스의 private 필드와 클로저를 사용한 private 변수 구현의 차이점은? (김주영)

26장

• p.485

  class Person {
    constructor(){
      this.name = 'Lee';
      this.sayHi = () => { console.log(`Hi ${this.name}`); 
    }
  }
  

  sayHi 클래스 필드에 할당한 화살표 함수의 상위 스코프는 사실 클래스 외부다.
  저는 이게 상위스코프가 왜 클래스 외부라는 건 지 잘 모르겠네요.
  상위 스코프가 constructor여서 this가 미래에 생성할 인스턴스 인 거 아닌가요? (이성훈)

27장

• 배열에서 중복요소를 제거하는 방법 중 가장 효율적인 방법은? (김민석)
• sort메서드에서 퀵소트를 사용하는 이유? (조천산)
• 희소 배열의 개념이 소개되었는데, 실제 개발에서 희소 배열을 사용하는 것이 권장되지 않는 이유는? 메모리 사용과 성능 측면에서 어떤 영향을 미치는지? (김주영)

[joarthvr]

자바스크립트에는 왜 추상클래스가 없는지, 구현할 수 있는 방법은?(김민석)

자바스크립트는 프로토타입 기반 언어로 시작했기 때문에
클래스 개념도 프로토타입을 바탕으로 구현한 것
자바스크립트의 동적 타입 시스템과 유연성으로 인해 정적 타입 언어에서 사용되는 많은 개념들이 직접적으로 지원되지 않습니다.

구현하는 방법: 인터페이스 패턴

정적 메서드를 사용하는 이유와 실제 사례는 무엇이 있는가? (김민정)

정적 메서드를 사용하는 주요 이유: 인스턴스 생성 없이 클래스 레벨에서 기능 제공 -> 메모리 효율성

유효성 검사

class Validator {
  static isEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  }

  static isPhoneNumber(phone) {
    const phoneRegex = /^\d{3}-\d{3}-\d{4}$/;
    return phoneRegex.test(phone);
  }
}

console.log(Validator.isEmail('[email protected]')); // true
console.log(Validator.isPhoneNumber('123-456-7890')); // true

클래스의 private 필드와 클로저를 사용한 private 변수 구현의 차이점은? (김주영)

일반적으로 클래스의 private가 더 명시적인 방법으로 여겨진다. private 필드는 해당 클래스 내에서만 접근 가능(수정이 어려움)하지만 클로저를 활용하면 클로저 내에 정의된 모든 메서드에서 접근할 수 있다(수정이 쉬음). 클로저를 활용한 방식이 좀 더 유연하다.

sayHi 클래스 필드에 할당한 화살표 함수의 상위 스코프는 사실 클래스 외부다. 저는 이게 상위스코프가 왜 클래스 외부라는 건 지 잘 모르겠네요. 상위 스코프가 constructor여서 this가 미래에 생성할 인스턴스 인 거 아닌가요? (이성훈)

화살표 함수의 스코프는 constructor 내부이지만, this 바인딩은 생성되는 인스턴스를 가리킨다고 해야 합니다.

배열에서 중복요소를 제거하는 방법 중 가장 효율적인 방법은? (김민석)

1. Set 객체 사용 (가장 추천되는 방법)

sort메서드에서 퀵소트를 사용하는 이유? (조천산)

JavaScript 엔진마다 구현이 다름

V8 엔진(Chrome, Node.js)은 배열 크기에 따라 다른 알고리즘을 사용

작은 배열(길이 < 10)에는 삽입 정렬
중간 크기 배열에는 퀵소트
큰 배열에는 힙 정렬(퀵소트의 최악의 경우를 방지하기 위해)

SpiderMonkey(Firefox)는 병합 정렬의 변형을 사용
JavaScriptCore(Safari)는 버블 정렬과 퀵소트의 하이브리드를 사용

희소 배열의 개념이 소개되었는데, 실제 개발에서 희소 배열을 사용하는 것이 권장되지 않는 이유는? 메모리 사용과 성능 측면에서 어떤 영향을 미치는지? (김주영)

메모리 사용: 이론적으로는 희소 배열이 메모리를 절약할 수 있지만, 실제로는 그렇지 않을 수 있음

자바스크립트 엔진은 희소 배열을 내부적으로 해시 테이블과 유사한 구조로 구현할 수 있어, 오히려 더 많은 메모리를 사용할 수 있음
빈 슬롯을 관리하기 위한 추가적인 메타데이터가 필요할 수 있다

성능 영향: 요소 접근 속도:
밀집 배열은 인덱스를 통해 요소에 직접 접근할 수 있어 빠름
희소 배열은 각 접근마다 존재 여부를 확인해야 하므로 더 느릴 수 있음.

[minjeongss]

25장

• 자바스크립트에는 왜 추상클래스가 없는지, 구현할 수 있는 방법은? (김민석)

  • 추상 클래스가 없는 이유

    • 동적 타이핑을 진행
    • 클래스나 인터페이스의 특정 형태를 강제하는 것이 어려움
    • 그리하여 추상 클래스로 제공할 수 있는 구조적 강제성 제공하지 않음

  • 추상 클래스 구현 방법

    class Animal{
    	constructor(name){
    		this.name=name;
    		if(this.constructor===Animal){
    			throw new Error('추상 클래스로 인스턴스 생성!');
    		}
    	}
    	move(){
    		throw new Error('서브 클래스에 구현 필요!');
    	}
    }
    class Cat extends Animal{
    	constructor(name){
    		super(name);
    	}
    	move(){
    		console.log('야옹');
    	}
    }
    const animal=new Animal('동물'); //Error
    const cat=new Cat('고양이');
    cat.move(); //야옹

• 정적 메서드를 사용하는 이유와 실제 사례는 무엇이 있는가? (김민정)

  • 사용하는 이유

    • 특정 클래스 인스턴스가 아닌 클래스 전체에 필요한 기능 생성
    • 클래스 속성 변경하거나 참조

  • 실제 사례

    class MathUtils{
    	static add(a,b){
    		return a+b;
    	}
    	static sub(a,b){
    		return a-b;
    	}
    }
    console.log(MathUtils.add(1,2));
    console.log(MathUtils.sub(2,1));

• 클래스의 private 필드와 클로저를 사용한 private 변수 구현의 차이점은? (김주영)

  • 접근 방식
    • 클래스: 클래스 내부에서만 접근 가능
    • 클로저: 함수 내에서만 접근 가능

26장

• p.485sayHi 클래스 필드에 할당한 화살표 함수의 상위 스코프는 사실 클래스 외부다.저는 이게 상위스코프가 왜 클래스 외부라는 건 지 잘 모르겠네요.상위 스코프가 constructor여서 this가 미래에 생성할 인스턴스 인 거 아닌가요? (이성훈)

  class Person {
    constructor(){
      this.name = 'Lee';
      this.sayHi = () => { console.log(`Hi ${this.name}`);
    }
  }
  
  

  • 클래스 외부 VS 클래스 인스턴스
    • 클래스 외부: 클래스 본체 바깥의 스코프
    • 클래스 인스턴스: new 키워드를 사용해 생성된 객체
  • 화살표 함수의 this: 화살표 함수는 정의된 위치의 this를 참조함
  • 클래스의 this: 해당 클래스의 인스턴스

27장

• 배열에서 중복요소를 제거하는 방법 중 가장 효율적인 방법은? (김민석)

  • 후보

    • Set: O(n)

      const uniqueArray = [...new Set(array)];

    • filter: O(n^2)

      • indexOf 호출로 시간 오래 걸림

      const uniqueArray = array.filter((value, index) => array.indexOf(value) === index);

    • recude: O(n^2)

      • includes 호출로 시간 오래 걸림

      const uniqueArray = array.reduce((acc, value) => {
        if (!acc.includes(value)) {
          acc.push(value);
        }
        return acc;
      }, []);

  • 결론

    • Set이 가장 빠릅니다!
• sort메서드에서 퀵소트를 사용하는 이유? (조천산)

  • 과거

    • quick sort: 길이 10 이상(큰 단위)
    • insertion sort: 길이 10 미만(작은 단위)

  • 현재

    • timsort
      • merge sort: 큰 단위
      • insertion sort: 작은 단위

  • quick sort

    • 불안정 정렬*임
    • V8은 안정 정렬이 필요했기에, 안정 정렬인 timsort로 변경

  • quick sort가 불안정 정렬인 이유

    • 동일한 키 값을 가진 요소들이 정렬된 후에도 원래의 순서가 보장되지 않음

    [3, 2, 3, 1, 2]

    • 피벗으로 2를 선택하면, 정렬 과정에서 동일한 값인 2가 서로 다른 위치로 이동할 수 있음
    • 이 결과로 2의 원래 순서가 유지되지 않을 수 있음
• • 희소 배열의 개념이 소개되었는데, 실제 개발에서 희소 배열을 사용하는 것이 권장되지 않는 이유는? 메모리 사용과 성능 측면에서 어떤 영향을 미치는지? (김주영)
  • 메모리 측면
    • 비효율적인 메모리 사용
    • 연속적 메모리 사용하지 않아 메모리 단편화 발생 가능
  • 성능 측면
    • 유효한 인덱스를 탐색해야 하기에, 탐색 속도 느려질 수 있음
    • 엔진이 비어 있는 인덱스를 처리해야 하기에 반복을 할 때 추가적인 오버헤드가 발생함
    • 메모리 효율이 떨어져 가비지 컬렉션이 더 자주 발생할 수 있음

[se0kcess]

25장

자바스크립트에는 왜 추상클래스가 없는지, 구현할 수 있는 방법은? (김민석)

자바스크립트는 프로토타입 기반 언어로 시작했고, 클래스 자체가 ES6에서 추가된 문법적 설탕이므로
동적 타입 언어의 특성상 인터페이스나 추상 클래스의 개념이 정적 타입 언어만큼 필요하지 않았음

• ES2015 이후의 클래스와 throw 문을 사용

class AbstractClass {
  constructor() {
    if (new.target === AbstractClass) {
      throw new TypeError("Cannot construct Abstract instances directly");
    }
  }

  abstractMethod() {
    throw new Error("Method 'abstractMethod()' must be implemented.");
  }
}

• TypeScript 사용: TypeScript에서는 abstract 키워드를 제공

정적 메서드를 사용하는 이유와 실제 사례는 무엇이 있는가? (김민정)

• 인스턴스 생성 없이 클래스 레벨에서 기능을 제공할 수 있다.
• 유틸리티 함수들을 그룹화하고 조직화하는 데 유용하다.
• 메모리 사용을 줄일 수 있습니다 (모든 인스턴스가 공유하므로).

실제 사례:

• 수학 연산: Math.random(), Math.floor() 등
• 객체 생성/조작: Object.create(), Object.keys()
• 배열 메서드: Array.from(), Array.isArray()
• 데이터 변환: JSON.parse(), JSON.stringify()
• 유틸리티 함수: 날짜 포맷팅, 문자열 변환 등

클래스의 private 필드와 클로저를 사용한 private 변수 구현의 차이점은? (김주영)

클래스의 private 필드:

• ES2019에서 도입된 문법 (# 접두사 사용)
• 언어 레벨에서 캡슐화를 지원
• 성능상 이점 (엔진 최적화 가능)
• 코드가 더 명확하고 간결함

클로저를 사용한 private 변수:

• ES5 이전부터 사용 가능한 기법
• 함수 스코프를 이용한 캡슐화
• 메모리 사용량이 약간 더 많을 수 있음
• 구현이 복잡할 수 있음

26장

sayHi 클래스 필드에 할당한 화살표 함수의 상위 스코프는 사실 클래스 외부다. 저는 이게 상위스코프가 왜 클래스 외부라는 건 지 잘 모르겠네요. 상위 스코프가 constructor여서 this가 미래에 생성할 인스턴스 인 거 아닌가요? (이성훈)

• gpt에 검색해보니까 상위 스코프가 constructor여서 this가 미래에 생성할 인스턴스가 맞다고 하네요? ㅋㅋㅋㅋ

"클래스 외부"라는 표현은 클래스가 자체적인 스코프를 만들지 않는다는 의미로 해석할 수 있습니다. 라고 합니다.

27장

배열에서 중복요소를 제거하는 방법 중 가장 효율적인 방법은? (김민석)

set 메소드를 사용하는 것이 가장 효율적

set 메소드 사용해서 중복 제거 시 장점

• 시간 복잡도: O(n)
• 간결하고 읽기 쉬운 코드
• 원시값과 참조값 모두에 대해 작동

sort메서드에서 퀵소트를 사용하는 이유? (조천산)

• 평균적으로 빠른 성능: O(n log n)의 평균 시간 복잡도
• 제자리 정렬: 추가 메모리 사용이 적음
• 캐시 효율성: 지역성이 좋아 캐시 히트율이 높음
• 적응성: 다양한 데이터 세트에 대해 잘 작동

희소 배열을 사용하지 않는 것이 권장되는 이유 (김주영)

메모리 사용

• 희소 배열은 연속된 메모리 공간을 사용하지 않아 메모리 관리가 비효율적일 수 있다.
• 빈 슬롯도 메모리를 차지할 수 있어 예상보다 더 많은 메모리를 사용할 수 있다.

성능 영향

• 요소 접근 시간이 늘어날 수 있다.
• 배열 메서드들의 성능이 저하될 수 있다.
• 최적화가 어려워 JavaScript 엔진의 성능 향상 기법을 적용하기 어렵다.

예측 가능성

희소 배열의 동작이 일반 배열과 다를 수 있어 버그의 원인이 될 수 있다.

[kimjuyoung99]

25장

• 자바스크립트에는 왜 추상클래스가 없는지, 구현할 수 있는 방법은? (김민석)

  • 자바스크립트는 원래 프로토타입 기반 언어로 설계되었기 때문에 클래스 기반 언어에서 흔히 볼 수 있는 추상 클래스가 없다
  • TS에서 추상클래스를 제공한다.

• 정적 메서드를 사용하는 이유와 실제 사례는 무엇이 있는가? (김민정)

  1. 인스턴스 생성 없이 클래스 레벨에서 기능을 제공할 수 있다.
  2. 유틸리티 함수를 그룹화하고 네임스페이스를 제공한다.
  3. 메모리 사용을 줄일 수 있다.

  실제 사례:

  1. Math.random(), Math.floor() 등의 수학 관련 메서드
  2. Array.isArray(), Object.keys() 등의 유틸리티 메서드
  3. Date.now() 같은 시간 관련 메서드

• 클래스의 private 필드와 클로저를 사용한 private 변수 구현의 차이점은? (김주영)

  클래스의 private 필드:

  1. ES2019에서 도입된 문법
  2. # 접두사를 사용하여 명시적으로 private임을 나타낸다
  3. 클래스 내부에서만 접근 가능하다

  클로저를 사용한 private 변수:

  1. ES6 이전에도 사용 가능한 방식이다.
  2. 함수 스코프를 이용하여 변수를 캡슐화한다.
  3. 메모리 사용량이 더 많을 수 있다.
  4. 모든 인스턴스마다 새로운 클로저가 생성된다.

26장

• p.485sayHi 클래스 필드에 할당한 화살표 함수의 상위 스코프는 사실 클래스 외부다.저는 이게 상위스코프가 왜 클래스 외부라는 건 지 잘 모르겠네요.상위 스코프가 constructor여서 this가 미래에 생성할 인스턴스 인 거 아닌가요? (이성훈)

  class Person {
    constructor(){
      this.name = 'Lee';
      this.sayHi = () => { console.log(`Hi ${this.name}`);
    }
  }
  

  화살표 함수의 상의 스코프는 그 함수가 정의된 위치에 의해 결정이 된다. 클래스 필드에 정의된 화살표 함수는 실제로 클래스 외부에서 평가되는 것과 같다.

27장

• 배열에서 중복요소를 제거하는 방법 중 가장 효율적인 방법은? (김민석)

  • Set 객체를 사용하는 것

  const uniqueArray = [...new Set(originalArray)];

  1. 시간 복잡도가 O(n)이다. (Set에 원수 추가연산은 O(1), 모든 원소 새 배열 복사 O(n))
  2. 한 번의 순회로 중복 제거가 가능하다.
  3. 간결하다.

• sort메서드에서 퀵소트를 사용하는 이유? (조천산)

  1. 시간 복잡도와 공간복잡도가 효율적이다 (평균적으로 O(n log n))

  → 따라서 실제 성능이 우수하다
  → 퀵정렬은 불안정 정렬이지만, 안정성이 크게 중요하지 않다고 합니다.

• 희소 배열의 개념이 소개되었는데, 실제 개발에서 희소 배열을 사용하는 것이 권장되지 않는 이유는? 메모리 사용과 성능 측면에서 어떤 영향을 미치는지? (김주영)

1. 메모리 사용 측면 : 희소 배열은 실제 요소보다 더 많은 메모리를 할당할 수 있다. → 하지만 배열 길이 ≠ 실제 요소 수 불일치로 메모리 관리가 비효율적이다.
2. 성능적인 측면 : 요소에 접근할 때 프로토타입 체인을 탑색해야 할 수 있어서 속도가 느립니다.
3. 그 외 가독성과 유지보수 측면 : 따라서 코드의 의도를 파악하기 어렵고 예기치 못한 버그의 원인이 될 수 있다.

[shlee9999]

25장

• 자바스크립트에는 왜 추상클래스가 없는지, 구현할 수 있는 방법은? (김민석)
  • 타입스크립트에 추상 클래스가 존재합니다~!
  • 추상클래스는 인터페이스와 달리 구현부를 포함할 수 있습니다.

• 정적 메서드를 사용하는 이유와 실제 사례는 무엇이 있는가? (김민정)
  • 프로토타입 메서드에서 this를 사용하지 않으면 사용합니다. 즉 프로토타입 메서드 중에 어차피 어떤 인스턴스가 실행해도 완전 똑같은 동작을 하는 메서드는 정적 메서드로 빼주는 거에요!
  • 인스턴스를 생성하지 않고 사용할 수 있기 때문에 메모리 측면에서 효율이 좋겠네요!
  • Math.max 같은 것도 정적 메서드입니다~
• 클래스의 private 필드와 클로저를 사용한 private 변수 구현의 차이점은? (김주영)
  • 구현 과정이 클로저보다는 클래스가 더 간단하고 가독성도 좋아서 사용하는 것 같습니다.

26장

• p.485sayHi 클래스 필드에 할당한 화살표 함수의 상위 스코프는 사실 클래스 외부다.저는 이게 상위스코프가 왜 클래스 외부라는 건 지 잘 모르겠네요.상위 스코프가 constructor여서 this가 미래에 생성할 인스턴스 인 거 아닌가요? (이성훈)

  class Person {
    constructor(){
      this.name = 'Lee';
      this.sayHi = () => { console.log(`Hi ${this.name}`);
    }
  }

  • 아마 책 내용이 오류인 것 같습니다?

27장

• 배열에서 중복요소를 제거하는 방법 중 가장 효율적인 방법은? (김민석)

  저는 기본적으로 두 가지를 알고 있는데, set이 가장 좋은 거로 알고 있어요!
  아마 reduce를 사용하는 방법도 있을겁니다!

  1. set함수를 사용하는 법 (O(n))

  2. filter와 indexOf를 사용하는 법 (O(n2))

     const arr1 = [1, 1, 2, 3, 3, 3, 4, 5];
     const arr2 = Array.from(new Set(arr1)); // [1, 2, 3, 4, 5]
     const arr3 = arr1.filter((num, i, self) => self.indexOf(num) === i); // [1, 2, 3, 4, 5]

• sort메서드에서 퀵소트를 사용하는 이유? (조천산)

  • TimeSort를 사용하는 것으로 알고 있습니다.

• 희소 배열의 개념이 소개되었는데, 실제 개발에서 희소 배열을 사용하는 것이 권장되지 않는 이유는? 메모리 사용과 성능 측면에서 어떤 영향을 미치는지? (김주영)

  • 아무래도 없어도 되는 요소가 undefined로 남아버리니 이 요소까지 탐색해서 효율이 안좋을 것 같습니다!
  • 필요 없는 요소가 메모리 공간을 차지하는 것도 메모리 효율에 안좋을 것 같아요