[FE_Bootcamp] 22일차_클래스와 인스턴스

오늘은 프로그래밍에서 가장 빡센 파트중 하나인 객체 지향 프로그래밍에 대해 배우는 날이다.

학교에서 가장 처음 들었던 프로그래밍 과목이 바로 '객체 지향 프로그래밍'이었는데, 따라가기 매우 힘들었던 기억이 난다,.,.,.

 

1. 클래스와 인스턴스

코딩을 하다보면, 같은 기능을 가진 코드들을 여러번 써야 할 때가 있다. 

반복 횟수가 적고, 코드의 길이가 길지 않은 경우에는 직접 써도 무방하겠지만, 그렇지 않은 경우라면 코드가 굉장히 복잡해질 우려가 있다.

이러한 문제점을 해결하기 위해 사용하는 방법이 바로 '객체 지향'이다.

쉽게 말하자면, 하나의 커다란 틀을 만들어 놓고 그 틀에 맞추어 내용물만 바꾸어 사용하는 것이다.

 

그 커다란 틀을 '클래스'라고 하며, 틀을 기반으로 만들어진 객체를 '인스턴스 객체(인스턴스)'라고 한다.

이해를 돕기 위해 기타를 예로 들어보겠다.

 

클래스와 인스턴스

 

일렉기타는 다음과 같은 속성을 가지고 있다

• 줄이 6개이다
• 헤드/넥/바디로 구성된다
• 전기 신호를 받아 소리를 낸다

세상에 존재하는 거의 모든 일렉기타들은 제조사, 외형, 색상만 다를 뿐, 기본적인 속성은 모두 이 3가지를 공유한다.

이때, '일렉기타'는 '클래스', 일렉기타의 기본적인 속성들을 기반으로 만들어진 수많은 기타들을 '인스턴스'라고 볼 수 있다.

인스턴스들은 기본적으로 같은 속성을 공유하지만, 각 인스턴스들끼리 구분될 수 있는 속성 역시 필요하다. 

 

공유하는 속성	구분되는 속성
- 줄이 6개 - 헤드/넥/바디 -전기 신호로 소리	- 제조사 - 외형(종류) - 색상

 

 

이 구분되는 속성들은 인스턴스를 만들 때 따로 명시해 준다.

이번에는 코드와 함께 알아보자

 

class ElectricGuitar {
  constructor(brand, type, color){
    this.brand = brand
    this.type = type
    this.color = color
  }
  string = 6
  parts = ['head', 'neck', 'body']
  play(){
    console.log('전기 신호가 입력되었으므로 ' + this.type + '에서 소리가 납니다')
  }
  off(){
    console.log('전기 신호가 끊겼으므로 ' + this.type + '에서 소리가 꺼집니다')
  }
}

 

클래스 'ElectricGuitar'를 정의하였다.

클래스명은 일반적으로 대문자로 적으며, 함수 선언문과 같이 = 은 필요 없다.

클래스 역시 하나의 커다란 객체이기 때문에 대괄호( { } )를 써주면 되고, 객체 내에 여러 자료형들을 표기할 수 있다.

클래스 내의 함수는 객체 내의 함수이므로 역시 메서드라고 부른다.

 

클래스 선언 바로 아래에는 constructor라는 함수를 생성해 준다.

constructor는 인스턴스가 호출될 때 실행되는 '생성자 함수'로,  각 인스턴스를 구분해 주는 요소들을 클래스에 적용하는 역할을 한다.

 

잘 보면, 'this'라는 것이 앞에 붙어 있는데, 이 this는 '새로 생성된 인스턴스'를 가리킨다.

만약 ElectricGuitar 클래스를 이용해 LesPaul이라는 새로운 인스턴스를 만들었다면, this.brand는 LesPaul.brand와 같은 역할을 한다는 것이다.

만약 this를 사용하지 않는다면 스코프의 원리에 의해 오류가 나게 된다.

 

이번에는 인스턴스를 만드는 방법이다.

인스턴스는 'new'라는 키워드를 이용해 만들어 준다.

클래스라를 이용해 새로운 객체를 만들어 주는 것이므로 변수에 'new 클래스명(구분되는 속성)'을 할당하여 생성한다.

 

let lespaul = new ElectricGuitar('gibson', 'lespaul', 'sunburst')
let sg = new ElectricGuitar('Epiphone', 'sg', 'gold')
let tele = new ElectricGuitar('Fender', 'telecaster', 'white')
let susrat = new ElectricGuitar('Ibanez', 'super-strat', 'blue')

 

위 인스턴스들이 생성되면, 클래스의 constructor 함수를 통해 brand, type, color 요소들은 각 인스턴스의 전달인자들로 바뀌게 된다.

각 요소들은 Dot Notation과 Bracket Notation을 통해 불러올 수 있다.

 

console에서 작동해본 클래스와 인스턴스

 

이처럼 클래스를 이용하면, 같은 기능을 가진 객체들을 여러번 활용 가능하다는 이점이 있다.

이는 코드의 길이나 효율성을 줄이는 데 아주 유용하게 사용될 것이다.

 

※참고) ES5와 ES6에서의 클래스, 인스턴스 정의 방법

//ES5 : 함수의 형태로 선언
function ElectricGuitar {
  this.brand = brand
  this.type = type
  this.color = color
}

//ES6 : class 키워드를 통해 선언
class ElectricGuitar {
  constructor(brand, type, color){
    this.brand = brand
    this.type = type
    this.color = color
  }
}