6. Javascript 객체 지향의 개념, 유용한 메서드

목차

1. 객체 지향(Object Oriented)   1.1. 추상과 실체   1.2. 분류(Classify)   1.3. 상속

2. prototype

3. 날짜와 시간 : Data 객체   3.1. Number 1개   3.2. Number n개   3.3. String   3.4. 날짜 메소드

4. 조건(삼항)연산자 "?"

 

---

1. 객체 지향(Object Oriented)

 

프로그래밍을 접해보면, 객체 지향이란 단어를 필연적으로 접하게 된다.

 

객체 지향이란 무엇인가, 실제로 존재하는 객체(Object)들을 정의하여 이 객체들을 서로 상호작용하도록 프로그램을 설계하는 것을 객체 지향 프로그래밍이라고 한다.

 

1.1 추상과 실체

 

프로그래밍언어는 서구권에서 만들었다. 그래서 언어에 서구권의 생각이나 사상이 담겨있다.

 

의자는 영어로 Chair라고 한다. Chair라고 하면 무엇이 생각나는가? 내가 생각하기에 평범한 의자가 떠오른다. 우리나라에서는 "의자를 가져와 주세요."라고 표현해도 전혀 이상하지 않지만, 서구권에서는 "the chair, her chair, that chair, this chair 등" 의자를 관용어, 소유격이나 형용사를 사용하여 조금 더 구체적으로 표현하려한다.

 

실제로 존재하는 "그 의자, 저 의자, 이 의자" 라고 하는 물건들의 공통점을 모아놓은 것이 추상적 개념이라고 생각하면 된다.

 

 

1.2 분류(Classify)

 

생성자 함수를 배우면서 Class를 이용한 객체 생성방법을 알아봤었다. Class는 Classify의 분류라는 의미를 가지고 있다.

의자들이 가지고 있는 공통적인 특징, 기능을 분류해서 모아 Class에 기능, 특징들을 담아둔다. 기능이나 특징의 범위를 크게 잡는다면, 만들고 싶은 인스턴스에 해당하지 않는 기능, 특징. 즉, 속성들이 포함되어 있을 것이다. 이를 방지하기 위해, Class를 설계하기 전에 기능을 최소한으로 가능한 많은 객체에 해당하도록 분류하여 설계하는 것이 중요하다.

 

작은 것부터 큰 것으로 가는 것을 bottom-up방식이라고 한다. 작은 구성부터 시작하여, 큰 구성으로 가야 한다.

 

(물론 이 방식을 사용하지 않더라도, 개발은 가능하고 객체 지향은 개발의 한 방법론일 뿐이다.)

 

 

1.3 상속

 

객체에는 상속이라는 개념이 있다.

class 새 {
    constructor () {
        this.날개갯수 = 2
        this.날수있나 = true
        
    }
}
//     부모          자식
class 비둘기 extends 새 {
    constructor(){

    }
}

새라는 추상적인 개념을 이용해, Class를 만들어 비둘기라는 class에 새를 확장시킨다. 아이러니 하게도, 새에서 비둘기가 나와 새가 부모, 비둘기가 자식 같지만, 비둘기라는 실체를 가지고 새를 가지고오므로 비둘기가 부모가 되고, 새가 자식의 개념으로 된다.

 

비둘기를 만들기 위해 비슷한 종류의 새들을 생각하여 공통적인 부분을 속성으로 분류해 담아야한다. 새를 만들기 위해 비둘기를 생각해야하고 비둘기를 만들기 위해 새를 정의해야한다. 객체 지향언어에서는 이러한 작업을 통해 class를 정의하고, 객체들을 생성해 나간다.

 

하지만, Js는 객체지향언어가 아닌 prototype 언어이기 때문에 이런 머리아픈일을 하지 않는다.

---

2. Prototype

 

Prototype은 추상개념을 만들고 실체를 가져오는 것이 아니라, 실체를 우선 있는 그대로 표현한다.

function 비둘기() {
    this.날개갯수 = 2
    this.날수있나 = true
}

const 닭둘기 = new 비둘기()

비둘기라는 실체를 가지고 속성을 정의하고, 닭둘기라는 객체를 생성한다. 이를 인스턴스라고한다.

 

