이 글의 목적
📌 new 연산자와 생성자 함수에 대해서 알아봅니다. 객체를 보다 쉽게 복제하여 유사한 객체 여러 개를 쉽게 만들 수 있습니다
new연산자와 생성자 함수
1.new 연산자
우리가 서비스를 구성할 때 {이름과 주민등록번호를 넣는 객체}가 있습니다.
매번 신규고객이 생길때마다 새로운 객체들을 매번 생성하기는 힘든 부분인데요.
이것을 new라는 생성자로 해결할 수 있습니다.
재사용 할 수 있는 함수를 만들어 신규고객이 생기면 {이름, 주민등록번호} 를 가지는 객체를 매번 생성하는 것입니다.
객체 리터럴 {...}을 사용하면 객체를 쉽게 만들 수 있습니다. 그런데 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 합니다. 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현 하는 경우가 그런데, new 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있습니다.
생성자 함수
생성자함수(constructor function)와 일반 함수에 기술적 차이는 없습니다.
다만 생성자 함수는 아래 두 관례를 따릅니다.
- 함수 이름의 첫 글자는 대문자로 시작합니다.
- 반드시
new연산자를 붙여 실행합니다.
function User(name) {
this.name = name;
this.isAdmin = false;
}
let user = new User("보라");
alert(user.name);
alert(user.isAdmin);new User(...)를 써서 함수를 실행하면 아래와 같은 알고리즘이 동작합니다.
- 빈 객체를 만들어
this에 할당합니다. - 함수 본문을 실행합니다.
this에 새로운 프로퍼티를 추가해this를 수정합니다. this를 반환합니다.
prototype
Number.prototype.sample = 10
생성자와 return문
생성자 함수엔 return문이 존재하지 않는다.
반환해야 할 것들은 모두 this에 저장되고, 자동으로 반환되기 때문에.
그런데 return 문이 있다면 어떤 일이 벌어질까요?
사실 리턴문이 있는 생성자 함수는 거의 없다.
- 객체를
return한다면this대신 객체가 반환됩니다. - 원시형을
return한다면return문이 무시됩니다.
function BigUser(){
this.name = "원숭이";
return {name: "고릴라"};
}
alert( new BigUser().name); // 고릴라가 나온다. return이 this문을 무시했다.생성자 내 메서드
function User(name) {
this.name = name;
this.sayHi = function(){
alert("제 이름은" + this.name + "입니다.");
}
let bora = new User("이보라"); //"이보라"가 들어가는 User todtjd
bora.sayHi(); // 제 이름은 이보라 입니다.
}연습문제
[오답] num은 기본 자료형이므로 메소드가 추가되지 않습니다.
num과 같은 기본 자료형은 자료형에 prototype에 메소드를 추가해야 합니다.
- 한국어
- 영어
Math.sin()안에는 각도는 꼭 라디안 단위를 써줘야 한다.
라디안 = (도수 * Math.PI) / 180;
라디안(단위 : rad) = 반지름일 때의 중심각 : 57.3도
- 360도 = 2pirad
- 180도 = 1pirad
라디안을 사용하는 이유는 '중심각에 따라서 호의 길이와 그 넓이는 정비례 하기 때문에'
호의 길이나 넓이를 구하는데 용이하기 때문이다.
라디안으로 단위를 변환하여 값을 구하면 1이 나온다.
2.prototype
3.sample 같은 특성을 가지는 샘플 값을 만들어 낼 때 사용한다.
[정답풀이]
const output = _.orderBy(book, (book) => book.name)
- 프로퍼티의 이름은 상관없다.
- orders는 기본값으로 하면 오름차순으로 정렬된다.
console.log(output);
정답은 2. ...은 전개연산자에 사용된다. 객체나 배열을 그대로 받아와 사용할 수 있다.
[https://kinsta.com/blog/javascript-libraries/]
-
Data visualization in Maps and Charts
통계를 보거나 퍼포먼스 대시보드, 패널 등을 구현하기 위한 -
DOM Manipulation
자바스크립트를 통해서 화면을 구현합니다. style, 화면랜더링 등을 브라우저에서 직접 작업하지 않고
가상환경에서 빠르게 계산한 후 화면 브라우저에 나타냅니다. -
Data Handling
매일 처리하는 엄청난 양의 데이터를 처리합니다. -
Database
데이터베이스를 구축하고 테이블 생성, 데이터 동기화 등을 지원합니다. -
Forms
JS 라이브러리를 사용하여 양식 유효성 검사, 동기화, 필드 제어 등을 처리합니다. -
Animations
애니메이션을 활용하여 웹 페이지를 대화형이고 더 매력적으로 만들 수 있습니다. -
Image Effects
JS 라이브러리를 사용하여 이미지에 효과를 추가하고 눈에 띄게 만들 수 있습니다.
