[TIL] JS : 객체를 생성하는 4가지 방법

21년 08월 05일의 소회

다른 사람들의 수준은 어떨지 모르겠지만 저는 진짜 쪼렙이고요? 엊그제 수업하는데 JS에도 클래스가 있다는 거 처음 알아서(원초적인 C언어는 절차 지향이라 전에도 객체 지향을 공부해본 적이 없는 저이기에..) 정말 들어야 할 강의들을 더이상 들을 수 없었다고 느꼈기 때문에 그래도 한 번은 제대로 공부해야겠다고 느껴서 어제는 하루종일 JS의 객체 지향을 공부했습니다.

그리고 밤에는 스터디 발표 주제인 정규 표현식을 정말 밤을 새워 봄. 그래도 이제 정규표현식이 뭔지 알게 됐으니 말도 안 되는 문자열 탐색 코드는 안 써도 된다는 것에서 오는 뿌듯함이 있네요.

아무튼 오늘은 모던자바스크립트를 공부할 계획이고 가능할 지 모르겠지만 밤을 새워 과제를 해야 하는데^_ㅠ.. 할 수 있겠죠? 그게 아직 뭔지도 잘 모르겠다고요. 하지만 모르는 건 잘못이 아니에요. 왜냐면 모른다는 사실을 알면 알 수 있으니까? (라는 생각을 매일 하며 KEEP GOING..)

✨JavaScript에서 객체(Object)를 생성하는 4가지 방법

1. Object Literal

일반적인 객체(Object) 생성을 통한 방법으로 번거롭고 매번 동일한 형식의 Object를 일일이 다 선언해줘야 하기 때문에, 코드의 효율성이 몹시 떨어진다는 단점이 있다.

2. Factory Function

🖐팩토리 펑션(Factory Function)이 무엇인가요?

"When a function returns an object, we call it a factory function."
 > object를 반환값으로 가지는 함수를 factory function이라고 부릅니다.

위의 예시 코드와 같이 Factory Function 안에서 생성을 희망하는 Object를 Object Literal로 작성해주면 된다. 하지만, 여기서 좀 더 효율적으로 코드를 구성하고 싶다면 Property와 Parameter가 동일한 이름을 갖는 경우에는 한쪽을 생략해줄 수 있다.

👇 예시는 아래와 같다.

👇 당연히 이렇게도 사용 가능하다.

3. Constructor Function : 생성자 함수

constructor function에서 가장 중요한 것은 this와 new라는 키워드인데,

예시처럼 Object를 생성하고자 하는 Constrctor Function을 생성하고 그 안에서 this 키워드를 이용해 그 Object의 property와 method를 주는 방식이라고 이해하면 될 것 같다. 그리고 해당 함수를 이용하여 새로운 객체를 생성할 때 new 연산자를 사용하면 된다.

1번에서 3번 방법까지가 원래 ES6 이전까지 JS에서 객체를 생성하는 주된 방법이었다고 할 수 있다. 그러나 ES6 이후 CLASS라는 키워드가 등장하면서 판도가 뒤집혔다고 해야 할까요?

4. 👋CLASS👋

class 키워드를 이용하면 위와 같이 객체를 생성할 수 있다. Object에 들어가길 바라는 Property들은 constructor(생성자) 틀을 만들고 그 안에 this 키워드를 활용해 정의해주면 된다. 해당 객체에서 사용을 희망하는 method는 constructor 틀 아래에 별도의 function 키워드 사용 없이 정의해줄 수 있다.

이전까지는 const로 객체를 정의한 후에 method를 따로 정의해주는 형태였으나 class에서는 그 안에다가 constructor를 사용해서 객체를 정의하고 그 아래에 method도 함께 정의해줄 수 있다는 점에서 차이가 있다.

👇 class와 같이 객체 지향에서는 다음과 같은 개념들도 함께 사용할 수 있다.

• 상속 : 어떤 객체가 다른 객체의 프로퍼티를 상속받을 수 있다.
  예를 들어, 우리가 계속 만들어 온 Car라는 객체를 활용하여 SuperCar를 만든다고 하면

이런 식으로 extends를 활용해 부모 클래스를 상속받을 수 있고 super 키워드를 이용해 부모 클래스의 property와 method를 상속받아 사용할 수 있다. 당연히 상속받은 부모 클래스의 property와 method와 동일한 부분 외에 추가해야 할 부분이 있다면 바로 하단에 코드를 추가하면 된다.

• 다형성 : 하나의 변수가 다양한 객체를 가리키며 많은 형태의 성질을 가지고 있을 수 있다는 것을 말한다. 상속에서 사용한 예제 코드를 활용한 예시 코드를 본다면,

이런 식으로 부모 클래스와 자식 클래스를 활용해 위와 같이 객체 네 개를 생성해 배열에 담은 후, 별도로 Object와 Method의 이름을 일일이 적어줄 필요 없이 forEach문 안에서 car라는 이름으로 배열에 담긴 모든 객체를 가리킬 수 있고 method 역시도 이전의 코드에서 부모 클래스와 자식 클래스 모두 drive()라는 동일한 메소드 명을 사용하였기 때문에 정상적으로 동작하게 된다.

이 외에도 객체 지향 프로그래밍에서 사용할 수 있는 것에는 캡슐화 개념도 있다. 하지만 캡슐화는 아직 클로저(closure) 및 get/set method에 대한 이해가 부족하여 공부를 더 해서 이해도를 좀 더 높인 다음에 써보도록 하겠다.

---

+) 객체 지향 프로그래밍이 가능한 언어 2가지

• 첫 번째는 클래스 기반의 객체 지향 언어
  ex) java, ...
• 두 번째는 프로토타입 기반의 객체 지향 언어
  ex) JavaScript, ...

프로토타입에 대해서도 다시 한 번 공부하고 써봐야 할 텐데 아직은 무리무리,,