Javascript ES6 이전까지는 비슷한 종류의 객체를 많이 만들어내기 위해 생성자를 사용해 왔으나, ES6 이후에서 Class라는 개념이 도입되면서 Class가 생성자의 기능을 대체하게 된다.
객체지향언어 ( ex : JAVA, C++ ... 등 ) 을 공부했던 사람들이라면 바로 이해하고 익힐 수 있을 것이라고 생각한다.
Class를 사용하는 가장 큰 이유는 재사용성이다.
예시로 여러 동물들에 대한 정보를 저장해야 한다고 가정할 때 동물들은 기본적으로 "name", "age"라는 속성을 갖고, "walk"라는 method를 갖는다고 가정을 한다면 동물마다 하나하나 해당 속성을 정의하게 되면 동물의 수가 적을 경우에는 간단할 수 있지만 100마리, 1000마리, 10000마리 ... 를 정의한다고 가정하면 매우 시간이 많이 들고 코드의 수가 길어지며 가독성이 떨어질 수 있다.
이렇게 속성이 중복되는 경우 하나의 Class로 해당 속성들을 정의하면 코드가 훨씬 짧아질 뿐만아니라, 가독성 또한 상승된다.
아래 코드가 그 예시이다.
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
this.position = 0;
}
Walk() {
this.position += 1;
}
}
const Rabbit = new Animal("토끼",3);
const Dog = new Animal("개",2);
console.log(Rabbit);
Rabbit.Walk();
console.log(Rabbit.position);
console.log(Dog);
console.log 출력 값
Class 기본 문법
Class 생성하기
class 생성하는 것은 간단하다. class 다음에 만들고자 하는 class 이름을 입력한 후 중괄호로 닫아주면 된다.
class "className" {
}
let classTest = new "className"();
console.log(classTest);
// console.log 결과 "className" {}
Class 초깃값 설정
class의 초깃값은 constructor라는 생성자를 이용하여 설정할 수 있다. class 내부에는 한 개의 constructor만 존재할 수 있으며, 2개 이상 선언 시 아래와 같은 Syntax Error가 발생한다.
Uncaught SyntaxError: A class may only have one constructor
class Animal {
constructor( name , age , position ) {
this.name = name;
this.age = age;
this.position = position;
}
}
const Rabbit = new Animal("rabbit",2,5);
console.log(Rabbit);
// Animal { name : "rabbit", age : 2, position : 5 }
Class method 생성/사용
class의 method는 function 형식으로 만들어 준다. 해당 메서드를 사용할 경우 " 객체가 담긴 변수명.메소드() " ( Rabbit.Walk() ) 형식으로 호출 가능하다.
class Animal {
constructor( name , age , position ) {
this.name = name;
this.age = age;
this.position = position;
}
Walk(){
this.position += 1;
}
}
const Rabbit = new Animal("rabbit",2,5);
console.log(Rabbit);
// Animal { name : "rabbit", age : 2, position : 5 }
Rabbit.Walk();
Rabbit.Walk();
console.log(Rabbit);
// Animal { name : "rabbit", age : 2, position : 7 }
class내부에서 메소드를 정의하는 것이 아닌 class 외부에서도 메소드 정의가 가능하다. 그러나 class 자체에 추가하는 것이 아닌 class 객체를 담고 있는 변수에서 추가하는 것이기 때문에 해당 변수외의 또 다른 Animal class 객체를 담고 있는 변수의 경우 외부에서 정의한 메소드 사용이 불가능하다.
아래 코드를 참고하여 보자.
class Animal {
constructor( name , age , position ) {
this.name = name;
this.age = age;
this.position = position;
}
Walk(){
this.position += 1;
}
}
const Rabbit = new Animal("rabbit",2,5);
Rabbit.Jump = function(){
return `${this.name} jump`
}
console.log(Rabbit);
// Animal { name : "rabbit", age : 2, position : 5 }
Rabbit.Walk();
console.log(Rabbit.Jump()); // rabbit jump
console.log(Rabbit);
// Animal { name : "rabbit", age : 2, position : 6 }
extends 상속
class에는 상속이라는 개념을 사용할 수 있다. 예제를 보면 더 쉽고 빠르게 이해할 수 있을 것이다.
상속받은 class의 속성, method를 모두 사용할 수 있다.
class Animal {
constructor( name , age , position ) {
this.name = name;
this.age = age;
this.position = position;
}
Walk(){
this.position += 1;
}
}
class Rabbit extends Animal {
Jump(){
console.log("Rabbit Jump");
}
}
class Dog extends Animal {
Bark(){
console.log("Wang Wang!");
}
}
const dog = new Dog("meonzy",3,10);
const rabbit = new Rabbit("tosun",2,9);
dog.Bark();
dog.Walk();
rabbit.Jump();
rabbit.Walk();
super 키워드
super 키워드를 사용하여 자식 class에서 부모 class를 호출할 수 있다. 주로 constructor에서 많이 사용한다.
class Animal {
constructor( name , age , position ) {
this.name = name;
this.age = age;
this.position = position;
}
Walk(){
this.position += 1;
}
}
class Rabbit extends Animal {
constructor(name, age, position, jumpSkill){
super(name,age,position);
this.jumpSkill = jumpSkill;
}
Jump(){
console.log(`Rabbit ${this.jumpSkill} jump`);
}
}
class Dog extends Animal {
Bark(){
console.log("Wang Wang!");
}
}
const dog = new Dog("meonzy",3,10);
const rabbit = new Rabbit("tosun",2,9,"100%);
dog.Bark();
dog.Walk();
rabbit.Jump();
rabbit.Walk();
Set object 는 map과 함께 ES6에 새로 도입된 자료구조로, 자료형에 관계 없이 원시 값 (primitive value)과 객체 참조 모두 유일한 값을 저장할 수 있다. Set은 중복을 허용하지 않는 데이터 집합으로 Set을 사용하게 되면 데이터에 빠르게 액세스를 할 수 있다.
Set은 중복을 확인하기 위해서 자동으로 형변환을 해주지 않기 때문에 1 과 "1"은 다른 것으로 처리 된다.
forEah와 for of로 값에 접근이 가능하다.
Set object는 value collection으로 삽인 순서대로 요소를 순회할 수 있다. NaN과 undefined도 Set에 저장할 수 있다. NaN !== NaN이지만, Set내에서는 NaN은 NaN과 같은 것으로 간주한다.
const set = new Set([1,2,3,4,5]);
console.log(set.has(1)); // true
console.log(set.has(6)); // false
구문
new Set( [ iterabled ] );
매개변수
iterable : 반복 가능한 객체가 전달된 경우 그 요소는 모두 새로운 Set에 추가된다. 만약 매개변수를 명시하지 않거나 null을 전달하면, 새로운 Set은 비어 있는 상태가 된다.
반환 값
새로운 Set object
속성
Set.prototype.add() : 요소 추가
Set.prototype.clear() : Set Object 비우기
Set.prototype..Set() : constructor
Set.prototype.delete('value') : 해당 값 Set에서 삭제
Set.prototype..forEach : 반복문
Set.prototype..entries : map에서의 entries와 동일, 순회할 수 있는 Interator로 반환
Set.prototype..values() : Set내의 value들을 순회할 수 있는 Interator로 반환
Set.prototype..has('value') :해당 값을 가지고 있는 판별 boolean return
