Web/Javascript

[Javascript] 객체

동띵 2022. 3. 26. 16:04

객체: 관련된 데이터들의 모음

(배열과 차이점: 배열은 데이터들이 나열된 것, 데이터 접근하는 데 한계가 있음 / 객체는 함수 저장 가능)

 

******

배열로 표시하면 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