Javascript// 6일차 [상속, 날짜, 삼항연산자]

목차

  1. 상속

  2. 날짜

  3. 삼항연산

---

1. 상속

 

js에서의 상속의 개념은 다른 언어에서의 상속과 조금 다르다

JS는 prototype 언어로 객체지향의 상속과는 차이가 있기 때문이다.

 

#객체지향 

 

객체지향은 오래전부터 유지되어 왔던 프로그래밍 방식이다.

서양의 가치관을 품고있으며, 그렇기에 이분법적인 사고를 가지고 있다.

이러한 방식은 상속에도 나타난다.

 

" 의자 "

 

라는 추상적인 단어가 있다.

이것을 구체화 시켜

 

"팔걸이 의자, 컴퓨터 의자, 철로만든 의자, 나무로 만든 의자."  등등 구체화를 시킬 수 있다.

 

이렇게 "의자" 라는 개념을 만드는것이 class.

구체적인 실체를 가지는것을 인스턴스 라고 부른다.

 

1. 객체지향 언어는 큰 분류인 class를 만든다.

2. 이 class 객체에 세세한 분류의 특징들을 만들어 둔다.

3. class 객체의 세세한 분류의 특징을 가진 작은 분류들을  다른 class에 상속한다.

 

객체지향 언어는 이렇게 세부적인  내용부터 천천히 설계를 하고 전체 틀을 만들어가는 과정이다.

class 새 {
	constructor(){
    	this.날개갯수 = 2
        this.날수있나 = true
    }
}

class 비둘기 extends 새 {
	constructor(){}
}

//새가 가진 모든 능력을 비둘기가 가짐

 

따라서 설계하듯이 코드를 작성하기 때문에 안전하다는 장점이 있지만

그만큼 막대한 시간을 쓰기에 생산성이 낮다는 단점이 있다.

 

 

Prototype

 

Prototype의 기본 원칙은 사람마다 생각이 모두 다를 수 있다는 가정이다.

객체지향 언어처럼 큰 분류를 이미 만들어 놓고 한다면, 문제가 생길 수 있다.

큰 분류 조류가 있고 그 안에 날수 있다 라는 값이 있다면

작은분류 펭귄은 조류지만 날수 없기에 조류가 아닌것이 될 수 있다.

이러한 문제를 발생시키지 않기 위해 js는 prototype을 택했다.

function 조류 (){
	this. 날개갯수 = 2
    this. 날수있나 = true
}

const 비둘기 = new 조류()

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

참새.prototype = 비둘기
const 귀여운참새 = new 참새()
console.log(귀여운참새)

prototype 은 생성된 인스턴스를 수정을 할 수 있다.

중간에 있는 function 참새에 크기 = 작다 를 부여 할 수 있게된다.

조금 더 스킬을 배우게 된다면

펭귄은 조류이며 날수있나 = true 값을 뺄 수도 있다! 펭귄도 조류가 될 수 있다!

 

-- 결론적으로

 

객체지향  = 분류를 확실하게 하고 만들어라!

프로토타입 = 뭐 그럴수도 있지 분류 하면서 해~

 

#호이스팅

실행 컨택스트 생성시 렉시컬 스코프 내에 선언이 끌어올려 지는게 호이스팅

 

! 최근 JS도 스펙을 올리고 있어서

class arrow function let const 등을 만들며 호이스팅을 지양하고

객체지향 처럼 사용하고 싶어합니다.

---

2. 날짜

 

new Date() //현재 시간

new Date(0) 

new Date(24 * 3600 * 1000) //하루가 지난 시간

const dt = new Date(2022, 10,2 ) //2022,10,2일로 표시

new Date("2022-11-01") //2022 11 01일로 표시

day() // 무슨요일인지 표시 ** 0~ 6까지로 표시하며 0은 일요일

// 년 월
const dt = new Date(2022, 10,2 )
dt.getFullyear () 년도
dt.getMonth() 월
dt.getDate () 일
dt.getDay () 요일

---

3. 삼항 연산자

 

개념의 if문과 같지만 문법은 다르다.

 

기본문법

let a = ( 조건 ) ? true값 : false 값

활용

const num = 12
const str = 15

let d = num > str ? 20 : 15

console.log(d)

 

** 삼항 연산자는 true false 값을 부여해서 사용해야 할 때 쓰는게 편하다. IF문이 더 효율적일 때가 있다.

 

 

연습문항

 

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

    function setBlog(url){
        if (url.indexOf("http") === -1) {
            return "https://" + url
        }
        return url
    }
    
    function setType(url) {
        let tag = ["tistory", "velog" , "naver"]
        for (let i = 0; i < tag.length; i++){
   
            // const result = url.indexOf(tag[i]) !== -1 
            // ? tag[i]
            // : null

            // if(result !== null) return result      삼항 연산자 활용방법

            if (url.indexOf(tag[i]) !== -1){   // if 문일 때 활용방법
                return tag[i]
            }
            
        }return null


    }
}

const a = new Blog("https://kimgunyoung2821.tistory.com")
const b = new Blog("kimgunyoung2821.tistory.com")
const c = new Blog("https://velog.io/@wrld_worthy")