본문 바로가기
JavaScript

04. 객체(오브젝트)와 클래스

by 쬑께께 2022. 2. 16.

오늘은 오브젝트와 클래스에 대해 알아보도록 하겠다.

어렵다고 생각되는 부분이라 잘 설명할 수 있을지 모르겠다.

안되는 부분은 빠르게 미래의 나에게로 떠넘기며

설명에 들어가겠다.

 

1. 객체(Object)

객체란, 

이름으로 구성된 객체 안의 변수(프로퍼티 = 속성)의 정렬되지 않은 집합이며,

프로퍼티 값으로 함수가 올 경우를 메소드라고 한다.

 

객체는 실제 세상에 존재하는 사물을 모델링 한 것인데,

이 부분은 글로 설명해서는 이해가 잘 되지 않을 것이니

간단한 예시를 들어보겠다.

 

객체는 데이터동작으로 이루어져 있는데,

데이터는 객체가 가지고 있는 특성.

동작은 객체가 수행할 수 있는 동작이다. 

 

자동차를 객체라고 생각해보자.

자동차에는 

모델, 제조사, 마력, 색상, 연식, 속도. 배기량, 주행 거리, 연비

등의 특징이 있다.

그렇기에 위의 저 특징들은 특성이 된다.

 

자동차는

출발하기, 감속하기, 가속하기, 방향 전환, 기어 변속

등의 행동을 할 수 있다.

그렇다면, 이 행동들은 동작이 되는거다.

 

실제 세계에서는 자동차는 데이터와 동작이 분리되지 않고 하나로 합쳐져 있다.

소프트웨어를 작성할 때에도 이오 같이 데이터의 동작을 하나로 합쳐서 프로그램을 작성하게 되는데

이를 객체 지향 프로그래밍이라고 부른다.

 

객체를 생성하는데에는 두가지 방법이 있는데

1. 리터럴 방식

2. 생성자 방식

3. 그 외

이 있다.

리터럴 방식의 경우 객체변수 선언과 동시에 속성값을 넣는 형태로 많이 사용하고,

(물론 5번줄처럼 후에 오브젝트 추가가 가능하다.)

생성자 방식의 경우에는 우선 선언을 해놓고,

후에 속성값을 넣는 형태로 많이 사용한다. 

 

위의 두 방법과 다르게 이렇게 객체 생성 함수를 생성해서

객체를 만드는 방법도 있다. 

 

1) 값 변경

이렇게 배열을 복사해와, 속성값을 바꾸는 것도 가능하다.

출력해보면 

이랬던 값이

이렇게 바뀌어 있는 모습을 확인할 수 있다. 

(앞에선 안됐던 얕은 복사가 여기서 되는구나...)

 

in: 앞에 쓰여진 키워드가 해당 배열 안에 존재하는지 확인해줌

이런식으로 함수를 선언하여

다음과 같은 코드를 실행시켜 값을 바꾸는 것도 가능하다.

 

출력시켜보면 

이렇게 값이 변해 있는 것을 확인할 수 있다. 

 

2) for in | for of

for infor of은 for문과는 전혀 다른 형태의 반복문이다.

앞서 반복문을 했음에도 그곳에 적지 않고 이곳에 적는 이유는

for in과 for of이 객체와 연관되어 있기 때문이다.

 

for in은 해당 객체의 모든 열겨할 수 있는 프로퍼티를 순회할 수 있도록 해준다.

(* 열거할 수 있는 프로퍼티: 내부적으로 enumerable 플래그가 true로 설정된 프로퍼티)

 

문법

 

간단한 함수를 만들어서 돌아가는지 확인해보았다. 

출력해보면

이렇게 객체의 프로퍼티를 순회하여

key값이 출력되는 모습을 확인할 수 있다.

 

for out반복할 수 있는 객체를 순회할 수 있도록 해주는 반복문이다.

(* 반복할 수 있는 객체 :  Array, Map, Set, arguments 객체 등)

 

문법

 

임의의 배열인 arr을 만들어 확인해보았다. 

출력 결과

배열을 순회하여 출력한 모습을 확인할 수 있었다.

 

앞서 1) 값 변경을 할 때, 배열이 얕은 복사되는 모습을 확인할 수 있었다.

그렇다면 깊은 복사는 어떻게 할까?

 

 방법 1. for in문을 통하여 깊은 복사

방법 2. for문을 통하여 인덱스 값을 일일이 복사

방법 3. 앞서 설명했던것과 같이 [...원본배열]을 이용해 복사

를 통해 값을 복사할 수 있다. 

 

2. 클래스

클래스는 객체를 생성하기 위한 틀이다.

1)클래스 선언

클래스 선언은 다음과 같이 한다.

class를 선언하기만 해준다면 바로 클래스를 만들 수 있다.

그 다음은 값을 집어넣는거다.

2) 클래스 초기값 선언

car이란 이름을 가진 클래스를 생성했다.

멤버 변수로 wheelCnt, chairCnt, hasSunroof, hasBlckbox를 가지고 있다.

생성자를 통해

매개변수로 위의 멤버 변수를 받아오면서, 초기값을 지정해놓았다. (10~13줄)

3. 메서드생성

class에서 설정한 초기값을 접근해 특정 기능을 하는 메서드를 만들어보겠다

이 함수가 잘 작동하는지 확인하기 위해서는

객체를 만들어 출력시켜보아야 한다. 

4. 객체 생성

각각 다른 매개변수를 넘겨주는 변수 smallCar, bigCar를 생성했다.

각 객체의 클래스 안에 존재하는 멤버변수의 값도 바꿀 수 있다. 

그래서 이 결과들을 출력시켜보면

이렇게 값이 바뀌어 있는것을 확인할 수 있다. 

 

클래스를 다룰때 조심해야 하는 점은

정적으로 만들어진 변수와 함수는 객체를 생성하지 않아도

접근과 사용이 가능하다는 것이다. 

 

그래서 

이렇게 두 문장이 있을 경우

1번 줄은 smallCar 객체에 staticValue라는 변수가 추가되고,

2번 줄은 Car의 staticValue 멤버 변수에 'car Static'이란 값이 저장된다.

'JavaScript' 카테고리의 다른 글

06. 내장 객체  (0) 2022.02.18
05. 상속  (0) 2022.02.17
로또 만들기  (0) 2022.02.15
03. 함수와 배열  (0) 2022.02.11
02. 연산자와 조건문, 그리고 반복문  (0) 2022.02.10