참새를 표현하고 싶은데 비둘기와 비슷한 속성을 가진것 같다. 이럴때 참새를 정의하고 참새의 원형 prototype에 Class인 비둘기가 아닌 Class로 생성한 인스턴스를 상속시킨다.

function 비둘기() {
    this.날개갯수 = 2
    this.날수있나 = true
}

const 닭둘기 = new 비둘기()

cosnt 참새 = {}

참새._proto_ = 닭둘기

console.log(참새) // {_proto_: 비둘기}

const로 참새이름의 객체를 정의하고 이를 닭둘기로 부터 _proto_를 이용해 특징을 가져온다.

참새 객체에 날개갯수, 날수있나를 정의해 주지 않았다. 하지만, proto를 열어보면 참새가 상속한 객체의 속성을 가져다 준다.

function 비둘기(){
    this.날개갯수 = 2
    this.날수있나 = true
}

const 닭둘기 = new 비둘기()

function 참새() {
    this.크기 = "작다"
}

참새.prototype = 닭둘기

const 귀여운참새 = new 참새()

Js는 생성된 인스턴스에서 부터 상속을 받는다. 실제로 존재하는 것으로부터 분류를 만들기 시작한다. 일단 만들고 비슷한것이 있으면 상속을 하는 개념이다.

 

크기가 작다는 참새의 속성, 날개갯수와 날수있나는 닭둘기로 부터 참새가 가져온 속성이다.

 

• 객체지향: 분류를 확실하게 해야한다
• 프로토타입: 일단 만들면서 분류한다

객체지향과 JS의 가장 큰 차이점은 아무래도 상속을 추상에서 가져오는 것이 아닌 만들어진 객체 인스턴스에서 가져온다는 점이다.

 

---

3. 날짜와 시간 : Data 객체

 

Javascript에는기본적으로 날짜와 시간을 다루는 생성자 함수가 내장되어있다. 이를 이용하여 여러기능에 사용이 가능하니, 짚고 넘어가자.

new Date() // 날짜 생성자함수​

new Date()라는 날짜 생성자 함수이며, Js에 기본적으로 기능이 구현되어있다.

인자값으로 넣는 데이터에 따라 조금씩 다르게 출력된다.

• Number 1개
• Number n개
• String

 

3.1 Number 1개

 

new Date() 인자값으로 숫자데이터를 넣게되면, 숫자에 따라 표준시를 기준으로 값을 출력해준다.

단위는 밀리초로 1/1000초를 뜻한다. 따라서, 1000을 넣게되면 1초가 지난 시간이 출력된다.

 

인자값으로 0을 넣게되면, JS의 기준이 되는 시간이 출력된다.

new Date(0) = [Thu Jan 01 1970 09:00:00 GMT+0900 (한국 표준시)]

const dt_number = new Date(0) // 단위 milliseconds
console.log(dt_number) // Thu jan 01 1970 09:00:00 GMT+09009(한국 표준시)

const dt_number1000 = new Date(1000) // milliseconds = 1/1000 초
console.log(dt_number1000) // Thu Jan 01 1970 09:00:01 GMT+0900 (한국 표준시)

 

3.2 Number n개

 

그 다음으로 알아볼 것은 인자값으로 숫자데이터를 n개 넣었을 떄이다. 숫자를 2개 이상 넣었을 때는 인자값의 순서대로 값이 출력된다.

const dt_numbers = new Date(2022, 11, 25)// 년 월 일 시 분 초 밀리초 
console.log(dt_numbers) // Sun Dec 25 2022 00:00:00 GMT+0900 (한국 표준시)

console.log(dt_numbers.getFullYear()) // 2022 // 년
console.log(dt_numbers.getMonth()) // 11 // 월(+1)
console.log(dt_numbers.getDate()) // 25 // 일
console.log(dt_numbers.getDay()) // 0 // 요일

new Date(년, 월, 일, 시, 분, 초, 밀리초) 순서로 적용된다.

 

3.3 String

 

String 타입은 "년 월 일 시 분 초" 순서로 띄어쓰기, 언더바, 바, 콜론 등으로 구분해넣게되면, 그 시간에 맞춰 출력된다.

const dt_string =  new Date("2022-06-30") // 년 월 일 순서
console.log(dt_string) // Thu Jun 30 2022 09:00:00 GMT+0900 (한국 표준시)

