객체: 관련된 데이터들의 모음
(배열과 차이점: 배열은 데이터들이 나열된 것, 데이터 접근하는 데 한계가 있음 / 객체는 함수 저장 가능)
******
배열로 표시하면 const pooh = ['pooh', 'bear', 'disney character', 'boy'];
이름, 종류, 직업, 성별 순으로 나열해놨는데 순서 모르면 추가할 수 없고 데이터에 접근할 때 인덱스로 접근해야 한다.
(pooh[0] 이런 식)
하지만 이걸 객체로 표현하면
const pooh = {name: 'pooh', species: 'bear', job: 'disney character', gender: 'boy'}
key-value 형태로 저장할 수 있어서 데이터에 접근하기 더 편리하다.
(pooh.name 이런 식으로 key를 사용하여 접근 가능)
******
객체 안에 있는 데이터: property
객체 안에 있는 함수: method
객체 선언 방법: 객체 이름 = {key: value}
* 객체 안에서 특수문자나 공백 사용 시 따옴표로 묶어줘야 한다.
객체 접근: ., []
* 대괄호를 사용하여 접근할 때는 key 이름을 문자로 바꿔줘야 한다. (따옴표 사용)
* key 이름에 공백이나 특수문자가 들어가 있으면 반드시 대괄호를 사용해서 접근해야 한다.
+) 객체 안에 있는 함수 실행하기
객체에 property나 method 추가하기: ., []
객체에 property나 method 삭제하기: delete
삭제하고자 하는 property나 method 입력하고 앞에 delete 써주면 됨!
생성자 함수 (객체를 생성해 주는 함수)
: 객체를 만들 때 편리하게 만들 수 있도록 해주는 것 (쿠키 모양 틀 같은 느낌)
- 맨 앞 글자를 대문자로 함
- 인자로 받아올 것들을 괄호 안에 적어줌
- 생성자 함수를 통해서 만들어진 객체를 instance라고 하는데 this로 각각의 인스턴스를 가리킬 수 있음
- Say-Hi, Say-Bye 함수에서 this.name 사용할 때 위 두 방법 다 이용 가능 (``로 묶고 ${} or 문자열로 만들어서 +로 이어줌)
생성자 함수 사용하여 객체 만들기
객체 이름 = new 생성자 함수(인자);
생성자 함수를 사용하는 것처럼 객체를 만들 수 있다
객체 이름 = new Object(인자);
property나 method를 추가할 때는 원래 방법대로 해주면 된다. (., [] 사용)
강의 출처: 컴공 선배
'Web > Javascript' 카테고리의 다른 글
[Javascript] 반복문 (0) | 2022.03.26 |
---|---|
[Javascript] 조건문 (0) | 2022.03.26 |
[Javascript] 함수 (1) | 2022.03.26 |
[Javascript] 배열 (1) | 2022.03.26 |
[Javascript] 변수, 자료형, 연산자 (0) | 2022.03.26 |