객체
- 프로그램에서 인식할 수 있는 모든 대상(그 기능과 특성을 인식 가능한 단위)
- 데이터를 저장하고 처리하는 기본 단위
객체는 총 4종류가 있다.
자바스크립트 객체(js 안에 이미 만들어진 객체)
- 문서 객체모델(DOM): 문서뿐만 아니라 웹 문서 안에 모든 자원을 내부에 인식할 수 있도록 도와주는 것
- 브라우저 관련 객체: 웹 브라우저 정보를 객체로 관리 (BOM)
- 내장 객체: 웹 프로그래밍에서 자주 사용하는 요소를 객체로 정의해놓음
사용자 정의 객체 (직접 정의 객체)
- 말그대로 사용자가 직접 만드는 객체
인스턴스
객체를 사용하기 위해서는, 메모리 위에 객체가 올라가야한다._
이렇듯 메모리 위에 올라가 사용할 수 있는 객체의 상태를 인스턴스라고 한다.
new 객체명 //메모리 위에 새로올리는 법 : new객체의 속성
- 프로퍼티: 객체의 특징이나 속성 (ex: 제조사, 모델명, 색상, 배기량)
- 메서드 : 객체에서 할 수 있는 동작 (ex: 시동 걸기, 움직이기, 멈추기, 주차하기)
배열도 객체다
초깃값이 없는 경우
var arr=new Array(4); //배열의 크기를 지정O
var arr2=new Array(); //배열의 크기를 지정X초깃값이 있는 경우
var arr=[1,2,3];js에서 객체가 표현되는 방법
new 생성자 객체
객체 생성 시 파스칼 네이밍을 사용한다
let obj1 = new Object;//new 다음 파스칼 사용
console.log(typeof obj1); //object객체 리터럴 (중괄호를 이용해 객체 생성)
let obj2 = {name:'IT', age: 28};사용자 정의 객체 - 생성자 함수
//선언식
function Customer(){
}
let customer = new Customer();
console.log(customer); //object가 아니라 customer이라고 뜬다.
//표현식
let customer2 = function(){};사용자가 직접 객체 형태를 만드는 방법이다.
function Car(){
brand = '포르쉐';
}
let car = new Car();
console.log(car); //이러면 brand 프로퍼티가 보이지 않는다?
이 경우에는 마지막줄의 car의 property가 제대로 보이지 않는다.
왜냐면, 생성자 함수 안에서 '생성할 객체가 가질 프로퍼티'라고 명시가 되어있지 않기 때문.
함수 표현식으로도 사용자 정의 객체 생성이 가능할까?
1) 일반적인 함수 표현식으로는 생성 가능
2) 화살표함수 표현식으로는 생성 불가능-> 화살표 함수는 this를 사용할 수 없기 때문!!
this
this는 생성자가 가지는 프로퍼티라고 명시를 하기 위해 사용된다.
function Car(){
//프로퍼티
this.brand = '포르쉐';
this.color = 'red';
//메서드
this.turnOn = function(){
console.log("turn On");
}
}메서드는 물론 화살표 함수로도 표현이 가능하다.
...
this.turnOn=()=>console.log("turn On!!!");프로퍼티 조회하기
. 이용하기
console.log(car.brand).을 이용하면 객체가 가지고있는 프로퍼티에 접근이 가능하다.
[]이용하기
console.log(car['brand']);마치 배열의 인덱스로 접근하는 것 처럼, 꺾은 괄호를 이용해서도 표현이 가능하다.
이 때, 프로퍼티명은 문자열('')로 표현해야한다.
프로퍼티 변경하기
이 때 프로퍼티(메서드)를 바꾸는 방법에는 두가지가 있다.
객체 생성 후, 객체의 정보를 바꾸기
function Student(name,grade,id){
this.name = name;
this.grade = grade;
this.id = id;
//this.printInfo=()=>console.log(name, grade, id);
this.printInfo = function(){return `name: ${this.name}, grade: ${this.grade}, id : ${this.id}`}
}
let it = new Student('IT','Junior',1001);
it.id = 1010;객체 값을 바꾸는 별도의 메서드를 만들기
나중에 OOP를 배우게 되면 getter ,setter 등의 메서드로 안정성을 높이게 되는데
이와 유사하게 별도의 메서드를 만들면 된다.
function Student(name,grade,id){
this.name = name;
this.grade = grade;
this.id = id;
//this.printInfo=()=>console.log(name, grade, id);
this.printInfo = function(){return `name: ${this.name}, grade: ${this.grade}, id : ${this.id}`}
this.setId = function(newId){this.id = newId};
}
let it = new Student('IT','Junior',1001);
it.setId(1010);이렇게 세부 기능별로 메서드를 쪼개야 재활용이 편하다!
프로퍼티 제거하기
delete
프로퍼티의 제거는 delete를 이용한다. (delete 뒤에는 바로 객체프로퍼티명이 와야함)
//...위에 예제 그대로
delete it.grade;
console.log(it.printInfo()); //grade부분이 undefined가 뜬다근데 이상하지 않은가?
grade는 이제 없는 프로퍼티인데, 왜 오류가 뜨는게 아니라 undefined가 뜬다.
이 때, 아예 해당 프로퍼티를 삭제한 새로운 객체를 만들어내는 문법이 있다.
... 구조 분해
let {grade, ...newStudent} = it;
console.log(newStudent);위 문법은 it 객체에서 grade를 분해하고, 그 외 나머지(...) 프로퍼티들을, 'newStudent'라는 변수로 새로 할당한다는 이야기다.
delete VS ...(Spread)
-
delete
원본 객체 변경 가능 -
... (spread)
원본 객체 변경X, 새로운 객체 생성
선언식 말고도 표현식으로 객체 생성이 가능할까?
