[JavaScirpt - 문법] Class (1)

테크야끼·2021년 5월 1일

JavaScript

목록 보기

9/13

드림코딩 자바스크립트 프론트엔드 개발자 입문편 (JavaScript ES5+)을 공부하며 정리한 학습노트 입니다.

1.Class란?

클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. 쉽게말해 다양한 오브젝트를 만들기 위한 청사진이라고 생각할 수 있다.

2. Class and Object

Class

Template
Class를 간단하게 말하자면 객체를 만들어 내는 틀이다.
declare once
Class는 한 번만 선언된다.
No data in
Class는 틀이기 때문에 데이터가 올라가지 않는다.

Object

Instance of a class
Object는 class라는 템플릿 안에 실제로 데이터를 넣어 만든 이다.
Created many times
Object는 여러개 생성 가능하다.
Data in
Object는 실제로 데이터를 넣어 만든 것이며 메모리에 올라간다.

4.Class의 기본문법

Class 선언

// 1. declaration 
class Person {
  // 2. constructor
  constructor(name, age) {
    // 3. fields
    this.name = name;
    this.age = age;
  }

  // 4. methods
  speak() {
    console.log(`${this.name}: hello!`);
  }
}

declaration
class라는 키워드를 이용해 선언되며, class명의 첫 글자는 대문자로 쓴다.
constructor
생성자를 이용해 객체를 만들때 필요한 데이터를 전달한다.
fields
name과 age 두가지 필드에 바로 할당한다.
methods
메서드도 선언할 수 있다.

Class 사용

//1. create object
const hiko = new Person('hiko', 20);
console.log(hiko); //Person {name: "hiko", age: 20}
console.log(hiko.name); //hiko
console.log(hiko.age); //20

//2.method
hiko.speak(); //hiko: hello!

create object
new라는 키워드를 사용하여 객체를 생성한다. 이렇게 생성된 객체를 사용해야하기 때문에 변수에 담는다.
method
생성된 객체를 이용해 선언된 메서드를 사용할 수도 있다.

3.Class vs function

JavaScript에 Class가 도입된 것은 ES6로 비교적 최근이다. Class가 추가되기 전인 ES6 이전 시대는 Class를 정의하지 않고 function을 이용해 바로 객체를 정의할 수 있었다.

Class는 원래 존재하던 문법위에 프로토타입을 기반해서 class 문법만 추가된 것이라고 할 수있다. Class가 추가된 후에 객체지향언어의 성격을 가지게 되었다.

	Class(생성자 함수)	일반함수
포장내용	연관있는 변수와 함수	특정기능을 하는 변수와 구문
기능	객체 단위의 코드를 그룹화 객체 단위의 중복 코드 제거 및 코드의 재사용성	기능 단위의 코드를 그룹화 기능 단위의 중복 코드 제거 및 코드의 재사용성

Hoisting

함수 선언과 클래스 선언의 중요한 차이점은 함수 선언의 경우 호이스팅이 일어나지만, 클래스 선언은 그렇지 않다. 클래스를 사용하기 위해서는 클래스를 먼저 선언 해야한다.

4.그래서 객체지향이 대체 뭔데?

"객체지향에 대해 이해한 기분을 느낄수있는 재밌는 설명을 해주세요!"
야기미노루 610엔 후원

JavaScript를 공부하면서 객체지향이란 개념을 수없이 듣지만, 객체지향이란 단어를 만날 때 마다 나는 다시 구글을 켜 검색하고 MDN을 정독한다. 그럼에도 불구하고 그 다음에 객제지향이라는 단어와 맞딱뜨리면 난 다시 같은 행동을 반복한다.

그 이유에 대해서 생각해본 결과, 나의 첫 프로그래밍언어가 JavaScript 이기때문에 비교군이 머릿속에 존재하지 않아서 객체지향이라는 개념이 와닿지 않았다는 사실에 도달했다.

내가 스크립트를 공부한 시점은 이미 Class라는 편리한 문법이 추가된 이후이기 때문에 function을 이용해 object를 생성할 일이 거의 없다. 그렇기 때문에 Water is wet처럼 객체지향이란 개념자체가 나에게 너무 당연해서 이해가 잘 안되었던 것이다!

그런 도중 여느때처럼 유튜브의 바다를 헤엄치다가 일본의 평론가 히로유키의 영상을 발견했다 제목은 "객체지향은 어떤 개념인가?"

평소에 일침 트윗으로 유명세를 타고 티비에선 각 분야의 전문가와 토론해서 사이다 발언을 하는 헤비 인터넷유저 히로유키의 본업이 개발자였다는 사실에 1차적으로 놀랐고 영상을 다 보고 처음으로 객체지향 개념이 와닿았다는 사실에 놀랐다.

영상 속 히로유키가 꺼낸 예시가 나같은 객체지향을 알지만 모르는 초보 개발자에게 도움이 될 것 같아서 짧게 요약해보았다.

"만약 못생긴 사람의 사진을 특정 어플에 업로드하면 미남으로 바꾸어 주는 어플이 있다고 한다면 우리는 그 어플이 어떤 로직에 의해 동작하는지 알필요가 없고 사진을 넣기만 하면된다."

여기서 3가지 object가 있다고 가정해보자

1.사진을 찍는다.
2.사진을 미남으로 만든다.
3.인스타에 업로드한다.

이 세가지 obeject를 이어두기만 하면 이 어플이 작동하는 원리와 기술이 어떻든 간에 신경쓸 필요가 없고, 필요한 요소(사진)만 입력하면 결과적으로 원하는 결과를 얻을 수 있다.

반면 옛날 방식의 프로그래밍 방식은 하나부터 열까지 모두 프로그램 소스를 작성해 프로그램을 구동시키위해 전체를 파악해야만했다. 그러나 객체지향 프로그래밍에서는 코드가 예상대로 작동만 한다면 스콥을 확인하거나 건드릴 필요가 없다.

이렇게 생각하면 객체지향의 장점과 원리의 핵심을 조금은 더 와닿는다!

테크야끼

이전 포스트

[JavaScript - 실습] Random Lunch Slot

다음 포스트