아직 미숙한 부분이 많은 PPT(or pdf) 스터디 그룹 다자바에서 진행한 자바스크립트 스터디 1주차. Chapter 6 객체 발표자료. 이용교재: 모던 웹을 위한 JavaScript + jQuery 입문(한빛미디어)

1. 다자바 JavaScript Study
Chapter#6. 객체(Object)
160105 Made by 잉케링
Copyright ⓒ Yerin Lee All Rights Reserved※ “나눔손글씨 펜”, “나눔고딕” 폰트 이용 PPT입니다. 참고해주세요! 

2. 01. 객체 개요
160105 Made by 잉케링
ㄱ. 배열 vs 객체
배열(Array): 순서있는 값들의 집합, 여러 개의 변수를 한꺼번에 다룰 수 있음.
인덱스+원소(요소)를 가지며 각각의 배열 원소를 사용.
▶ 배열 이름 뒤에 인덱스로 접근
>> 객체를 기반으로 만들어져 상당히 유사함
객체(Object): 클래스의 인스턴스(실제 메모리상에 할당된 것)이며
고유의 속성을 가지며 클래스에서 정의한 행위 수행할 수 있음.
클래스에 정의된 행위를 공유 ▶ 메모리를 경제적으로 사용.
▶ 키를 사용하여 원소(요소)에 접근.
>> 키는 식별자 or 문자열 모두 사용가능!

3. ㄱ. 배열 vs 객체
lang[0] = Node.js, lang[1] = JavaScript
lang[2] = “JSON”, lang[3] = jQuery
// 배열 선언
// 객체 생성
Name, Age, College, Address = 키(Key)
YerinLee, 22, Gachon college, Daejeon = 속성
★배열 생성 = 꺽쇠괄호([]), 객체 생성 = 중괄호({})★
160105 Made by 잉케링

4. * 객체요소 접근 방법
160105 Made by 잉케링
List[‘Name’] ▶ ‘Yerin Lee’
List[‘Age’] ▶ ‘22’
List[‘College’] ▶ ‘Gachon college’
List[‘Address’] ▶ ‘Daejeon’
// 대괄호를 사용하는 방법
// 점 표기법 (대부분 사용)
List.Name ▶ ‘Yerin Lee’
List.Age ▶ ‘22’
List.College ▶ ‘Gachon college’
List.Address ▶ ‘Daejeon’
//문자열을 키로 사용
List[‘Age’] ▶ 22
List[‘Phone’] ▶ 01012345678
▶ 언어 정의상의 에러로 인해 점표기법은 사용불가.
식별자가 아닌 문자를 키로 사용했을 땐
무조건 대괄호를 사용해야 객체의 요소에 접근이 가능!

5. 02. 속성과 메서드
160105 Made by 잉케링
ㄱ. 요소와 속성
요소(Element): 배열 내부에 있는 값.
속성(Property): 객체 내부에 있는 값
>> (참고) 자바스크립트는 요소와 속성이 다르지 않다!
ㄴ. 메서드
메서드(Method): 객체의 속성 중 함수 자료형인 속성
★ 속성과 메서드의 구분
// 객체 person = name속성&eat 속성 가짐
>>자기 자신이 가진 속성이라는 것을 표시
▶ this 키워드 사용!
// 결과

6. 03. 객체와 반복문
160105 Made by 잉케링
ㄱ. 배열의 요소 접근
단순 for 반복문 or for in 반복문 이용
따라서, 객체의 속성을 모두 살펴보기 위해 for in 반복문 사용!
But, 단순 for 반복문으로 객체의 속성을 살펴보는 것은 불가능!
★ 객체와 반복문
>> 객체 키 및 속성 선언
* for in 반복문에 객체 삽입 ▶ 요소 개수만큼 반복문 실행!
// 결과화면

7. 04. 객체 관련 키워드
160105 Made by 잉케링
ㄱ. In 키워드
For 키워드와 별도로 사용 ▶ 해당 키가 객체 안에 있는지 확인 가능.
ㄴ. with 키워드
복잡하게 사용해야 하는 코드를 짧게 줄여줌
속성 존재O true,
존재X false

8. ㄴ. With 키워드
160105 Made by 잉케링
With 키워드 사용X ▶ 식별자 여러 번 사용
>> 코드가 복잡해짐
With 키워드 사용 ▶ 객체 명시할 필요X
속성을 쉽게 사용 가능!
★ with ↔ 객체 충돌
객체 속성이름 == 외부 변수 이름 ▶ 충돌발생
충돌경우, JS는 객체의 속성을 우선시하며, 어떤 결과도 출력되지 않음.
해결: window 객체(자바스크립트 최상위에 위치한 객체)
ㄴ> CH09에 언급

9. 05. 객체의 속성 추가&제거
160105 Made by 잉케링
ㄱ. 속성추가
빈 객체 생성 >> 동적으로 속성 추가
ㄴ. 속성제거
Delete 키워드 사용
▶ delete 키워드 + 삭제하고자 하는 객체 속성
추가 코드 밑에 입력.
// 결과

10. 06. 객체&배열을 사용한 데이터관리
160105 Made by 잉케링
ㄱ. 추상화
현실에 존재하는 객체의 필요한 속성을 추출하는 작업
ㄴ. Push() 메서드
객체가 흩어져있으면 조작이 어려움 ▶ 배열에 저장.
Push() 메서드를 사용하면 배열에 요소를 집어넣을 수 있음.
//push() 예시
ㄷ. 메서드 추가
각각의 개체에 같은 메서도를 모두 직접 입력 ▶ 정신나간 행동
* 반복문을 사용 ▶ 모든 객체가 메서드를 갖게 됨!
★배열 내용의 정렬 ▶ Chapter#08에 언급!★

11. 07. 함수를 사용한 객체 생성
160105 Made by 잉케링
ㄱ. 개별적 객체 생성
객체의 특성을 정확히 반영 가능
ㄴ. 함수를 사용한 객체 생성
But, 시간이 오래걸리고 복잡해짐.
▶ “함수” 이용!
함수를 사용하면 객체를 틀에서 찍어내듯이 생산할 수 있음.
But, 실제로는 이런 방법은 사용하지 않음.
Why?
▶ 생성자 함수를 사용하면 기능이 많은 객체를 쉽게 만들 수 있기 때문!
ㄴ> Chapter#07 에서 언급.

12. 160105 Made by 잉케링
끗 6ㅅ6
이제 게임하러 가야지 (스르륵)