1019 TIL

기멜·2021년 10월 19일
0

자바스크립트 독학

목록 보기
37/44

책 보고 공부한 내용들 까먹을 것 같은거 적어두기

생성자로 객체 생성하기

생성자라고 하는 함수로 객체를 생성할 수 있습니다.

function Card(suit, rank) {
  this.suit = suit;
  this.rank = rank;
}

여기서 this 는 '누가 나를 불렀느냐'를 뜻한다고 합니다.
즉, 선언이 아닌 호출에 따라 달라진다고 했습니다.
생성자 함수가 생성하는 객체로 this가 바인딩 됩니다.

그리고 여기서
this.suit = suit;
this.rank = rank;
this.다음에 오는 이름은 어떤 이름으로 해도 되지만 똑같이 해주는 것이 좋습니다. 문제가 되는건 = 뒤에 오는 이름을 바꿨을 때입니다. suit와 rank는 Card(suit, rank)에 있는 것들과 같은 애들입니다.

생성자로 객체를 생성할 때 new 연산자를 사용합니다.

let card = new Card("하트","A"); // 생성자로 객체를 생성할 때는 new 연산자
console.log(card); // -> Card {suit:"하트",rank:"A"}

이때 Card 생성자로 생성한 객체를 Card객체라고 부릅니다.
console.log로 출력하면 앞에 생성자 이름이 표시됩니다.

생성자

앞의 예처럼 new 연산자로 객체를 생성할 것이라 기대하고 만든 함수를 생성자라고 부릅니다. 관례적으로 첫글자를 대문자로 쓰는 파스칼 표기법을 사용합니다.
생성자 안에 this.프로퍼티 이름에 값을 대입하면 그 이름을 가진 프로퍼티에 값이 할당된 객체가 생성됩니다. 이때 this는 생성자가 생성하는 객체를 가르킵니다.
앞의 예시는 다음과 같이 객체 리터럴로 고쳐 쓸 수 있습니다.

let card = {};
card.suit = "하트";
card.rank = "A";
console.log(card)

{suit: '하트', rank: 'A'} // 결과

메서드를 가진 객체를 생성하는 생성자

생성자에서 this.프로퍼티 이름에 함수의 참조를 대입하면 메서드를 정의할 수 있습니다. 이때 메서드 함수 안에 있는 this는 생성될 인스턴스를 가리킵니다.

인스턴스 : 현재 생성된 바로 그 객체

메서드 함수 안에서 this를 사용하면 그 값이 인스턴스의 프로퍼티임을 명시할 수 있습니다.

프로퍼티 : 속성

Array 생성자

배열은 Array 생성자로도 생성할 수 있습니다.

let evens = new Array(2,4,6,8); // [2,4,6,8]을 생성
let empty = new Array(); // 빈 배열 [ ] 생성
let a = new Array(2,4); // 배열 리터럴 [2,4]와 똑같은 배열을 생성 

Array 생성자의 인수가 한 개고 그 값이 양의 정수면 의미가 달라집니다. 이때 인수는 배열 길이를 뜻하므로 배열이 그 길이만큼 생성됩니다.

let x = new Array(3);
console.log(x.length); // -> 3

배열 요소의 추가와 삭제

delete 연산자를 사용하여 배열의 요소를 삭제해도 그 배열의 length 프로퍼티 값은 바뀌지 않습니다. 즉, 삭제한 요소만 사라집니다.

let a = ["A","B","C","D"];
delete a[1];
console.log(a);

['A', empty, 'C', 'D'] // 결과
profile
프론트엔드 개발자를 꿈꾸는 도화지 위를 달리는 여자

0개의 댓글