입문자를 위한 자바스크립트 기초 강의_미니플젝01

생성자
객체를 생성할 때 사용하는 함수로서 ‘생성자 함수’라고도 부른다.
사용할 기능을 정의한 일반 함수와 생성자 함수 사이에 특별한 문법적 차이는 존재하지 않는다.
즉 함수도 생성자의 역할을 할 수 있는데 단, 생성자 함수는 목적이 객체 생성에 있다.
이런 생성자 함수는 자바스크립트가 제공하지 않는 유형의 데이터를 창조 할 수 있다는 점에서 쓸모있다.

여기서 중요한 키워드 하나!! 바로 this 키워드이다.
this 키워드는 객체 그 자신을 의미하는데 이 키워드를 이용해 해당 객체의 속성이나 메소드를 추가할 수 있다.

// 강아지를 표현하는 'Dog' 객체를 만들고 싶다.
function Dog() {
	this.name = "콩이"
	this.breed = "시츄"
}

생성자 함수는 ‘객체를 이렇게 만들겠습니다’라는 정의뿐,
실제 객체가 생성되기 위해서는 new 연산을 통해서 객체를 반환해야 한다.

//Dog 객체를 생성하고, myDog라는 이름을 붙이겠다.
const myDog = new Dog();
console.log(myDog.name)
console.log(myDog.breed)

기본 생성자

내장 생성자, 빌트인 객체(built-in object)라고도 한다.
자바스크립트는 처음부터 사용할 수 있는 기본 객체 및 생성자를 제공하는데,
대표적인 내장생성자 중 하나인 날짜와 시간에 대한 Date가 있다.

//코드가 실행되는 시점의 날짜와 시간 정보를 담은 객체
const now = new Date()

// 특정 시점의 날짜와 시간 정보를 담은 객체
const then = new Date(2021, 07, 23)

// Date 객체끼리 뺄셈도 가능하다. 단위는 밀리초.
const interval = now - then
console.log(interval)  //28903884563

Date 객체 주요 메소드로는 아래 표와 같다.

메소드	기능 및 특이사항
getFullYear	연도를 뜻하는 숫자 값 반환
getMonth	월을 뜻하는 숫자 값 반환(0부터 시작하므로 1월이면 0, 2월이면 1…)
getDate	날짜를 뜻하는 숫자 값 반환
getDay	요일을 뜻하는 숫자 값 반환(일요일이 0이므로 월요일이면 1, 화요일이면 2…)
getHours	시각 중 시간을 나타내는 숫자 값 반환
getMinutes	시각 중 분을 나타내는 숫자 값 반환
getSeconds	시각 중 초를 나타내는 숫자 값 반환
toLocaleString	지역 날짜 및 시간 문자열 반환(국가나 지역마다 다른 날짜 및 시간 표기 방식 반영)

주요 메소드를 사용해보기 위해 html에다가 현재 시간 가져와서 표시해보기 실습!

const h2 = document.querySelector('h2')

const now = new Date()

const hour = now.getHours()
const minutes = now.getMinutes()
const seconds = now.getSeconds()

const nowTime = `${hour} : ${minutes} : ${seconds}` 

h2.textContent = nowTime;

setTimeout

정해진 시간이 지나고 나면 주어진 함수를 실행 해주는 타이머 메소드.

// 구문
setTimeout(실행할_함수, ms_단위의_시간)

// 1000ms가 지나고 나면 함수를 실행한다
setTimeout(function(){
  console.log("재미있다!")},1000)

setInterval

일정한 시간 간격에 따라 함수를 반복 실행할 수 있도록 해주는 타이머 메소드.

//구문
setInterval(반복_실행할_함수, ms_단위의 시간)

//500ms마다 함수를 반복 실행한다
setInterval(function(){
  console.log("안녕하세요")}, 500)

clearInterval

setInterval 메소드가 호출되어 반복 실행할 함수 타이머를 등록하면, 타이머는 0이 아닌 숫자를 반환한다.
숫자는 타이머의 ID를 의미하며, 이를 clearInterval 메소드에 전달하면 해당 타이머의 반복 실행이 취소된다.

// 셋팅된 타이머의 반환값(ID)을 변수에 저장하자
let timer;

timer = setInterval(function() {
  console.log("안녕하세요")
}, 500);

// 셋팅된 타이머를 멈춰보자
clearInterval(timer)

여기서 하나 더 알고가기!!

setTimeout과 setInterval의 차이는, setTimeout의 경우 주어진 시간 이후 함수를 한 번만 실행시키지만 setInterval은 주어진 시간마다 함수를 계속 실행한다는 차이가 존재한다.

https://www.inflearn.com/course/입문자-자바스크립트-기초강의/dashboard

입문자를 위한 자바스크립트 기초 강의 - 인프런 | 강의