밸~하

밸로그 여러분 안녕하세요!

오랜만에 공부를 다시 시작했습니다

그동안 프론트엔드 개발자로 취업을 해서 정신이 없어서 별도로 공부를 하지 못했는데요!
오늘부터 다시 작성해보겠습니다!

오늘은 javascript의 class에 대해서 알아보겠습니다

평소에는 class를 사용하지 않았는데 최근 협업을 하면서
다른분들이 class를 사용해서 객체를 생성하는 것을 보고
다른분들의 코드를 이해하기위해 class에 대해서 학습하고자 합니당

먼저 javascript의 class란 무엇일까요?

1.javascript의 class

MDN 공식문서에서는 이렇게 설명하고 있습니다

Class는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화합니다.
JavaScript에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가집니다.

또한 class의 정의에 대해서는 이렇게 설명하고 있습니다 .

Class는 사실 "특별한 함수"입니다. 함수를 함수 표현식과 함수 선언으로 정의할 수 있듯이 class 문법도 class 표현식 and class 선언 두 가지 방법을 제공합니다.

이 두가지 내용을 보고 저는 이렇게 생각했습니다.

"class란 객체를 생성해주는 생성자이고 함수와 같이 두가지 방법으로 선언을 할 수 있다"

라고 생각했습니다.

그런데 문득 이렇게 고민이 들었습니다.
함수로도 객체를 생성해서 만들어줄수 있는데 class를 사용하는 이유는 무엇일까?

그냥 화살표 함수를 이용해서 return값을 객체로 주면 되는거 아닌가?

이런 의문을 가지면서 공식문서와 강의들을 보게되었는데요

사용하려고 하는 상황과 목적에 따라서 다르게 사용이 된다는 것을 알게 되었습니다

2. class와 함수선언식 및 표현식 의 차이

class에 대해서 이야기를 먼저 드리겠습니다.

class는 객체 지향프로그래밍 즉 OOP의 개념을 지원하는 javascript의 기능중 한가지 입니다.

class는 ES6부터 도입이 되었으며, 이 class문법을 통하여 보다 명시적이고 구조적인 객체지향 코드를 작성할 수 있게 해줍니다.

class를 통해서 객체를 생성하고 해당 객체에 대한 속성과 method를 정의할 수 있습니다.

또한 class는 생성자(constructor)라는 것을 사용해서 객체를 초기화 하고, class내부에서 다양한 method를 정의 할 수 있게 해줍니다

또한 class는 객체지향의 상속의 기능을 지원하고 있습니다

반면에 화살표 함수나 함수 선언식 또는 표현식의 경우

함수를 변수에 할당하는 방식으로 정의 됩니다.

주로 익명함수를 생성할때 사용되며, 변수에 할당된 함수는 해당 변수를 통해서 호출됩니다.

함수 표현식은 함수를 변수에 할당할 수 있는 유연성을 제공하며 클로저(Closure)등의 개념을 활용할 수 있습니다.

이렇게 보면 각각의 특징을 알 수가 있는데요

가장 두드러지는 차이는 바로

"class와 함수 표현식의 차이는 주로 목적과 사용사례에있다" 라는 것을 알 수 있습니다.

• class형의 경우 객체 지향 프로그래밍의 구조를 제공하며, 생성자, 메서드, 상속 등을 활용하여 코드를 구성할때 유용합니다.

• 반면에 함수 표현식의 경우 주로 함수를 변수에 할당하여 사용하고, 간단한 익명함수를 만들때나 클로저 등의 고급기능을 활용할 때 유용합니다.

즉, 코드 작성의 목적과 환경에 따라 각각 선택해서 사용 하면 된다는것입니다 .

이렇게 차이점을 알아봤으니 class에 대해서 마저 알아보도록 하겠습니다.

3. class 학습

먼저 class를 선언하는 법입니다

class의 선언

class를 정의하는 한가지 방법은 class선언을 이용하는 것입니다 .

class를 선언하기 위해서는 클래스의 이름과 함께 class키워드를 함께 사용해야합니다.

아래는 mdn에서 제공하고 있는 예제입니다

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

이렇게 class 뒤에 class name을 작성해주고 constructor를 사용하여 객체를 생성할 수 있게 됩니다.

그럼 이제 class body에 대해서 한번 확인해 보겠습니다.

class body와 method정의

• class body란 무엇일까요?

MDN 공식문서에서는 이렇게 정의하고 있습니다.

Class body는 중괄호 {} 로 묶여 있는 안쪽 부분입니다. 이곳은 여러분이 메서드나 constructor와 같은 class 멤버를 정의할 곳입니다.

