[JavaScrpt] ES6 - 생성자 함수와 new 연산자

생성자 함수와 new 연산자

자바스크립트는 동적이고 유연한 언어로, 객체 지향 프로그래밍을 지원합니다. 특히 회원 정보나 상품 정보와 같이 다양한 속성을 가진 객체를 다룰 때, 생성자 함수는 유용한 도구 중 하나입니다. 이번 포스팅에서는 생성자 함수를 사용하여 객체를 만드는 방법에 대해 알아보겠습니다.

 

 

객체 지향 프로그래밍과 생성자 함수

객체 지향 프로그래밍은 현실 세계의 개념을 코드로 모델링하는 방법입니다.

자바스크립트에서 객체를 생성하는 방법에는 객체 리터럴과 생성자 함수가 있습니다. 각각의 특징과 활용법을 비교해보겠습니다.

 

객체 리터널

let user = {
	name : 'kim',
	age : 30,
}

 

가장 간단한 방법 중 하나는 객체 리터럴을 사용하는 것입니다. 위에서 제시한 user 객체가 그 예시입니다.

이렇게 선언된 객체는 간단하게 속성과 값의 쌍으로 구성되어 있습니다. 하지만 이러한 방식은 유사한 객체를 여러 개 생성할 때 코드의 재사용성이 낮아질 수 있습니다.

 

그렇기 때문에 회원정보나, 상품과 같이 유사한 객체를 효율적으로 생성하는 것을 '생성자 함수' 라고 합니다.

아래는 생성자 함수를 사용하여 유저 객체를 만드는 예시입니다.

// 생성자 함수는 대부분 첫글자를 대문자로
function User(name, age) {
 this.name = name;
 this.age = age;
}

// new 연산자를 사용해 호출
let user1 = new User('Kim', 30);
let user2 = new User('Lee', 22);
let user3 = new User('choi', 20);

 

생성자 함수는 객체와 혼동을 피하기 위해  첫글자를 대문자를 사용하는것이 일반적입니다.

생성자 함수를 통해 객체를 생성하면 객체 간에 구조가 일관성을 갖추며, 코드 재사용성이 높아집니다.

 

장단점 비교

객체 리터럴:

• 장점: 간단하고 직관적으로 객체를 생성할 수 있습니다.
• 단점: 유사한 객체를 여러 개 만들 때 코드의 중복이 발생할 수 있습니다.

생성자 함수:

• 장점: 유사한 객체를 효율적으로 생성하고 코드의 재사용성을 높일 수 있습니다.
• 단점: 코드가 조금 복잡해질 수 있으며, 초보자에게는 익숙하지 않을 수 있습니다.

 

생성자 함수 메서드 적용

자바스크립트에서 객체에 메서드를 추가하면 객체의 동작을 정의하고 더욱 유연한 코드를 작성할 수 있습니다. 이번에는 생성자 함수를 사용하여 객체를 만들고, 그 객체에 메서드를 추가하는 방법에 대해 알아보겠습니다.

 

생성자 함수 메서드 예제1

// 생성자 함수를 사용해 객체 생성
function User(name, age) { //'User'라는 생성자 함수를 정의하여 객체 생성
 this.name = name;
 this.age = age;
 
 // 메서드 추가
 this.sayName = function(){
 	console.log(this.name);
 }
 }

let user1 = new User('Kim', 30);
user1.sayName(); // 결과값 : Kim

 

console.log의 (this)는 하단에 선언한 user1을 뜻합니다.

그렇기 때문에 하단에 선언한 user1의 name인 kim이 콘솔에 찍힙니다.

 

 

생성자 함수 메서드 예제2

// 생성자 함수를 사용해 객체 생성
function Item(title, price){ //'Item'라는 생성자 함수를 정의하여 객체 생성
    this.title = title;
    this.price = price;
    // this의 price를 console에 보여준다.
    this.showPrice = function(){
        console.log(`${title} 은 ${price}원`);
    }
}

// 객체 생성
const Item1 = new Item('인형',3000);
const Item2 = new Item('가방',4000);
const Item3 = new Item('지갑',9000);

// 생성된 객체 출력
console.log(Item1,Item2,Item3);

// Item에 사용된 메서드 출력
Item3.showPrice();

 

결과

Item { title: '인형', price: 3000, showPrice: [Function (anonymous)] } 
Item { title: '가방', price: 4000, showPrice: [Function (anonymous)] } 
Item { title: '지갑', price: 9000, showPrice: [Function (anonymous)] }
나는 showPrice, 지갑은 9000원

 

예제2번을 실행하면, item3의 title과 price의 값이 나옵니다.

 

결론

생성자 함수를 사용하여 객체를 생성하고 메서드를 추가함으로써, 객체 지향적인 접근으로 코드를 작성할 수 있습니다. 이를 통해 코드의 유지보수성을 향상시키고 더 유연한 프로그래밍이 가능해집니다.