TIL 2023.05.30_JS 5주차(5-4) 복습

김지혜·2023년 5월 30일
0

문제 조건

클래스 연습

[요구사항]
1. Car라는 새로운 클래스를 민들되, 처음 객체를 만들 때는
다음 네 개의 값이 함수로 입력되야 합니다.
[1] modelName
[2] modelYear
[3] type
[4] place
2. makeNoise() 메서드를 만들어 콜렉션을 출력해주세요.
3. 이후 사용자를 3개 정도 만들어주세요.

✔️어떤 문제가 있었는지

class car {
    constructor (modelName, modelYear, type, place);
    this.modelName = modelName;
    this.modelYear = modelYear;
    this.type = type;
    this.plice = plice;
}

이 위치에서 오류 발생

// 예기치 않은 토큰, 생성자, 메서드, 접근자 또는 속성이 필요합니다. ts(1068)
this.modelName = modelName;

✔️내가 시도해본 것들

- const로 사용자 입력:

토큰, 생성자, 메서드, 접근자 또는 속성이 필요하다는 말을 개체가 없기 때문이라고 잘못 받아들였다.

// EX.

const car1 = new Car("A", "2021", "휘발유", "2000");
const car2 = new Car("B", "2022", "경유", "3000");
const car3 = new Car("C", "2023", "하이브리드", "4000");

- 메서드 입력 / 오류 메시지 확인 후 코드 수정:

class에 메서드로 접근 시 변수 부분을 ${}로 감싼 것이 문제라고 생각.
(물론, 변수 부분을 ${}로 감싼 코드도 존재하지만. 오류가 발생했기에 ${}를 빼보기로 결정했다.)

// EX. 
console.log(`${this.name}` + "님 안녕하세요!");
$ node 03.js
C:\Users\user\Desktop\WEEK_5\03.js:23
        console.log(`${modelName} + "입니다.");

=> 

console.log(modelName + "입니다.");

✔️어떻게 해결 했는지

makeNoise () {
        console.log(`이 차량의 모델 이름은 ${this.modelName} 입니다.`);
    }

= class Car(설계도) 에서 modelName을 사용해 인스턴스에 항상 접근하기 위해서
=> this.()을 사용해야 한다.

디버깅 후 완성된 코드

class Car {
    constructor (modelName, modelYear, type, place) {
        this.modelName = modelName;
        this.modelYear = modelYear;
        this.type = type;
        this.plice = place; 
    }


    makeNoise () {
        console.log(`이 차량의 모델 이름은 ${this.modelName} 입니다.`);
    }
}

const car1 = new Car("A", "2021", "휘발유", "2000");
const car2 = new Car("B", "2022", "경유", "3000");
const car3 = new Car("C", "2023", "하이브리드", "4000");

car1.makeNoise();
출력결과
=> 이 차량의 모델 이름은 A 입니다.

✔️새롭게 알게된 것

= class와 인스턴스를 사용하기 위해선 명시가 중요하다는 것을 깨달았다.

물론 class나 인스턴스등 여러 관계에 따라 명시해야 하는 조건이 다르겠지만, 한 번 시행착오를 겪고나니 함수의 명시가 얼마나 중요한 것인가를 깨달았다.

0개의 댓글