즉 위의 class선언에서 본것과 같이 class명 뒤에있는 {}중괄호 부분 안쪽이라는 것을 알 수 있습니다.

class의 본문(body)는 strict모드에서 실행됩니다.
즉, 본문에 적힌 코드는 성능 향상을 위해 더 엄격한 문법이 적용된다는 의미 입니다.
만약 문법을 어기게 된다면 오류가 발생할 수 도있다는 것입니다.

이다음에 볼 것은 앞서 자주 이야기 드렸고 코드에서도 보았던

constructor(생성자)입니다.

• constructor(생성자)란 무엇일까요?

MDN 공식문서를 확인해 보겠습니다.

constructor 메서드는 class 로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드입니다. "constructor" 라는 이름을 가진 특수한 메서드는 클래스 안에 한 개만 존재할 수 있습니다. 만약 클래스에 여러 개의 constructor 메서드가 존재하면 SyntaxError 가 발생할 것입니다.

즉 생성자를 통해서 class에서 객체를 생성 할 수 있다는 것을 알 수 있습니다 .

그다음은 이야기 드릴것은 method입니다.

class에서는 method를 정의해서 class를 호출 할 때 method를 사용하여 특정 로직을 수행할 수 있게 하는데요.

class에는 프로토타입 method 와 정적 method가 존재 합니다 .

먼저 프로토타입 method에 대해서 알아보겠습니다.

• 프로토타입 method

프로토 타입 method는 클래스의 프로토타입 객체에 추가된 메서드를 가리킵니다.
또한, class로 생성된 각 인스턴스에서 사용할수 있습니다 .

(instance는 class를 통해서 생성된 객체를 의미합니다.)

인스턴스를 통해 호출되며 ,메서드 내부의 'this'는 호출한 인스턴스를 가리킵니다.

즉, 프로토 타입 method라는 것은 저희가 흔히 알고있는 객체에서 key값으로 호출할 수 있는 함수라는 것입니다.

한번 예제 코드를 봐보겠습니다.

class Person {
  constructor(name) {
    this.name = name;
  }

  // 프로토타입 메서드
  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const person = new Person('John');
person.sayHello(); // 출력: Hello, my name is John.

이런식으로 person이라는 객체를 만들어서
person.sayHello()로 접근해서 사용할 수 있는것이 프로토타입 method입니다.

이번에는 정적(static)method에 대해서 알아보겠습니다

• 정적(static) method

정적 타입 method는 class의 인스턴스가 아닌 class자체 연결되어 있는 method입니다.

클래스의 인스턴스를 생성하지 않고도 호출 할 수 있습니다.

정적 method내부에서는 'this'가 클래스 자체를 가리키며 인스턴스의 속성으로는 접근할 수 없습니다.

즉, 정적(static)타입 method라는 것은 class자체에서만 사용가능 하고 class를 통해서 생성된 객체에서는 사용 할 수 없다는 것을 알 수 있습니다.

한번 예제 코드를 봐보겠습니다.

class Calculator {
  // 정적 메서드
  static add(a, b) {
    return a + b;
  }
}

const result = Calculator.add(2, 3);
console.log(result); // 출력: 5

이런식으로 객체를 생성하지 않고 class.method 형식으로 직접 사용하고 객체를 사용하고 호출할 경우

const res= new Calculator(2,3)

console.log(res) //Calculator호출
console.log(res.add)//undefined

이런식으로 계산 값이 아닌 Calculator가 나오는 것을 알 수 있습니다.
또한 이런식으로 static method에 접근하려고 하면 undefined가 나오는 것을 알 수 있습니다 .

이러한 정적 method는 주로 어디에 사용될까요 ??

바로 어플리케이션(application)을 위한 유틸리티(utility) 함수를 생성하는 데 주로 사용됩니다.

마지막으로 간단히 이야기를 드리면, 프로토타입 method는 인스턴스마다 다르게 동작하는 method이고 정적 method는 class전체와 관련이 있는 method라는 것을 알 수 있습니다.

오늘은 class의 정의와 class와 함수표현식및 선언식과의 차이 class의 body와 method의 종류에 대해서 알아보았습니다 .

막상 class에 대해서 정리하려고 하니 정리할게 너무나 많고 학습할게 많아서 파트를 나눠서 정리해야겠네요!

다음 포스트 글은 class-2 로 class의 인스턴스 속성과
private, extends등을 학습하도록 하겠습니다.

감사합니다!

밸~바~