23. 객체를 만드는 생성자
자바스크립트 코드 내에서 객체란 명령을 내리고자 하는 대상이자 '값(속성) 또는 기능(메소드)을 가지고 있는 데이터'이다
자신이 원하는 값이나 기능으로 구성된 객체를 직접 만들 수 있음
생성자
생성자란 객체를 생성할 때 사용하는 함수, '생성자 함수'라고도 한다
생성자를 사용하면 자바스크립트가 제공하지 않는 유형의 데이터를 창조할 수 있음
생성자를 새로운 자료형이라고 생각할 수 있음
this 키워드
this 키워드는 객체 그 자신을 의미
this를 이용해 해당 객체의 속성이나 메소드를 추가할 수 있음
예시)
// 강아지를 표현하는 'Dog' 객체
function Dog(){
this.name = "콩이"
this.breed = "시츄"
}일반적으로 생성자 함수명의 첫글자는 대문자 (관례)
일반 함수나 변수와 구분하기 위해
객체 생성은 new 연산자로
생성자 함수는 객체를 이렇게 만들겠다라는 정의일 뿐이며, 실제 객체가 생성되기 위해서는 new 연산을 통해 객체를 반환해야 함
예시)
function Dog(){
this.name = "콩이"
this.breed = "시츄"
}
// Dog 객체를 생성하고, myDog라는 이름을 붙이겠다
const myDog = new Dog();
console.log(myDog.name) // -> 콩이
console.log(myDog.breed) // -> 시츄생성자 하나로 여러개 만들기
생성자 함수는 객체를 이렇게 만들겠다에 대한 정의, 즉 '설계도' 역할
따라서 생성자 함수 하나로 객체 여러개를 만들 수 있음
예시)
// 생성자에도 매개변수를 정의할 수 있음
function Dog(eachName, eachBreed){
this.name = eachName
this.breed = eachBreed
}
const one = new Dog("구름이", "진돗개");
const two = new Dog("하나코", "시바견");
const three = new Dog("마르코", "셰퍼드");24. 빌트인 생성자
- 빌트인 객체: 자바스크립트에 내장된 객체. 이를 이용해 값이나 기능을 호출할 수 있음 e.g., window, console, document 등
- 빌트인 생성자: 자바스크립트에 내장된 생성자. 이를 이용해 객체를 생성할 수 있음 e.g., Date()
Date
Date는 날짜와 시간을 처리하는 다양한 메소드가 정의된 빌트인 생성자
// 코드가 실행되는 시점의 날짜와 시간 정보가 담긴 객체 생성
const now = new Date()
// 2008년 6월 10일의 날짜와 시간 정보를 담은 객체 생성
// 매개변수는 년월일시분초밀리초 순서
const then = new Date(2008, 5, 10)
// Date 객체끼리는 밀리초 단위로 연산됨
const interval = now - then
console.log(interval) // -> 419184288514Date 객체의 주요 기능들
| 메소드 | 기능 | 특이사항 |
|---|---|---|
| getFullYear | 연도를 뜻하는 숫자 값 반환 | |
| getMonth | 월을 뜻하는 숫자 값 반환 | 0부터 시작하므로 1월이면 0 |
| getDate | 날짜를 뜻하는 숫자 값 반환 | |
| getDay | 요일을 뜻하는 숫자 값 반환 | 0부터 시작하므로 일요일이면 0 반환 |
| getHours | 시간을 나타내는 숫자 값 반환 | |
| getMinutes | 분을 나타내는 숫자 값 반환 | |
| getSeconds | 초를 나타내는 숫자 값 반환 | |
| toLocalString | 지역 날짜 및 시간 문자열 반환 | '2021/09/17 16:30:45' 이런 식 |
25. 타이머 메소드
setTimeout
정해진 시간이 지나고 나면 주어진 함수를 실행 해주는 타이머 메소드
사용 방법: setTimeout(실행할함수, ms단위의시간)
setInterval
일정한 시간 간격에 따라 함수를 반복 실행 해주는 타이머 메소드
사용 방법: setInterval(반복실행할함수, ms단위의시간)
clearInterval
반복 실행을 멈추고 싶을 때 사용
setInterval 메소드가 호출되어 반복 실행할 함수 타이머를 등록하면, 타이머는 0이 아닌 숫자를 반환
숫자는 타이머의 ID를 의미하며, 이를 clearInterval 메소드에 전달하면 해당 타이머의 반복 실행이 취소됨
예시)
// 셋팅된 타이머의 반환값(ID)를 변수에 저장
let timer;
timer = setInterval(function(){
console.log("안녕하세요^^")
}, 500)
// 셋팅된 타이머를 멈춤
clearInterval(timer)26. 배열
배열을 만드는 두 가지 방법
배열 리터럴로 생성하기
const arr = [1, 2, 3, 4, 5, 6, 7, 8]Array 생성자로 생성하기, 배열을 만드는데 사용하는 기본 내장 생성자
const arr = new Array(1, 2, 3, 4, 5, 6, 7, 8)배열 메소드
- push: 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 길이 반환
- pop: 배열의 마지막 요소를 뽑아내고, 그 요소를 반환
- splice: 배열 요소를 원하는 위치에 원한느 수만큼 제거하고 추가
- indexOf: 배열에서 주어진 값과 일치하는 첫 번째 인덱스 반환, 없으면 -1 반환
예시)
// 배열의 0번 요소부터 2개 지움 -> 0번, 1번 지움
vos.splice(0, 2)
// 배열의 0번 요소부터 3개 지운 다음 대체값을 추가
vos.splice(0, 3, "지원", "현준", "경록")
// 배열의 개별 요소에 대해 한번씩 함수 호출, 매개변수를 통해 요소를 받아옴
vos.forEach(function(item){
console.log("함수 " + item)
} // -> 함수 지현, 함수 현준, 함수 경록27. 클래스 리스트
Element.classList
classList 속성은 웹 요소의 클래스 콜렉션을 반환하는 속성
관련 메소드
| 메소드 | 기능 | 사용 예 |
|---|---|---|
| add | 지정한 클래스 값 추가 | add("new_class") |
| remove | 지정한 클래스 값 제거 | remove("old_class") |
| item | 인덱스를 이용해 클래스 값 반환 | item(1) |
| toggle | 클래스 값 토글링 (있으면 제거, 없으면 추가) | toggle("some_value") |
| contains | 지정한 클래스 값 존재 여부 확인 | contains("is_contains") |
| replece | 기존 클래스를 새 클래스로 대체 | replace("old", "new") |
28. Math 객체
빌트인 객체 Math
Math는 수와 관련된 속성과 메소드를 가진 내장 객체, 생성자 아님!
관련 메소드)
- abs: 주어진 숫자의 절댓값 반환
- floor: 주어진 숫자보다 작거나 같은 수 중에서 가장 큰 정수 반환 (내림)
- pow: 주어진 첫 번째 숫자에 두 번째 숫자만큼 제곱해서 반환
- random: 0 이상 1 미만의 난수 반환
- sign: 주어진 숫자가 양수인지 음수인지 나타내는 부호 반환
- sqrt: 주어진 숫자의 제곱근 반환
