자바스크립트 클래스 선언과 객체 만들기 (221110) - TIL4

Pablaw·2022년 11월 10일
0

TIL

목록 보기
4/20
post-thumbnail

스파르타코딩클럽에서 제공되는 자바스크립트 기본 강의를 수강하면서 너무 기본적인 내용이라 조금 아쉬웠지만 그 와중에도 내가 모르는 것이 있었다.

그것은 클래스와 객체! 나는 미처 모르고 있었지만 빼먹으면 안되는 중요한 내용이었다..!
항상 겸손한 자세로 배워야겠다..!


  • 클래스 기본 구조
class Notebook {
	constructor(name, price, company) {
		this.name = name
		this.price = price
		this.company = company
	}
}
  1. class 키워드와 클래스명을 선언한다. (Notebook)

  2. 생성자(constructor)와 함께 매개변수를 정한다.

    예시의 매개변수는 3개(name, price, company)

  3. this와 속성(property)

    this는 자기자신을 의미하는 객체.
    뒤에 붙는 name, price, company는 객체의 속성.

    (동시에 전달된 생성자의 매개변수)

즉, 클래스를 선언할 때 전달되는 매개변수객체의 속성으로 사용된다.


  • 객체 만들기
    const notebook1 = new Notebook('MacBook', 2000000, 'Apple')
  1. 변수를 선언하는 것처럼 간단하게 객체를 만들 수 있다.

  2. new라는 키워드를 붙여서 클래스명을 입력하고 해당 매개변수를 입력해주면 클래스에 사용되는 객체를 만들 수 있다.

  3. 생성자의 매개변수를 클래스 내 객체의 속성으로 값을 불러올 수 있듯이 객체로 선언된 경우에도 매개변수를 속성으로 사용하여 값을 불러올 수 있다.

console.log(notebook) // Notebook { name: 'Macbook', price: 2000000, company: 'Apple' } 
console.log(notebook.name) // MacBook
consoel.log(notebook.price) // 2000000
console.log(notebokk.company) // Apple

한마디로 클래스는 템플릿, 객체는 그것을 구체화한 것이라고 표현할 수 있다.

클래스를 선언하며 지정한 매개변수는 속성으로 사용할 수 있기 때문에 함수나 API 같이 값을 입력하면 리턴되는 공통점이 있다는 생각을 했다.

새롭게 알게된 개념에 신나서 지인과 대화를 했는데 대화를 마치고 생각해보니 함수보다는 json형태와 유사하다는 지인의 말이 더 알맞은 것 같다고 동의가 된다.

profile
반갑습니다, 프론트엔드 개발자를 꿈꾸고 있습니다 ! https://pablaw.github.io/profileLink/

0개의 댓글