- 객체 선언 및 사용
- 객체 생성시 특이케이스
- 객체 반복문
- 객체 메소드
- 객체 in / with 키워드
- 객체 속성 추가 및 제거
1) 객체
📌 객체 선언 및 사용
객체는 중괄호{}를 사용해서 생성하고 중괄호 안에는 이 객체에 필요한 속성(property)들을 정의한다.
속성명:속성값 의 형태로 정의하며 키:밸류 와 유사하다.
속성값으로는 모든 자료형의 값을 담을 수 있다.
객체 생성 : 자바스크립트에서의 객체는 자바에서의 컬렉션(HashMap)과 유사함
1) const arr로 배열 생성함
2) product 객체를 만들고 속성값으로 위 배열로 생성한 내용 입력
[속성명 : 속성값] == [pName:"Dry Mango"],
,로 이어줌 == [price : 4000],
3) divEl 변수에 div요소객체 가져오기
4) 화면상에 출력하기 divEl.document.getElementById("area1");
5) 내가 원한건 pNname = Dry mango 처럼 속성값이 나타나는 것이었는데, 내가 만든 객체여서 toString이 내부적으로 작성이 안되어 자료형타입이 화면상에 출력이 됨
*객체 속성에 접근하는 방법 두가지*
- 방법1. 대괄호를 이용하는 방법 : 객체명:["속성명"]
divEl.innerHTML += "pName : " + product["pName"]
divEl.innerHTML += "ingredient[0] : " + product["ingredient"][0]
- 방법2. .을 이용하는 방법 : 객체명.속성명
divEl.innerHTML += "pName : " + product.pName
divEl.innerHTML += "ingredeint[1] : " + product.ingredient[1]
📌 객체 생성시 특이케이스
속성명에 공백이 있거나, 특수문자가 포함된 경우, 속성명을 ""로 묶어줘야한다. 객체 속성에 접근하는 방법은 대괄호를 사용하는 방법만 된다 !
- 방법1. 대괄호를 이용하는 방법 : 객체명:["속성명"] divEl.innerHTML += "user name : " + user["user name"]; divEl.innerHTML += "age!! : " + user["age!!"];
📌 객체에서의 반복문
객체가 가지고 있는 모든 속성들에 순차적으로 접근하고자 한다면 반복문 제시 가능
💡 단, 단순한 for loop문은 안되고 for in문만 사용 가능함 !
💡 객체속성에 접근하는 방법은 대괄호를 사용하는 방법만 가능함 !
1) game 변수에 객체 생성 (title, price, laguage, company) 2) area3 요소객체 가져오기 3) for(let 변수 in 객체명) == for(let key in game) * key에는 속성명이 담긴다 (변수=title, 변수=price ''') 4) divEl.innerHTML += key + " : " + game[key] ** .으로 객체 속성에 접근할 경우, game.key는 game 객체의 key 변수를 찾고 있는데 game 변수에는 key 변수가 없기때문에 undefined이 뜬다. 그래서 대괄호로 사용해야함 ! ** for in문에서 in 뒤에 객체 제시시, 반복문 돌때마다 해당 객체의 순차적으러 접근되는 속성명이 변수에 담김 !
📌 객체의 메소드 속성
객체의 속성 중에서 함수 자료형인 속성을 메소드라 부른다.💡 메소드 내에서 같은 객체 내 속성에 접근시 this. 으로 접근하기!
1) div 요소객체 가져오기 (#area4)
2) dog 변수에 객체 담기 (name, kind ,eat)
3) dog 변수 안에 eat 메소드 작성
eat:function(food) {
divEl.innerHTML += this.kind + "종류인" + dog.name +"가 " + food + "를 먹어요"
}
* 함수 호출방법
dog.eat("전달할 매개변수");
📌 in과 with 키워드
- in : 객체 내의 해당 속성이 있는지 확인해주는 연산자 (true/false)- with : 객체의 속성 접근시 객체명 제시하는 것 생략 가능
1) 이름, 국어, 수학, 영어 점수 입력받는 input 요소 생성
2) 함수 안에 입력받은 값까지 읽어들이는 구문 작성
3) 읽어들인 문자열을 숫자로 형변환 Number(document.getElementById("kor").value)
4) getSum , getAvg 메소드 작성
5) 제시한 게 아니라 입력받은 거기때문에 toString 메소드도 작성해줌
6) with(student)로 divEl.innerHTML의 값 출력하기
📌 객체의 속성 추가 및 제거
1) 텅빈 객체 생성 2) 객체를 생성한 변수명.속성명 ="" 추가하기 3) toString 메소드로 같은 객체 내 요소 속성 접근하기 * 객체 속성 제거시 delete(변수명.속성명) * 객체 내 중복된 속성 불가능 * 마지막 값으로 덮어씌움
📌 객체 배열을 사용한 다량의 데이터 관리
1) student0 ~ 3까지 객체 생성 2) 변수 students에 텅빈 객체 생성 3) push로 배열 요소 추가 4) for in 문으로 새로운 값 추가하기 => students 배열에 javascript 점수와 getSum, getAvg 추가하기 5) divEl 변수에 div 요소 가져오기 6) for in문으로 반복문 돌려서 출력하기
📌 생성자함수
new 키워드를 이용하여 객체 생성할 수 있는 함수
함수명 제시시 첫글자 대문자 !
1) function Student() {} 로 일반속성 정의하기
2) getSum, getAvg 메소드 정의하기
3) const student1 = new Student("홍길동", 100, 70, 60, 80, 90);
=> 생성자 함수를 호출하여 값만 전달 !
4) for in 반복문 돌려서 출력하기
📌 Date 내장객체
출력하고자 하는 해당월은 -1 해줘야함 ex) 12월 출력시 12-1
1) new Date(); => 현재 날짜 및 시간 반환 2) getFullYear() => 년도 반환 3) getMonth() => 월 반환 4) getDate() => 일 반환 5) getDay() => 요일 반환
1s == 1000ms
1m == 60s == 60x1000ms
1h == 60m == 60x60s == 60x60x1000ms
1d == 24h == 24x60m == 24x60x60s == 24x60x60x1000ms
- D-day 구하는 방법
<
const end = new Date(2023, 3-1, 27);
const now = new Date();
const dday = (end-now) / (24x60x60x1000);
