객체 지향 프로그래밍
- 객체 지향 프로그래밍은 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그랭 패턴이다.
- 청사진은 생산을 위한 설계도에 비유를 할 수 있다.
- 자바스크립트에는 "객체"라는 개념이 객체 지향 프로그래밍과 무관하게 이미 존재하기 떄문에 용어를 잘 구분하는 것이 중요하다.
- 객체가 아닌 "청사진"을 바탕으로 한 객체는 인스턴스 객체(instance object) 줄여서 인스턴스(instance)라고 부른다.- 청사진은 클래스(class)라고 부른다.
객체를 어떤 식으로 만들까?
- 그냥 일반적인 함수를 정의하듯 만든다.
- 함수를 이용하는 방법이 조금 다르다. 일반적으로 실행하는 것이 아니며, new 키워드를 써서 만든다. 이는 새로운 인스턴스를 만드는 방법이다.
- 일반적인 다른 함수와 구분하기 위해 클래스는 보통 대문자로 시작하며 일반명사로 만든다.
- 일박적인 함수는 적절한 동사를 폼하하고 소문자로 시작한다.
클래스를 만드는 새로운 문법이 Es6에 도입 되었다.
//Es5 클래스는 함수로 정의할 수 있다.
function Car(brand, name, color){
// 인스턴스가 만들어질 떄 실행되는 코드
}
// Es6 에서는 class라는 키워드를 이용해서 정의할 수도 있다.
class Car {
conatructor(brand, name, color){
// 인스턴스가 만들어질 떄 실행되는 코드
}
}- class 키워드를 이용
- 여기서 보이는 함수는 객체지향 프로그래밍에서 생성장(constructor)함수라고 부른다.
- 인스턴스가 만들어질 떄 실해오디는 코드이다.
- 참고로 생성자 return 값을 만들지 않는다.
new키워드를 통해 클래스의 인스턴스를 만들어낼 수 있다.
let avante = new Car('hyundai', 'avante', 'black');
let mini = new Car('bmw', 'mini', 'white');
let beatles = new Car('volkswagen', 'beatles', 'red');
// 각각의 인스턴스는 Car라는 클래스의 고유한 속성과, 메소드를 갖는다.- 인스턴스를 만들 떄에는 new 키워드를 사용한다.
- 즉시 생성자 함수가 실행되며, 변수에 클래스의 설계를 가진 새로운 객체, 즉 인스턴스가 할당된다.
- 각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖게 된다.
속성과 메서드
- 클래스에 속성과 메소드를 정의하고, 인스턴스에서 이용한다.
- 예를 들어 자동차의 속성은, 브랜드, 차 이름, 색상, 현재 연료 상태, 최고 속력등이 있다.
- 메서드는 쉽게 말해 "객체에 딸린 함수"이다. (연료 주입, 속력 설정, 운동 등이 메서드이다.)
클래스:속성의 정의
//Es5
function Car(brand, name, color){
this.brand = beand;
this.name = name;
this.color = color;
}
//Es6
class Car {
constructor(brand, name, color){
this.brand = beand;
this.name = name;
this.color = color;
}
}- this라는 새로운 키워드가 등장한다.
- 한마디로 this는 인스턴스 객체를 의미한다.- parameter로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성 시 지정하는 값이고 위와 같이 this에 할당한다는 것은 만들어진 인스턴스에 해당 브랜드, 이름, 색상을 부여하겠다는 의미이다.
클래스:메소드의 정의
//Es5
function Car(brand, name, color) (/*생략*/)
Car prototype.refuel = function(){
// 연료 공급을 구현하는 코드
}
Car prototype.drive = function(){
// 운전을 구현하는 코드
}
//Es6
class Car{
constructor(brand, name, color){/* 생략 */)
refuel() {
}
drive() {
}
}메서드 정의
- Es5는 prototype이라는 키워드를 사용해야 메서드를 정의할 수 있다.
- Car 클래스에 메서드를 추가하기 위해서는
Car.prototype.refuel과 같이prototype을 이용해야 한다. - Es6에서는 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의합니다.
refuel() {},drive() {}와 같이 작성되어 있는 부분이다.
인스턴스에서의 사용
let avante = new Car('hyundai','avante','black');
avante.color;//'black'
avante.drive(); //아반떄가 운전을 시작한다.
let mini = new Car('bmw', 'mini', 'white');
mini.brand; //'bmw'
mini.refuel(); //미니에 연료를 공급한다.
- 여기에 있는 용어는 오직 JavaScript에서만 유효한 용어이다.
- 생성자 함수 정도만 객체 지향 프로그래밍에서 보편적인 개념이며, prototype이나 this는 취업을 위해서라면 언젠가는 알아야 할 것들이다.
코딩으로 쓰는 일기장