클래스(Class)
JavaScript에서 클래스는 객체 지향 프로그래밍을 구현하는 하나의 방법으로, ES6에서 도입되었다. 클래스는 프로토타입 기반 상속을 위한 Syntactical Sugar로, 보다 쉽고 명확한 객체 생성 및 상속 방식을 제공한다.
클래스 선언
클래스는 class 키워드를 사용하여 선언한다. 생성자 함수(constructor)를 통해 객체의 초기 상태를 설정할 수 있다.
class Person {
// constructor
constructor(name, age) {
// fields
this.name = name;
this.age = age;
}
// methods
speak() {
console.log(`${this.name}: hello!`);
}
}
const ellie = new Person('ellie', 20);
console.log(ellie.name); // ellie
console.log(ellie.age); // 20
ellie.speak(); // ellie: hello!Getter와 Setter
getter와 setter를 사용하여 클래스 내부의 속성을 보다 세밀하게 제어할 수 있다.
class User {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
get age() {
return this._age;
}
set age(value) {
// if (value < 0) {
// throw Error('age can not be negative');
// }
this._age = value < 0 ? 0 : value;
}
}
const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);필드(Field)
ES6 이후의 클래스는 공개(public) 및 비공개(private) 필드를 지원한다.
class Experiment {
publicField = 2;
#privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField); // 2
console.log(experiment.privateField); // Error 접근 불가Static 속성과 메서드
정적(static) 속성과 메서드는 클래스 인스턴스가 아닌 클래스 자체에 바인딩된다.
class Article {
static publisher = 'Dream Coding';
constructor(articleNumber) {
this.articleNumber = articleNumber;
}
static printPublisher() {
console.log(Article.publisher);
}
}
const article1 = new Article(1);
const article2 = new Article(2);
console.log(Article.publisher); // Dream Coding
Article.printPublisher(); // Dream Coding상속
상속은 한 클래스가 다른 클래스의 속성과 메서드를 확장(extend)할 수 있게 해준다.
class Shape {
constructor(width, height, color) {
this.width = width;
this.height = height;
this.color = color;
}
draw() {
console.log(`drawing ${this.color} color!`);
}
getArea() {
return this.width * this.height;
}
}
class Rectangle extends Shape {}
class Triangle extends Shape {
draw() {
super.draw();
console.log('🔺');
}
getArea() {
return (this.width * this.height) / 2;
}
toString() {
return `Triangle: color: ${this.color}`;
}
}
const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw(); // drawing blue color!
console.log(rectangle.getArea()); // 400
const triangle = new Triangle(20, 20, 'red');
triangle.draw(); // drawing red color! 🔺
console.log(triangle.getArea()); // 200InstanceOf
instanceof 연산자를 통해 객체가 특정 클래스의 인스턴스인지 확인할 수 있다.
console.log(rectangle instanceof Rectangle); // true
console.log(triangle instanceof Rectangle); // false
console.log(triangle instanceof Triangle); // true
console.log(triangle instanceof Shape); // true
console.log(triangle instanceof Object); // true객체(Object)
JavaScript에서 객체는 데이터와 기능을 함께 묶은 데이터 타입이다. 대부분의 JavaScript 객체는 Object 인스턴스로, { key: value } 형태로 표현된다.
객체 생성
객체는 리터럴 문법 또는 생성자 문법을 사용하여 생성할 수 있다.
const obj1 = {}; // 객체 리터럴 문법
const obj2 = new Object(); // 객체 생성자 문법
function print(person) {
console.log(person.name);
console.log(person.age);
}
const ellie = { name: 'ellie', age: 4 };
print(ellie); // ellie, 4
// 동적 타이핑 특성으로 인해, 객체에 나중에 속성을 추가하거나 삭제 가능
ellie.hasJob = true;
console.log(ellie.hasJob);
delete ellie.hasJob;
console.log(ellie.hasJob);Computed Properties
문자열 형태의 키를 통해 속성에 접근할 수 있다.
console.log(ellie.name);
console.log(ellie['name']);
ellie['hasJob'] = true;
console.log(ellie.hasJob);
// 이럴 떄 유용
function printValue(obj, key) {
console.log(obj[key]);
}
printValue(ellie, 'name');
printValue(ellie, 'age');Property Value Shorthand
객체 리터럴에서 속성의 키와 값 이름이 동일한 경우, 단축 문법을 사용할 수 있다.
const person1 = { name: 'bob', age: 2 };
const person2 = { name: 'steve', age: 3 };
const person3 = { name: 'dave', age: 4 };
const person4 = new Person('elile', 30);
console.log(person4);생성자 함수
생성자 함수를 사용하여 동일한 형태의 객체를 여러 개 생성할 수 있다.
function Person(name, age) {
// this = {};
this.name = name;
this.age = age;
// return this;
}in
in 연산자를 사용하여 객체 내 특정 키가 있는지 확인할 수 있다.
console.log('name' in ellie);
console.log('age' in ellie);
console.log('random' in ellie);
console.log(ellie.random);반복문: for..in, for..of
for..in은 객체의 모든 열거 가능한 속성을 순회할 때 사용되며, for..of는 반복 가능한 객체(배열 등)을 순회할 때 사용된다.
for (let key in ellie) {
console.log(key);
}
// for (value of iterable)
const array = [1, 2, 4, 5];
for (let value of array) {
console.log(value);
}객체 복제
Object.assign() 메서드를 사용하여 객체를 복제할 수 있다.
const user = { name: 'ellie', age: '20' };
const user4 = Object.assign({}, user);
console.log(user4); // { name: 'ellie', age: '20' }
const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big' };
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color); // blue
console.log(mixed.size); // big