Javascript 기초(6) - 상속 및 메서드

1) Javascript 상속

   1-1) 객체지향

   1-2) Prototype

   +) 호이스팅 / this

2) Javascript 메서드 및 생성자 함수

   2-1) Date()

   2-2) indexOf()

   +) 삼항 연산자

 

 

 

 

 

1) Javascript 상속

1-1) 객체지향

// 객체지향 프로그래밍
// 객체지향은 서양의 세계관을 가지고 있는데
// 이는 일종의 이분법적 사고(추상적 / 구체적)라고 볼 수 있다!!

// 예를 들어 마우스라는 이미지(유선 마우스, 무선 마우스, 게이밍 마우스 등)를 그리면
// 각각 다르지만 마우스라는 특정 기능, 속성은 모두 다 같을 것이다!!

// 추상적인 것(class)을 만든 후 그것을 통해 구체적인 것(instance)을 만든다!!

/*
class Chair {
    this.sit: true || false;
}

const myChair = new Chair();
*/

// 실체를 만드는 행위를 '인스턴스(instance)'라 하고,
// 추상적인 것을 만드는 행위란 'class'를 만드는 것이다!!


/*
	객체지향의 특징: bottom-up 방식
    
    <분류> : 객체지향은 무엇을 만든다고 했을 때
    우선 속성(property) 분류를 한 다음에 class(추상적인 것)를 만들고,
    구체적인 것(instance)을 만든다!!

	회원가입
	어떤 정보를 받지?
	userId
	userPw
	userName
	userAge

	class Chair {
    	// 속성	
	}

	- class의 장점: 설계하듯이 코드를 작성할 수 있음(bottom-up 방식이기 때문에)
	- class의 단점: 생산성이 낮음(빠르게 개발하기가 어려움)
*/

 

 

1-2) Prototype

// 상속
// 오늘 주제: 자바스크립트는 왜 Prototype인가?

// Prototype 언어는 객체지향 언어와 반대다!!

// < Prototype >
// Prototype은 앞서 살펴본 객체지향의 "분류"를 하는 것이 '어렵다'고 봄!!

// 추상적인 것을 가지고 실체를 만드는 것이 아니라 Prototype은 실체를 가지고 분류한다!!

// 객체지향 예시
class bird {
  constructor() {
    this.wing = 2;
    this.canFly = true;
  }
}

// 'bird'라는 공통 속성(자식)을 만들어 놓고, eagle라는 '부모'를 만든 뒤에 해당 공통 속성(bird)을 부모(eagle)에게 상속시킨다!!
// 'bird'가 가지고 있는 공통 속성을 'eagle'이 가져오기 때문에 문법적으로는 'eagle'이 부모이고, 'bird'가 자식이다!!
class eagle extends bird {
  constructor() {}
}

// prototype 예시
function Eagle() {
  this.wing = 2;
  this.canFly = true;
}

const chicken = new Eagle();

function Pigeon() {
  this.size = "small";
}

Pigeon.prototype = chicken; // 자바스크립트는 인스턴스 된 것을 가지고 상속을 한다!!
const cutePigeon = new Pigeon();
console.log(cutePigeon);

// 객체지향 : 분류를 확실하게 해라
// >> 'bird'라는 공통 속성(자식 = 추상)을 만들어 놓고, Eagle을 생성한 뒤 Pigeon을 만들려 하는데 이를 상속시키기 위해서는
// 공통 속성을 담고 있는 bird라는 자식(bird class)의 공통 속성을 부모(Pigeon)에게 상속시킴!!

// prototype : 분류를 하면서 정해라
// >> Eagle을 생성한 뒤 Pigeon을 만들려 하면 Eagle의 인스턴스를 만들어 해당 인스턴스화 된 것을 가지고
// Pigeon에 "prototype" 프로퍼티를 만들어 상속을 함

// 이유 : 사람마다 다르기 때문에
// 객체지향과 prototype은 사고 차이로 이해하면 좋음!!

// 호이스팅, this
// 호이스팅, this 등을 안쓰기 위해 ES6 문법을 도입함!!

// 어휘적 범위
// 자바스크립트는 실체, 의미(인스턴스화 된 것들)에 중점을 둔다!!
// 자바스크립트는 실행되었을 때 결정되는 것이 많다!!(ex. 호이스팅)

 

 

+) 호이스팅 / this

// 호이스팅 예시
var name = "sangbeom";

init();
function init() {
  var name = "황상범";
  function displayName() {
    console.log(name); // undefined
    var name = "web7722";
  }
  displayName();
}

// var function
// 자바스크립트는 실행될 때 결정되는 것이 많다!!
// 실행 컨텍스트 생성 시 렉시컬 스코프(code block) 내에 선언이 끌어올려 지는 것이 호이스팅이다!!(면접에서 호이스팅의 정의에 대한 질문이 들어올 시 답변)


// this
// "this"는 뒤죽박죽이지만 패턴은 존재하는데 바로 this도 호이스팅처럼 실행될 때 결정됨!!
// Node.js를 배우면서 익히는 것이 좋음!!

// 결론: 최근 자바스크립트 스펙이 업그레이드되면서
// 'class', 'arrow function', 'let', 'const' 등이 생겨났고
// 이것이 prototype을 망치는 행위이다!!

// 대부분의 자바스크립트 개발자들이 자바스크립트를 객체지향처럼 사용하고 싶어하기에 "객체지향"이라는 개념을 반드시 잘 이해해야 한다!!
// 즉, 자바스크립트는 객체지향이 아니라 prototype 언어에 해당하지만 대부분의 개발자들의 자바스크립트 코딩 스타일은 객체지향처럼 한다!!

 

 

 

 

