본문 바로가기
프론트엔드/생활코딩

[생활코딩] JavaScript 9. 객체

by cejin 2023. 11. 10.

* JavaScript 목차

 

 

1. 객체 (object)

: 인덱스로 문자를 사용하고 싶다면
= 연관배열 (associative array), 맵(map), 딕셔너리(dictonary)

object.function() {};

- 순서 없이 정보를 저장 
- 이름이 있는 정리정돈 상자
- 관련 있는 함수와 변수를 그룹핑
- 폴더 느낌
 
 
 

2. 객체 vs 배열

  배열 객체
순서 O X
(이름 O)
정의할 때 대괄호 중괄호
값을 불러오는... 인덱스
coworkers[0]

coworkers.programmer

 
 
 

3. 실습 : 객체 생성 및 확인

1. 결과

- 의도 : coworkers 객체 생성하고 데이터 입력
1) programmer : egoing
2) designer : leezche
3) bookkeeper : duru
4) data scientist : taeho
 
 

2. 코드

- 키로 쓸 단어에 띄어쓰기가 있다면 대괄호로 묶기
 
 
 

4. 데이터 순회

for .. in

- 검색어 : javascript object iterate
 
 

1. 키 (key)

- 배열문의 index와 흡사
ex) programmer, designer,...
 
 

2. 실습

1. 결과

- 의도 : for .. in 사용해서 모든 데이터 출력하기
 
 
2. 코드

 
 
 

5. 속성과 메소드

1. 정의

1. 속성 (프로퍼티, property)
: 객체에 소속된 변수
 
2. 메소드 (method)
: 객체에 소속된 함수
 
 

2. 실습

1. 결과

- 의도 : 객체에 들어있는 모든 데이터 확인
- showAll 함수에 대해 나오는 게 싫다면 조건문으로 출력 안 되게 설정해야 함
 
 
2. 코드

* 객체
- 함수를 담을 수 있음
 
* this
- 자기 자신을 가리킴
- 객체 이름 바꿔도 OK
 
 
 

6. 활용

var Body = {
	setColor : function(color) {},
    setBackgroundColor : function(color) {}
}

var Links = {
	setColor : function(color) {}
}

- 객체의 생산자가 되어 보기