객체 생성자
우선 자바스크립트 명령문으로 어떤 처리를 지시하고자 하는 대상을 가리켜 '객체'라고 한다.
객체에 내릴 수 있는 명령의 유형은 2가지다.
-
객체.데이터
(객체가 가지고있는 숫자, 문자 등의 다양한 데이터 사용 가능. 속성) -
객체.기능()
(객체가 가지고있는 다양한 기능을 수행 가능. 괄호 필수. 메소드)즉 자바스크립트 코드 내에서 객체란 '값 또는 기능을 가지고 있는 데이터'
오늘 배울 '생성자 함수'란 객체 생성을 목적으로 한 함수이다.
일반 함수와 다른 점은 없고 목적에서 차이점이 있다고 볼 수 있다.생성자 함수로 고유 기능이 있는 객체를 만들면 JS에서 제공하지 않는 유형의 데이터를 창조할 수 있다.
function Singer(name, member) {
this.name = name
this.member = member
}
const aespa = new Singer("에스파", "카리나, 윈터, 지젤, 닝닝")
console.log(aespa.name)
console.log(aespa.member)- Singer라는 생성자 함수를 만들고 props로 name과 member를 받게 했다.
- this > Singer를 가리킨다. 즉 Singer의 naem과 member를 props로 받는 값으로 지정했다.
- aespa라는 변수에 생성자 함수(생성자 함수는 앞에 new)를 불러오고 props값을 넣어주었다.
생성자 함수 앞에 new를 붙여주는 이유가 궁금하여 찾아보았다.
- new를 사용하여 새로운 객체를 만들게 되면 생성자 함수 안에서 this는 생성된 객체를 가리키게 된다.
- new를 붙이지 않으면 this가 전역 객체를 가리키게되어 예상하지 못한 결과를 낼 수도 있다.
- this를 정확히 정의하려면 꼭 new를 써야하는 것 같다.
회고: 부트캠프 이전에 간략히 js와 리액트를 배워왔지만 생성자 함수에 대해서는 거의 몰랐던 것 같다.
함수를 만들어 자체적으로 객체로 만들고, 스스로 this를 통해 속성을 부여하며 new를 붙여 this와 연결지어 주는 것을
이번 기회를 통해 알게되었다.
빌트인 생성자
개발자의 편의를 위해 js에 내장되어 있는 생성자나 객체를 호출하여 사용할 수 있다.
- 빌트인 생성자: js에 내장된 생성자. 객체 생성 가능
- 빌트인 객체: js에 내장된 객체. 값이나 기능 호출 가능
대표적인 내장 생성자 중 하나인 Date를 사용해 보려고 한다.
const p = document.getElementById("now")
const now = new Date()
let year = now.getFullYear()
let month = now.getMonth() + 1
let day = now.getDate()
let hour = now.getHours()
let min = now.getMinutes()
let sec = now.getSeconds()
p.textContent = `${year}/${month}/${day}/${hour}:${min}:${sec}`- 빌트인 객체 Date의 인스턴스 now를 선언하였다.
- now 안의 Date를 호출하여 year, month 등등을 선언하였다.
- p태그에 나열시켜 화면에 년월일시분초로 호출했다.
hyohyo