[Javascript] 객체 만드는 방법

2022년 12월 24일 작성

데이터 타입

자바스크립트에서 데이터 타입은 크게 두 가지로 나뉜다. 원시 타입과 객체 타입이다. 원시타입은 '변경 불가능한 값'으로 우리가 자주 쓰는 number,string, boolean을 포함해 null, undefinded, symbol이 있다. 원시타입을 제외한 나머지 타입은 객체 타입이다.

 

객체 타입은 key와 value로 구성된 프로퍼티(dog(key) : 'happy'(value)) 또는 함수인 메서드로 구성된다. 자바스크립트는 객체 기반의 언어이기 때문에 자바스크립트에서 객체는 매우 중요한 부분이고, 차후 서버에 데이터를 요청하고 받을 때 객체에 담긴 데이터를 주고 받으니 객체를 좀더 공부해야겠다는 생각이 들었다. 그래서 오늘은 나에겐 아직 낯선 class 와 constructor 에 대해 알아보았다.

객체를 만드는 법

user라는 객체를 만들 때 상단과 같이 만들 수 있다. 그런데 또 다른 유저의 정보를 담은 객체를 만들고 싶으면 어떻게 해야 할까? user라는 객체를 만든 것처럼 user2 의 id, address, sayHello 함수를 직접 하나씩 작성해줘야 할까? 이러한 방식을 객체 리터럴에 의한 객체 생성 방식이라고 하는데, 이 방법을 사용하면 user의 수가 많아질수록 코드는 길어지고, 관리하기 힘들어질 것이다.

 

다행히도 자바스크립트에는 객체를 쉽게 뚝딱뚝딱 만들 수 있는 방법이 있다. 여러가지 있지만 그 중 세 가지를 알아볼 것이다. 첫째로 factory function , 둘째로 constructor function, 셋째로 class 이다.

Factory Function

factory function 은 공장에서 물품을 하나씩 찍어 대량 생산하듯 객체를 대량으로 만들 수 있는 함수이다. makeUser 함수를 만들어두면 user1, user2, user3을 쉽게 만들 수 있다.

 

이때 user 프로퍼티와 파라미터가 같을 땐 id, address, sayHello()와 같이 축약할 수 있다고 해서 두 값이 다르면 어떻게 될까 궁금해졌다. user의 key 값을 id가 아닌 nickname 으로 쓰고 싶으면 nickname : id 로 써주면 된다. id : nickname 으로 바꾸면 "ReferenceError: nickname is not defined 오류가 난다.

 

Constructor Function

factory 함수에선 id : id 와 같이 콜론을 사용했지만, constructor 함수에선 this.id = id 로 등호로 표현한다. 그리고 constructor 함수에는 return문이 없다는 점이 눈에 띈다. 이 외에도 this가 보이는데, this는 constructor 함수로 생성할 수 있는 해당 객체를 의미한다. user1 에서 this 라고 하면 user1 객체 자체를 뜻한다. user1처럼 constructor 함수로 만들어진 객체를 instance 라고 한다.

 

constuctor 함수에서는 두 가지 규칙이 있다. 하나는 함수의 이름 첫 글자는 대문자로 쓰는 것이고, 다음은 new 연산자를 꼭 붙여서 함수를 실행해야 한다는 것이다. 이 규칙 말고도 알아야 할 것이 있다. constructor 함수는 화살표 함수가 아닌 일반 함수(function ()) 형태로 작성해야 한다는 점이다. 화살표 함수 사용이 습관이 되었는데 constructor 함수를 작성할 때만큼은 일반 함수로 작성하도록 유의해야겠다.

Class

class 키워드는 class를 사용해 객체의 틀을 정의하고, 앞에 new를 붙여 객체를 생성한다. class 하단에는 constructor와 매개변수를 작성해준다. 또 이전 방식들은 프로퍼티와 메소드를 하나의 중괄호 안에 넣었다면, class 키워드에서는 constructor 안에는 프로퍼티만 정의하고, 메소드는 constructor의 밖에 정의해야 한다.

 

이렇게 간단하게 세 가지의 객체를 만드는 방식을 알아보았다. 또 공부하고 싶은 자바스크립트 개념이 있어서 다음에는 그 주제로 글을 작성해야겠다!