console.log(dt_string.getFullYear()) // 2022
console.log(dt_string.getMonth()) // 5
console.log(dt_string.getDate()) // 30
console.log(dt_string.getDay()) // 4

 

3.4 날짜 메소드

 

다음은 위의 코드에서 출력한 값들과 그 외의 것들이다.

 

해당 메서드 옆에 적힌 값을 출력해준다.

• getFullYear() : 년
• getMonth() : 월 [ 0~11 : Jan~Dec]
• getDate() : 일
• getDay() : 요일 [ 0~6 : 일~토 ]
• getHours() : 시간
• getMinutes() : 분
• getSeconds() : 초
• getMilliseconds() : 밀리초
• getTime() : 1970/1/1 12:00 기준 경과한 밀리초

단, 주의할 점은 컴퓨터의 시작 숫자는 0부터이다. getMonth()나 getDay() 같은 경우 0부터 시작하므로 주의해야한다.

 

이 값들을 조합하여, 나이, 시간, D-day, 이벤트와 함께 사용하는 등 여러가지 기능을 조합할 수 있으니 알아두도록 하자.

---

4. .indexOf( )

 

Js안에는 indexOf라는 메서드가 내장되어있고, 데이터 타입에 따라 숫자데이터로 반환해준다.

 

• String.indexOf("문자데이터")
• Array.indexOf("배열데이터")

해당 데이터를 나열하여 데이터가 있다면 그 위치를 0부터 세어 번호로 반환해주고, 없다면 -1을 반환한다.

 

(단, 띄어쓰기도 세어주어야한다.)

//           0123456 
const str = "abcdefg"

//             0   1   2   3   4    5    6  
const arr = [ "a", 1, "c", 2, "e", "f", "g" ]

console.log(str.indexOf("d")) // 3
console.log(arr.indexOf(2)) // 3
console.log(arr.indexOf(10)) // -1

이를 활용하여 다음과 같은 기능을 구현할 수 있다.

 

1. url에 http가 없으면 https://를 붙여 blog의 값으로 반환해라.
2. url에 "tistory"가 있다면 type의 값으로 tistory를 반환하고, url에 "velog"가 있다면 type의 값으로 velog를 반환하고, 이도저도 아니라면 type값에 null을 반환해라.

function Blog(url) {
    this.blog = setBlog(url)
    this.type = setType(url)

    function setBlog(url) {
        if(url.indexOf("http") === -1){
            return "https://" + url
        }
        return url
    } // 인자값에 "http"가 없으면 "https://"를 붙여 반환해라

    function setType(url) {
        if(url.indexOf('tistory.') >= 0) {
            return "tistory"
        } // 인자값에 "tistory"가 있으면 "tistory"로 반환

        if(url.indexOf('velog.') >= 0) {
            return "velog"
        } // 인자값에 "velog"가 있으면 "velog"로 반환
    }
    return null // 이도저도 아니라면, null값을 반환
}


const a = new Blog("char1ey.tistory.com/")
const b = new Blog("https://char1ey.velog.com/")
const c = new Blog("https://char1ey.com/")

console.log(a) //blog:"https://char1ey.tistory.com/" //type:"tistory"

console.log(b) //blog:"https://char1ey.velog.com/" //type:"velog"

console.log(c) //blog:"https://char1ey.com/" //type:undefined

---

5. 조건(삼항)연산자 "?"

if문과 개념이 같지만 문법이 살짝 다르다.

 

기존의 if문으로 다음을 구현해보자.

 

숫자값이 10보다 작으면 "small" 크면 "big"을 반환하여라.

 

function judge(x){
    if(x < 10){
        return "small"
    } else {
        return "big"
    }
}

console.log(judge(1)) // small
console.log(judge(11)) // big

 

삼항 연산자 "?"를 사용하면 보다 간단하게 표현이 가능하다.

function Jud(x){
    return (x < 10 ? "small" : "big")
}

console.log(Jud(5)) // small
console.log(Jud(11)) // big

삼항연산자의 문법은 세가지의 피연산자를 받는다.

 

"조건 ? true시 반환값 : false시 반환값"

 

개인적으로 if문 보다 가독성 면에서 좀 더 보기가 편한것 같다.

---