[JavaScript]클래스(class) 문법

2021. 4. 22. 19:53JavaScript/Basic

class Team {
    constructor (name,age) {
        this.name = name,
        this.age = age;
    }
}

 

Team이라는 class를 만들어 줍니다
그안에서 최초로 데이터를 할당받고 반환할 함수가 필요합니다
그래서 class를 만들어주면 constructor이라는 함수가 한 쌍으로 같이 만들어 주어야합니다

constructor은 앞서 말했듯이 데이터를 할당받고 반환하게 될 함수이기 때문에 매개변수로
데이터를 받아올 준비를 해야합니다
이때 this.name ,this.age 등등 this 뒤에 붙는 워드는 상황에 맞게 지정해주면 됩니다

또 이때 this가 가리키는건 함수 특성상 window를 가르키는것 처럼 보일수 있지만,
현재는 객체형태로 데이터를 가지고 있기 때문에 Team을 가르키고 있습니다

 

class Team {
    constructor (name,age) {
        this.name = name,
        this.age = age;
    }
}

let minsu = new Team('minsu','25');
let coder = new Team('coding','21');

 

class는 여러객체를 한 공간에 담아주는 객체박스 라고 이해하시면 편합니다
그렇기 때문에 값을 할당해줄때도 변수형태로 만들어주면서
은 new라는 워드를 이용해서 할당해주어야 합니다

그렇게 값을 할당 해준뒤 변수로 호출을 해보겠습니다

 

class Team {
    constructor (name,age) {
        this.name = name,
        this.age = age;
    }
}

let minsu = new Team('minsu','25');
let coder = new Team('coding','21');

console.log(minsu);
console.log(coder);

 

두개의 변수를 모두 호출하게 되면 

 

Team { name: 'minsu', age: '25' }
Team { name: 'coding', age: '21' }

 

라는 Team이라는 객체가 가지고 있는 정보를 잘 가지고 온걸 볼수있습니다

class의 장점은 객체를 constructor이라는 함수 뿐만 아니라 추가로 다른 함수들을 더 생성하고 서로 데이터를 공유할 수가 있으며, 그걸 상속이라고 합니다

상속이란 기존에 생성된 생성자(부모)를 기준으로 새롭게 생성된 생성자(자식)가 속성과 메서드를 물려받는걸 말합니다

그말은 즉슨 Team이라는 부모 아래에 constructor과 같은 자식이 여러개 있다고 한다면
Team의 자식들은 서로의 속성과 메서드를 Team라는 부모 아래서 서로 공유할 수 있다는 말입니다

또 다른 장점으로는 캡슐화가 있습니다

캡슐화 라는건 데이터를 외부에서 접근하지 못하게 저장하는 방법을 말합니다
간단한 예제로는 블록스코프인 변수를 블록안에 넣어두고 밖에서 호출하는것을 예로 들수 있을거같습니다
앞서 설명 드린 이 방식을 더 고차원적으로 또, 데이터를 한곳이 아닌 여러곳에 분할해서 저장하는 방식이 캡슐화라고 할수있습니다

왜 캡슐화를 해야하는가? 라는 의문이 들수있습니다
간단하게 사용자에 정보를 객체로 저장하게끔 코딩이 되어있는데 외부에서 쉽게 접근이 가능하게 된다면 사용자들의 데이터는 쉽게 위험에 노출되게 될수있습니다

극단적인 상황을 예로 들었는데 캡슐화를 해서 데이터를 저장해야 하는 이유가 어느정도 감이 오셧나요??

class문법을 사용하면 안에서 상속이 가능한 이점이 있기 때문에 나중에 복잡한 작업을 할때에도 좀더 편하다고 하니 손에 익혀두시는걸 추천드립니다

'JavaScript > Basic' 카테고리의 다른 글

[JavaScript]class + canvas(1)(code)  (0) 2021.04.22
[JavaScript]객체(Object)  (0) 2021.04.20
[JavaScript]함수(Function)문법  (0) 2021.04.02
[JavaScript]변수 var,let,const  (0) 2021.04.02