상식닷컴
로그인
가입하기
2026년 상식닷컴 선정 식당 & 카페 리스트
2025년 2026년 신상 호텔 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요
일주일 식단표 어플
자동 일주일 식단표 어플
안드로이드
아이폰
주식 & 코인 차트의 신
1000만원으로 2000만원 만들기 프로젝트
수정하기 - 자바스크립트에서 클래스(Class)란 무엇인가요?
닉네임
비밀번호
제목
내용
[이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]
<a href='https://sangseek.com/sangseeks/자바/ko'>자바</a>스크립트에서 클래스(Class)는 <a href='https://sangseek.com/sangseeks/객체/ko'>객체</a> 지향 프로그래밍(Object-Oriented Programming, OOP)의 개념을 구현하기 위한 구조로, 객체를 생성하기 위한 템플릿 역할을 합니다. 자바스크립트는 프로토타입 기반(prototype-based) 언어이지만, ES6(ECMAScript 2015)부터 클래스 문법이 도입되어 보다 직관적이고 간결하게 객체를 정의하고 생성할 수 있게 되었습니다. 클래스의 기본 구조자바스크립트에서 클래스는 `class` 키워드를 사용하여 정의합니다. 클래스는 생성자(constructor)와 메서드(method)를 포함할 수 있습니다. 생성자는 객체가 생성될 때 호출되는 특수한 메서드로, 객체의 초기 상태를 설정하는 데 사용됩니다.```javascriptclass Person { constructor(name, age) { this.name = name; this.age = age; } greet() { console.log(`안녕하세요, 제 이름은 ${this.name}이고, 나이는 ${this.age}세입니다.`); }}const person1 = new Person('<a href='https://sangseek.com/sangseeks/홍길동/ko'>홍길동</a>', 30);person1.greet(); // 안녕하세요, 제 이름은 홍길동이고, 나이는 30세입니다.```위의 예제에서 `Person` 클래스는 `name`과 `age`라는 두 개의 속성을 가지며, `greet`라는 메서드를 통해 인사하는 기능을 제공합니다. `new` 키워드를 사용하여 `Person` 클래스의 인스턴스를 생성할 수 있습니다. 클래스의 상속자바스크립트 클래스는 상속(inheritance)을 지원하여, 기존 클래스의 기능을 확장할 수 있습니다. 상속은 `extends` 키워드를 사용하여 구현합니다. 자식 클래스는 부모 클래스의 속성과 메서드를 상속받을 수 있으며, 필요에 따라 추가적인 속성과 메서드를 정의할 수 있습니다.```javascriptclass Employee extends Person { constructor(name, age, position) { super(name, age); // 부모 클래스의 생성자 호출 this.position = position; } work() { console.log(`${this.name}는 ${this.position}으로 일하고 있습니다.`); }}const employee1 = new Employee('김철수', 28, '개발자');employee1.greet(); // 안녕하세요, 제 이름은 김철수이고, 나이는 28세입니다.employee1.work(); // 김철수는 개발자로 일하고 있습니다.```위의 예제에서 `Employee` 클래스는 `Person` 클래스를 상속받아 `position`이라는 새로운 속성을 추가하고, `work`라는 메서드를 정의했습니다. `super` 키워드를 사용하여 부모 클래스의 생성자를 호출할 수 있습니다. 정적 메서드와 정적 속성클래스 내에서 `static` 키워드를 사용하여 정적 메서드(static method)와 정적 속성(static property)을 정의할 수 있습니다. 정적 메서드는 클래스의 인스턴스가 아닌 클래스 자체에 속하며, 인스턴스 없이 호출할 수 있습니다.```javascriptclass MathUtils { static add(a, b) { return a + b; }}console.log(MathUtils.add(5, 10)); // 15```위의 예제에서 `add` 메서드는 `MathUtils` 클래스의 정적 메서드로, 클래스 이름을 통해 직접 호출할 수 있습니다. 접근 제어자ES2022(ECMAScript 2022)부터는 클래스의 필드와 메서드에 대해 접근 제어자(access modifier)를 사용할 수 있습니다. ` ` 기호를 사용하여 프라이빗(private) 필드를 정의할 수 있으며, 이는 클래스 외부에서 접근할 수 없습니다.```javascriptclass BankAccount { balance; // <a href='https://sangseek.com/sangseeks/프라이빗 필드/ko'>프라이빗 필드</a> constructor(initialBalance) { this. balance = initialBalance; } deposit(amount) { this. balance += amount; } getBalance() { return this. balance; }}const account = new BankAccount(1000);account.deposit(500);console.log(account.getBalance()); // 1500// console.log(account. balance); // SyntaxError: Private field ' balance' must be declared in an enclosing class```위의 예제에서 ` balance`는 프라이빗 필드로, 클래스 외부에서는 직접 접근할 수 없습니다. 결론자바스크립트의 클래스는 객체 지향 프로그래밍의 개념을 구현하는 강력한 도구입니다. 클래스를 사용하면 코드의 재사용성을 높이고, 구조화된 방식으로 객체를 정의하고 관리할 수 있습니다. 상속, 정적 메서드, 접근 제어자와 같은 다양한 기능을 통해 복잡한 애플리케이션을 보다 쉽게 설계하고 구현할 수 있습니다. 이러한 클래스 기반의 접근 방식은 자바스크립트를 사용하는 개발자들에게 더 나은 코드 품질과 유지보수성을 제공하는 데 기여합니다.
이용안내
커뮤니티 이용안내
×
- 게시한 게시글로 발생하는 문제는 게시자에게 책임이 있습니다.
- 게시글이 타인/타업체의 저작권을 침해할 경우 모든 책임은 게시자에게 있습니다. 게시자가 모든 손해를 부담해야 합니다.
- 상식닷컴 운영자는 게시자와 상의하지 않고 게시글을 수정 또는 삭제할 수 있습니다.
- 상식닷컴 운영자는 깨끗한 커뮤니티 공간을 만드는 것이 1순위입니다.
수정하기
취소하기