들어가기에 앞서,
생소한 단어들이 많이 나온다 😵 프로퍼티, 키, 인스턴스, 프로토타입 등등..
용어들을 머릿속으로 잘 생각하자! 나중에는 너무 익숙해질 단어들이 될 것이기에!
Object
자바스크립트에서 원시타입을 제외한 모든 값은 객체이다
객체는 이름과 값을 한 쌍으로 묶은 데이터를 여러개 모은 것이다.
객체 타입의 값을 변수에 대입하면 그 변수에는 객체의 ⭕️ 참조(메모리에서의 위치정보)가 저장⭕️ 된다.
var card = {suit="하트",rank="A"} 객체에 포함된 데이터 하나(이름과 값의 쌍)을 프로퍼티 라고 부른다
suit와 rank는 프로퍼티이며, 프로퍼티 이름 or 키 라고 부른다
"하트"와 "A"는 값 or value 라고 부른다
✍ 객체의 생성
👉🏻 객체 리터럴로 생성
var card = {suit="하트",rank="A"} 👉🏻 생성자로 객체 생성
function Card (suit,rank){
this.suit = suit;
this.rank = rank;
}
var card = new Card("하트","A");생성자로 객체를 생성할 때는 new연산자을 사용한다
console.log(card);해당 코드를 실항하면 suit프로퍼티에는 하트, rank프로퍼티에는 A가 나온다. (이해가 되지 않는다면 this개념을 다시 보고오자!)
💁🏻♀️ 근데, 생성자가 뭐죠?
new 연산자로 객체를 생성할 것이라 기대하고 만든 함수를 생성자라고 부른다.
생성자와 new연산자로 생성한 객체를 그 생성자의 인스턴스라고 부른다.
new 연산자로 객체를 생성할 것이라고 기대하고 만든 함수를 생성자
그 생성자를 통해 만든 객체를 인스턴스라고 부른다!
💁🏻♀️ 생성자를 쓰면 뭐가 좋죠?
생성자는 객체를 생성하고 초기화하는 역할을 한다.
생성자를 사용하면 이름은 같지만 프로퍼티 값이 다른 객체 여러개를 간단히 생성할 수 있다.
var card = new Card("하트","A");
var card2 = new Card("클럽","k");
var card3 = new Card("스페이드","2");💁🏻♀️ 생성자 프로퍼티 value에 함수를 대입 할 수 있나요?
가능하다!
생성자에서 this.key에 함수의 참조를 대입하면 메서드를 정의 할 수 있다
그런데, 생성자 안에서 메서드를 정의하는 방식의 문제점이 있다
메서드를 포함한 생성자로 인스턴스를 여러개 생성하면 같은 작업를 하는 메서드를 인스턴스 개수만큼 생성하게 되며, 결과적으로 그만큼의 메모리를 소비하게 된다.
그래서... 이러한 문제는 프로토타입 객체에 메서드를 정의하는 방식으로 해결이 가능하다!
- 프로토타입은 다음 시간에 정리하는 것으로 (다뤄야할 내용이 너무 많다 😹)
✍ 프로퍼티
👉🏻 in연산자
in연산자는 객체 안에 지명한 프로퍼티가 있는지 검색한다
const person = {name:"jung"};
console.log("name" in person) // true
console.log("age" in person) // false
console.log("toString" in person) // true👉🏻 delete 연산자
let user = {};
user["link"] = true;
console.log(user); // {link:true};
delete user["link"];
console.log(user); // {}👉🏻 for/in문
정의 및 설명은 조건문과 반복문 TIL 을 보고오자!
function getKeys(obj) {
const arry = [];
for (let p in obj) {
arry.push(p);
//console.log(p);
}
return arry;
const travelPlace = { 제주도: 2, 부산: 1, 전주: 1, 속초: 1 };
console.log(getKeys(travelPlace)); // ['제주도', '부산', '전주', '속초']
}
👉🏻 Object.keys 메서드
Object.keys는 저장한 객체가 소유한 프로퍼티 중에서 열거할 수 있는 프로퍼티 이름만(key) 배열로 만들어서 반환한다.
위에 for/in문에 썻던 문제를 이렇게 바꿀수 있다
const travelPlace = { 제주도: 2, 부산: 1, 전주: 1, 속초: 1 };
console.log(Object.keys(travelPlace)); // ['제주도', '부산', '전주', '속초']훨씬 간편해 졌다! 💜
👉🏻 Object.getOwnPropertyNames 메서드
Object.keys는 저장한 객체가 소유한 프로퍼티 중에서 열거할 수 없는 프로퍼티 이름까지(key) 배열로 만들어서 반환한다.
여기서 열거 할 수 없는 프로퍼티 이름은 함수명과 같은 프로퍼티다!
📌 TMI
낯선 용어들이 너무 많이 나와 당황스러웠던 객체정리..
점 표기법 : obj.property,
대괄호 표기법 :obj["property"]. 대괄호 표기법
용어들에 익숙해져야 실제 프로젝트에 들어갔을때나 구글링을 할 때 이해가 쉬워진다! 전문 용어에 익숙해지도록 하자! 💪🏻
