객체지향이란 with Typescript

개발정리·2022년 5월 1일
0

객체지향

목록 보기
1/2
post-thumbnail

객체지향이란

우리는 기본적으로 어떠한것이 중구난방으로 복잡하게되어있으면

자연스럽게 그룹핑하고싶어한다. **옷장에는 옷을 넣고 주차장엔

차를 주차해두고 집엔 사람이살고 안방엔 부모님이 계시고

각자의 방을 정해서 그 방엔 그 사람이지내고** 이런식으로

우린 실생활에서도 그룹화되어 관리되고있는 것들을 아주 쉽게 찾을수있다.

객체지향이란 이런식으로 일관성있는 변수나 함수들을 미리 정의해두고 관리하는것이다.

시작하기전에 함수

console.log("나는 1번이야");
console.log("나는 2번이야");
console.log("나는 3번이야");

console.log("\n");

console.log("안녕 1번아");
console.log("안녕 2번아");
console.log("안녕 3번아");

console.log("\n");

console.log("안녕 잘가 모두들");

이 코드의 결과값은 어떻게될까? 와 같은 짜증나는 생각이 들지않게
정말 쉬운 코드를 예시로 들었다.

나는 1번이야
나는 2번이야
나는 3번이야


안녕 1번아
안녕 2번아
안녕 3번아


안녕 잘가 모두들

당연하게도 이런 결과값이 나왔다.
하지만 불편한건 결과값이 아닌 코드

함수를 아는 사람이라면 함수형태로 만들어서
관리할것이다. 사실 저정도면 관리할필요도없지만
우리의 상상력을 발휘해서 저게 관리가 필요한 엄청나게 길고
복잡한 코드라고해보자
일단 협업이든 어떤 이유든 저 코드를
어디에 쓰이는지 "문자를 읽음으로써" 식별할수있게 그룹핑하겠다.

모두다 인사라는 공통점이 있으니 greeting.ts를 만들어보자

function sayIntroduce() {
  console.log("나는 1번이야");
  console.log("나는 2번이야");
  console.log("나는 3번이야");
}

function sayHello() {
  console.log("안녕 1번아");
  console.log("안녕 2번아");
  console.log("안녕 3번아");
}

function ByeEveryone() {
  console.log("안녕 잘가 모두들");
}

export { sayIntroduce, sayHello, ByeEveryone };

index.ts에서 실행시켜보면

import { sayHello, sayIntroduce, ByeEveryone } from "./Greetings";

sayIntroduce();
console.log("\n");

sayHello();
console.log("\n");

ByeEveryone();

확실히 전보다 더 유지보수하기 쉬워졌다.

근데 저 123만 바뀌면되는데 코드가 중복되는게 맘에들지않는다

학생들이 결석자없이 무조건 오름차순으로 정렬되어있다는

말도안되는 설정을 가지고 반복문으로 바꿔보겠다.

function sayIntroduce(n: number) {
  for (const x of Array(n).keys()) {
    console.log(`안녕 나는 ${x + 1}번이야`);
  }
}

function sayHello(n: Number) {
  for (const x of Array(n).keys()) {
    console.log(`안녕 ${x + 1}번아`);
  }
}

function ByeEveryone() {
  console.log("안녕 잘가 모두들");
}

export { sayIntroduce, sayHello, ByeEveryone };
import { sayHello, sayIntroduce, ByeEveryone } from "./Greetings";

const n = 3;

sayIntroduce(3);
console.log("\n");

sayHello(3);
console.log("\n");

ByeEveryone();

확실히 전보다 편안해졌다. 정말 완벽한거같다.
정말 그럴까? 나는 욕심이 많아서 두가지 욕구가 생겼다.

첫번째 욕구

sayIntroduce, sayHello, ByeEveryone함수들이 정확히 어디서 오는건지 명시하고싶다. from "/Greettings"만으론 만족하지못한다.

두번째 욕구

나는 저 n에 똑같은 값이 들어갈수밖에없는데
인자를 두개 적는게 너무나도 맘에안든다 한 ts파일에 적었다면
상관없지만 다른 파일에 함수들을 생성하고 export 하는 바람에
저런 흠이 생겼다.

여기서 등장하는 Object

이 문제점을 해결하려고 오브젝트(객체)를 사용해보겠다!
드디어 본론이다. 이런 형태로 만들어보겠다.

const Greetings = {
  	n : index.ts에서 정해줌
    sayIntroduce : "n번까지 소개하는 함수",
    sayHello : "n번들에게 인사하는 함수"
    ByeEveryone : "안녕 잘가 모두들 함수"
}

작성해보았다.

type gre = {
  n: Number;
  sayIntroduce: Function;
  sayHello: Function;
  ByeEveryone: Function;
};

const Greetings: gre = {
  n: 0,
  sayIntroduce: () => {
    if (Greetings.n == 0) return console.log("인원이 적음");
    
    for (const x of Array(Greetings.n).keys()) {
      console.log(`안녕 나는 ${x + 1}번이야`);
    }
  },
  sayHello: () => {
    if (Greetings.n == 0) return console.log("인원이 적음");
    
    for (const x of Array(Greetings.n).keys()) {
      console.log(`안녕 ${x + 1}번아`);
    }
  },
  ByeEveryone: () => {
    console.log("안녕 잘가 모두들");
  },
};

export default Greetings;

index.ts

import Greetings from "./Greetings";

Greetings.n = 34;

Greetings.sayIntroduce();
console.log("\n");

Greetings.sayHello();
console.log("\n");

Greetings.ByeEveryone();

쓸데없고 억지지만 어느정도 그룹핑이된거같고 처음보단 당연히
유지보수하기 편해졌다. 객체를 생성함으로써

아까의 욕구

1.함수마다 인자를 넣었어야했다.
2.저 함수들이 어디에 속해있는지 제대로 명시하고싶다.

이 두개를 어느정도 해결했다.

저게 객체지향에 전부인가

그룹핑하고 중복을 줄이며 유지보수하기 편하게 하는것은

객체지향의 전부냐고하면 전부는 아니지만 그것이 객체지향이 생긴이유다

라고는 말할 수 있다. 근데 저 위에 코드들로 통해 객체지향을 다 배웠는가

이것은 절대아니다. object는 객체가 맞다. 하지만

단순 {}를 통해 만드는 객체로는

사람들의 문제점을 해결하고자하는 욕구를 채워줄수없었다.

그래서 Class라는게 등장하는데 이건 다음 글에서 계속하겠습니다.

profile
배운거 정리해요

0개의 댓글