2022/07/29 TIL

1. 자바스크립트 딥다이브 클래스 정리

클래스

클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이다.

클래스와 생성자 함수의 차이점

1. 클래스를 new 연산자 없이 호출하면 에러, 생성자 함수는 new 연산자가 없으면 일반 함수로서 호출
2. 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다. 하지만 생성자 함수는 extends와 super 키워드를 지원하지 않는다.
3. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 하지만 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 생성한 생성자 함수는 변수 호이스팅이 발생한다.
4. 클래스 내의 모든 코드에는 암묵적으로 strict mode 가 지정되어 실행되며, 해제가 불가능하다. 하지만 생성자 함수는 암묵적 strict mode가 지정되지 않는다.
5. 클래스의 constructor, 프로타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 false라서 열거되지 않는다.

• 따라서 클래스를 프로토타입 기반 객체 생성 패턴의 단순한 문법적 설탕이라고 보기 보다 새로운 객체 생성 매커니즘으로 보는 것이 좀 더 합당하다.

클래스 정의

• class 키워드나 클래스 표현식으로 클래스를 정의할 수 있다.
• 클래스는 함수이며, 값처럼 사용할 수 있는 일급 객체이다.
• 클래의 몸체에서 생성할 수 있는 메서드는 다음과 같다.
  • constructor(생성자)
  • 프로토타입 메서드
  • 정적 메서드

클래스 선언문도 변수 선언, 함수 정의와 마찬가지로 호이스팅이 발생한다.
하지만 let, const 키워드로 선언한 변수 처럼 호이스팅이 발생하며, 호이스팅이 발생하지 않는 것 처럼 보인다.

메서드

1. Constructor

constructor는 메서드로 해석되는 것이 아니라 클래스가 평가되어 생성한 함수 객체 코드의 일부가 된다.

• constructor는 클래스 내에 최대 한 개만 존재할 수 있다.
• constructor는 생략할 수 있다. (암묵적 정의 가능)
• 인스턴스를 초기화 하려면 constructor는 필수이다.
• constructor는 별도의 반환문을 가지지 말아야 한다.
  • 명시적으로 객체를 반환하면 암묵적 this 반환이 무시
  • 명시적으로 원시값 반환하면 원시값 무시 후 암묵적 this 반환

2. 프로토타입 메서드

클래스에서의 프로토타입 메서드는 따로 클래스의 prototype 프로퍼티에 추가하지 않아도 기본적으로 프로토타입 메서드가 됨

3. 정적 메서드

클래스에서의 정적 메서드는 static 키워드를 붙여야 정적 메서드가 된다.

• 정적 메서드가 바인딩된 클래스는 인스턴스의 프로토타입 체인 상에 존재하지 않기 때문에 인스턴스로 호출 불가

* 정적 메서드와 프로토타입 메서드의 차이
1. 정적 메서드와 프로토타입 메서드는 자신이 속해 있는 프로토타입 체인이 다르다.
2. 정적 메서드는 클래스로 호출하고 프로토타입 메서드는 인스턴스로 호출한다.
3. 정적 메서드는 인스턴스 프로퍼티를 참조할 수 없지만 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수 있다.

=> 프로토타입 메서드의 this는 호출한 인스턴스 객체를 가리키고, 정적 메서드의 this는 클래스를 가리킨다.

* 클래스의 인스턴스 생성 과정
1. 인스턴스 생성과 this 바인딩: 클래스를 호출하면 constructor의 내부 코드가 실행되기에 앞서 빈 객체가 생성되는데,
 이것이 클래스가 생성한 인스턴스이며 이 객체에 this가 바인딩 돰
2. 인스턴스 초기화: this에 바인딩 되어 있는 인스턴스에 프로퍼티를 추가하고 constructor가 인수로 전달받은 초기값으로 초기화 됨
3. 인스턴스 반환: 클래스의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.

프로퍼티

• 인스턴스 프로퍼티
  • constructor 내부에 정의해야 한다.
  • constructor 내부에서 this에 추가한 프로퍼티는 언제나 클래스가 생성한 인스턴스의 프로퍼티가 된다.
• 접근자 프로퍼티
  • get, set 함수를 사용해서 접근자 프로퍼티 만듬 (getter, setter)
  • 접근자 프로퍼티를 통해 프로퍼티 값 저장 및 참조 가능

- 클래스 필드 정의 제안
=> 클래스 필드:  클래스 기반 객체지향 언어에서 클래스가 생성할 인스턴스의 프로퍼티를 가리키는 용어

- 클래스 필드 정의 제안으로 인해 인스턴스를 정의하는 방식
1. 인스턴스를 생성할 때 외부 초기값으로 클래스 필드를 초기화할 필요가 있다면 constructor에서 인스턴스 프로퍼티 정의
2. 인스턴스를 생성할 때 외부 초기값으로 클래스 필드를 초기화할 필요가 없다면 클래스 필드 정의 제안 사용 가능

* 함수는 클래스 필드내에서 사용하는 것 권장하지 않음

- private 필드 정의 제안
=> #을 붙여 자바의 private 처럼 인스턴스를 관리 가능
=> 외부에서 private 필드에 접근하려면 접근자 프로퍼티 getter, setter로 접근해야 한다.
=> 반드시 클래스 몸체에서 정의해야 함

- static 필드 정의 제안
=> 정적 메서드만 정의할 수 있었지만 이제 최신 브라우저나 버전에는 구현 되어 있다.

2. 행맨 만들기

HTML, CSS, JS로만 이용해서 행맨 프로그램을 만들어보았다.

// 기능 목록

// step 1 문제 만들기
// 1. 문제가 결정되면 그 문제 수 대로 word에 새로운 Elements 추가 [o]

// step 2 정답 입력받기
// 1. 알파벳을 입력한다. [o]
// 2. 알파벳이 맞으면 answer container에 있는 해당 문자들이 보여진다. [o]
// 3. 알파벳이 틀리면 wrong answer container에 wrong과 해당 알파벳이 들어가 보여진다. [o]
// 4. 틀리면 fiqure parts가 하나씩 화면에 보이게 된다. [o]]
// 5. 중복된 값이 들어오면 notification 보여주기 [o]

// step 3 게임 끝내기
// 1. 단어와 correctLetters가 같으면 끝 [o]
// 2. figure parts.length 와 wrongLetters.length가 같으면 끝 [o]
// 3. 끝나면 화면에 final message 보여주기 [o]
// 4. 끝나고 보여진 popup 창에서 버튼 누르면 모두 리셋하고 다시 시작하기 [o]

이렇게 진행해 보았다.

github: https://github.com/SDWoo/20_Web_Projects_With_Vanilla_JS/tree/main/hangman