2) Javascript 메서드 및 생성자 함수

2-1) Date()

// 날짜 - Date 객체 다루기

// "Date"는 자바스크립트에 기본적으로 내장되어 있는 생성자 함수이다.

new Date(); // 현재시간 출력(인자값을 비워놓는 경우)

// 인자값 1개가 '데이터 타입'이 number일 경우,
new Date(0); // UTC 기준: 1970 01 01 00:00:00
// Thu Jan 01 1970 09:00:00 GMT+0900 (한국 표준시)

new Date(1000); // 1초(1000 milliseconds)를 늘림
new Date(24 * 3600 * 1000); // 하루 늘림(24시간 * 3600초(=1시간) * 1000ms)

// 인자값 1개가 '데이터 타입'이 string일 경우,
new Date("2022-11-02"); // 해당 날짜 출력

// 인자값 n개가 '데이터 타입'이 number일 경우,
// 년, 월, 일, 시, 분, 초
// const dt = new Date(2022, 11, 2); // 이 방식보단 바로 아래 string 방식을 많이 사용함!!
const dt = new Date("2022-11-02");
dt.getFullYear(); // 연도만 뽑아냄
dt.getMonth(); // 브라우저 별로 월을 "0~11"로, 혹은 "1~12"로 출력하기에 월 출력 값이 예상과 다를 수 있음!!(크롬은 "0~11"이기에 출력 결과에 +1을 해서 월을 파악하면 됨!!)
dt.getDate(); // 일(날짜)을 뽑아냄
dt.getDay(); // 요일을 뽑아냄 (일 ~ 토 >> 0 ~ 6)

 

 

2-2) indexOf()

// string.indexOf()
const text = "javascript";
text.indexOf("java"); // 출력 결과: 0 >> 해당 텍스트를 찾기 시작하여 해당 텍스트를 찾은 후 텍스트의 시작 인덱스를 출력해 줌!!
text.indexOf("script"); // 출력 결과: 4
text.indexOf("a"); // 출력 결과: 1 >> 먼저 찾은 텍스트의 인덱스를 반환함
text.indexOf("no"); // 출력 결과: -1 >> 변수에 해당 텍스트가 존재하지 않으면 "-1"을 반환함!!

// URL 활용 >> 생성자 함수(혹은 class) + indexOf() + if문(혹은 삼항 연산자) + 반복문(for 문)
// 생성자 함수
function Blog(url) {
  this.blog = setBlog(url);
  this.type = setType(url);

  function setBlog(url) {
    if (url.indexOf("http") === -1) {
      return "https://" + url;
    }
    return url;
  }

  // setType 함수는 아래와 같이 다양한 방식으로 여러가지 형태를 만들어 봄!!
  /*
  function setType(url) {
      if (url.indexOf("tistory.") >= 0) {
        return "tistory";
      }

      if (url.indexOf("velog.") >= 0) {
        return "velog";
      }

      return null;
    }
    */

  /*
  function setType(url) {
    // hint: 배열, 반복문 사용 - my version
    let arr = url.split(".");
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].indexOf("tistory") !== -1) {
        return "tistory";
      } else if (arr[i].indexOf("velog") !== -1) {
        return "velog";
      }
    }
    return null;
  }
  */

  function setType(url) {
    // hint: 배열, 반복문 사용 - 교수님 version
    let arr = ["tistory", "velog", "naver"];
    for (let i = 0; i < arr.length; i++) {
      if (url.indexOf(arr[i]) !== -1) {
        return arr[i];
      }
    }
    return null;
  }
}

/*
// 위의 생성자 함수를 class로 바꾼 것
class Blog {
  constructor(url) {
    this.setBlog = url;
    this.setType = url;
  }
  set setBlog(value) {
    let result = value;
    if (value.indexOf("http") === -1) {
      //   this.blog = "https://" + value;
      result = "https://" + value;
    }
    this.blog = result;
    // this.blog = value.indexOf("http") === -1 ? "https://" + value : value;
  }

  set setType(value) {
    if (value.indexOf("tistory.") !== -1) {
      this.type = "tistory";
    }

    if (value.indexOf("velog.") !== -1) {
      this.type = "velog";
    }
  }
}
*/

// 위의 생성자 함수를 new 키워드를 통해 호출하여 실행시킴!!
const a = new Blog("https://kimgunyoung2821.tistory.com");
const b = new Blog("kimgunyoung2821.tistory.com");
const c = new Blog("https://velog.io");
const d = new Blog("https://medium.com/naver-place-dev");

console.log(a);
console.log(b);
console.log(c);
console.log(d);

 

 

+) 삼항 연산자

// 삼항 연산자 : 개념은 if문과 같지만 문법이 다르다!
// >> "?" 앞에 조건문을 넣고, ":"을 기준으로
// 만일 앞서 정의한 조건문의 결과가 'true'이면, ":"의 앞의 내용을 실행하고,
// 결과가 'false'이면, ":"의 뒤의 내용을 실행한다!!

/*
	< if 문 >
    if (true) {
        // 실행
        result = 1;
    } else {
        // 실행
        result = 2;
    }
*/

// let result = (조건) ? true : false
// 위의 if 문의 형태를 삼항 연산자로 변환한 것
let result = 1 < 0 ? 1 : 2;

console.log(result);