728x90
반응형
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);
'Javascript > Javascript(2022 version)' 카테고리의 다른 글
Javascript 복습 - 스코프, 호이스팅, function 키워드, this binding (0) | 2022.12.15 |
---|---|
Javascript 기초(7) - 함수, 콜스택, 스코프 체인, this (0) | 2022.11.26 |
Javascript 기초(5) - 객체 및 메서드 (0) | 2022.11.03 |
Javascript 기초(4) - 함수 및 객체 (0) | 2022.11.02 |
Javascript 기초(3) - 함수 (0) | 2022.11.01 |