[25장] 클래스 - 1

[juyeon-park]

데브코스 4기 프롱이들 모던 JS Deep Dive 책 뿌수기😎

아래 템플릿을 복사해서 1개이상 퀴즈를 만들어주세요. 객관식, 주관식, 단답형 모두 상관없습니다!

Q. 퀴즈 내용
1.  1번
2.  2번
3.  3번

<details>
<summary>퀴즈 정답</summary>
<div markdown="1">    
정답 설명
</div>
</details>

[suehdn]

Q. 아래의 문항은 클래스에서 정의한 메서드의 특징입니다. 이중 틀린 문장을 찾고 바르게 고쳐보세요.

1. function 키워드를 생략한 메서드 축약 표현을 사용한다.
2. 객체 리터럴과는 다르게 클래스에 메서드를 정의할 때는 콤마가 필요 없다.
3. 암묵적으로 strict mode로 실행된다.
4. for ...in 문이나 Object.keys 메서드 등으로 열거할 수 있다. 즉, 프로퍼티의 열거 가능 여부를 나타내며, 불리언 값을 갖는 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true다.
5. 내부 메서드 [[Construct]]를 갖는 constructor다. 따라서 new 연산자와 함께 호출할 수 있다.

정답

4. 클래스에서 정의한 메서드는 열거 불가능이다. 따라서 문장을 올바르게 고치면
for ...in 문이나 Object.keys 메서드 등으로 열거할 수 [없다]. 즉, 프로퍼티의 열거 가능 여부를 나타내며, 불리언 값을 갖는 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 [false]다.

5. 클래스에서 정의한 메서드는 new 연산자와 함께 호출할 수 없는 non-constructor다. 따라서 문장을 올바르게 고치면
내부 메서드 [[Construct]]를 갖지 않는 non-constructor다. 따라서 new 연산자와 함께 호출할 수 없다.

[ghost]

Q. 생성자 함수로 작성된 코드를 클래스로 변경하려고 합니다. 그런데 틀린 곳이 한 군데 있다네요. 생성자 함수 코드와 똑같이 동작하도록 틀린 곳을 바로 고쳐주세요. 그 부분만 작성해주시면 됩니다..!

(두 코드 모두 문법 상으론 오류가 없습니다)

const Gunwoo = (function(){
  function Gunwoo(name) {
    this.name = name
    this.age = 24
  }

  Gunwoo.prototype.playGame = function () {
    console.log('롤 재밌당')
  }

  Gunwoo.readBook = function () {
    console.log('재미없다')
  }

  return Gunwoo
}())

class Gunwoo {
  age = 24

  constructor(name) {
    this.name = name   
  }

  playGame() {
    console.log('롤 재밌당')
  }

  readBook() {
    console.log('재미없다')
  }
}

퀴즈 정답

static readBook() {
  console.log('재미없다')
}

[eeseung]

Q. 다음은 private 필드에 대한 설명입니다. 문장의 빈 칸을 채워주세요.

1. private 필드는 ____에서만 참조할 수 있다.
2. ____를 통해 클래스 외부에서 private 필드에 간접적으로 접근할 수 있다.
3. private 필드는 반드시 ____에 정의해야 한다.

퀴즈 정답

1. 클래스 내부 2. 접근자 프로퍼티 3. 클래스 몸체

[hyoribogo]

Q. OX 퀴즈

1. 클래스 이름은 무조건 파스칼 케이스로 지어야 한다.
2. 클래스는 선언 이전에 참조할 수 없다.
3. 클래스에서 정의한 메서드는 모두 non-constructor다.
4. 클래스에서 getter, setter 메서드를 정의하면 인스턴스의 프로퍼티 메서드가 된다.

퀴즈 정답

1. X, 파스칼 케이스로 짓지 않아도 되긴 하지만, 일반적으로 파스칼 케이스를 사용한다. (25.2, 419p)
2. O, TDZ에 빠진다. (25.3, 422p)
3. O, 모든 메서드는 내부 메서드 [[Construct]]를 갖지 않는 non-constructor다. (25.5.5, 434p)
4. X, 프로토타입 메서드가 된다. (25.7.2, 439p)

[juyeon-park]

Q. 다음 코드의 출력 결과를 작성해주세요

const Frong = '나는야 프롱이';

{
   console.log(Backdung);    // (1)

   console.log(Student) // (2)
 
   console.log(Frong);      // (3) 

   class Frong {}

   var Backdung = class Student {};
}

퀴즈 정답

(1) undefined (2) Student is not defined (3) ReferenceError: Cannot access 'Frong' before initialization

1. var 변수 호이스팅이 일어나 undefined로 출력됩니다. 클래스를 담는 변수 자체는 호이스팅이 일어나지만 할당한 클래스는 호이스팅이 일어나지 않습니다.
2. 기명 함수 표현식과 마찬가지로 클래스 표현식에서 사용한 클래스 이름은 외부 코드에서 접근 불가능 합니다. (p.423)
3. 클래스 선언문도 호이스팅이 발생합니다. 단, 클래스는 let, const 키워드로 선언한 변수처럼 호이스팅 되어 TDZ에 빠지게 됩니다.

[jonghyunlee95]

Q. OX퀴즈

1. 클래스는 함수와는 완전히 다른개념이다.
2. 클래스와 생성자 함수는 new연산자 없이 호출하면 에러가 발생한다.
3. constructor는 클래스내에 한 개만 존재 할 수 있으며, 생략하게되면 에러가 발생한다.
4. 인스턴스의 프로퍼티를 선언하고 초기화하려면 반드시 constructor 내부에서 this에 프로퍼티를 추가해야한다.

퀴즈 정답

정답 설명
1. X: 클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이다.
2. X: 클래스는 new연산자 없이 호출되면 에러가 발생하지만 생성자 함수는 new연산자 없이 호출하게 되면 일반함수로서 호출된다.
3. X: constructor는 클래스 내에 한 개만 존재할 수 있지만 생략도 가능하다.
4. O