🐨CoalaCoding
DocsExamplesTry itBoardB반
🐨CoalaCoding

개발자를 위한 한국어 웹 기술 문서

문서

  • JavaScript
  • Web Publishing
  • React
  • Python

커뮤니티

  • 게시판
  • 예제 모음
  • Try it 에디터

기타

  • GitHub
  • 관리자
© 2026 CoalaCoding. All rights reserved.
  • 01_start
  • 02_class
  • 03_ai이미지-생성기-구현
  • 04_자료형
  • 05_async--await
  • 06_변수와자료형
  • 07_xmlhttprequest-부터axios-까지
  • 08_1-자바스크립트와-ecma
  • 09_reduce
  • 10_캘린더-만들기
  • 11_generator
  • 12_destructuring
  • 13_spread-operator
  • 14_module-export-import
  • 15_http-통신-이란
  • 16_시작
  • 17_2-자바스크립트-코드-실행-과정-및-용어정리
  • 18_map
  • 19_동기와-비동기
  • 20_연산자
  • 21_promise-thencatch
  • 22_3-실행컨텍스트와-스코프
  • 23_콜백-함수
  • 24_제어문
  • 25_4-클로저
  • 26_windowlocation
  • 27_함수
  • 28_5-객체
  • 29_이벤트
  1. 홈
  2. 문서
  3. JavaScript
  4. JavaScript 기초
  5. 02_class

02_class

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

자바스크립트 클래스(JavaScript Class)

ℹ️INFO

📁 완성파일 https://jsfiddle.net/qwerew0/qfezhc0g/11/


1. 개요

  • class ? 객체 팩토리(공장) Class는 객체의 모양과 동작에 대해 미리 정의해 놓은 틀 클래스는 객체의 기본값(속성)을 정해놓고 메소드를 여러번 정의하기 위해씀

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

클래스 정의하기

클래스는 class 키워드를 사용하여 정의됩니다.

class ClassName {
  // 클래스 내용
}

클래스 생성자

클래스는 생성자를 가질 수 있습니다. 생성자는 클래스의 객체를 만들 때 호출되며 객체의 초기 상태를 설정하는 데 사용됩니다.

class ClassName {
  constructor() {
    // 생성자 내용
  }
}

클래스 메소드

클래스 내에서 메소드는 함수와 같이 정의됩니다. 메소드는 클래스의 객체에서 호출됩니다.

class ClassName {
  constructor() {
    // 생성자 내용
  }

  methodName() {
    // 메소드 내용
  }
}

클래스 상속

클래스는 다른 클래스를 상속할 수 있습니다. 상속은 extends 키워드를 사용하여 정의됩니다.

class ChildClassName extends ParentClassName {
  // 클래스 내용
}

참고: 위의 코드는 ES6에서 도입된 새로운 구문입니다. 따라서 구형 브라우저에서는 작동하지 않을 수 있습니다.


2. class 선언

클래스는 생성자함수와 메서드를 갖는다

  1. Dog 클래스에 생성자 함수를 선언하고 name 속성에 값을 할당한다. printName 함수에 name 을 콘솔로 출력하는 내용을 작성한다.

class Dog{
	constructor(){
	this.name="mango"
	}
	printName(){
	console.log(this.name);
	}
}
const dog= new Dog();
dog.printName();
  1. 상수에 new 키워드로 클래스 인스턴스를 할당한다
  2. 이제 상수 dog 은 Dog 인스턴스의 메소드를 사용할수 있다

3. class 상속

class Breed{
	constructor(){
	this.kind="말티즈";
	}
	printKind(){
	console.log(this.kind)
	}
}
class Dog** extends Breed**{
	constructor(){
**	super();**
	this.name="망고"
	}
	printName(){
	console.log(this.name);
	}
}
const dog= new Dog();
dog.printName();
dog.printKind();

Dog 는 Breed 의 속성을 상속받는다 서브클래스 Dog 에서는 super() 메소드를 호출해야 한다.

목차

  • 구문