객체
자바스크립트 객체 구성
• 여러 개의 프로퍼티(property)와 메소드로 구성
• 프로퍼티 : 객체의 고유한 속성 *객체는 중괄호를 열고 닫음
• 메소드(method) : 함수
배열과 객체의 차이점
• 배열은 원소에 접근 할 때, 숫자를 사용
• 객체는 원소에 접근 할 때, 문자열을 사용
• 문자열은 키(key) 또는 프로퍼티(property)라 부름
• 문자열이 가리키는 원소를 값이라 함
• 배열은 여러 개체를 표현할 때 사용
• 예) 여러 동물의 이름이 나열된 배열
• 객체는 다양한 특성이나 속성이 있는 하나의 개체를 표현 할 때 사용
• 예) 한 동물과 관련된 여러 정보를 저장
객체 생성
한 가지 동물에 관한 여러 정보를 저장
• 다리가 두 개인 고양이 ‘야옹이’에 대한 정보가 저장된 객체
• 변수 생성
• 세 개의키-값 쌍이 들어있는 객체를 할당
• 객체를 생성 시에는 중괄호({ }) 사용
리터럴 표기법
• 중괄호를 이용하여 프로퍼티와 메서드를 한 번에 작성
따옴표가 없는 키
각 키의 따옴표 생략
• 자바스크립트는 키가 문자열이어야 한다는 것을 알고 있음
• 따라서 따옴표는 생략 가능
따옴표 사용 시
• 키 이름에 공백 포함 가능
• 따옴표 생략 시, 불가능
객체 안의 값 접근
따옴표를 사용하여 접근하는 경우
• 배열처럼 대괄호를 사용해서 접근
따옴표를 생략하고 접근하는 경우(점 표기법)
이 방법을 더 많이 사용
객체내의 모든 키 목록
• Object.keys()
객체에 값 추가
빈 객체
객체에 원소 추가
✔️ 객체의 키는 순서가 없음
• 따라서, 키의 순서가 중요할 때는 객체를 사용하지 않음
• 배열에는 순서가 있음 (키의 순서 중요할 때는 배열!)
* 배열안에 객체도 넣을 수 있음
점 표기법으로 키 추가하기
JSON.stringify()
자바스크립트의 값을 JSON 문자열로 변환
객체와 배열 결합하기
객체/배열의 값으로 객체/배열을 사용
• 예) 공룡 객체로 만든 배열 (객체 안에 배열)
공룡에 대한 정보를 얻을 때
친구 배열
• 3개의 객체 생성 (객체 안에 배열이 들어가있음)
• 각 객체에 ‘이름, 나이, 행운의숫자’라는 키 삽입
• 이름(문자열), 나이(숫자), 행운의숫자(숫자 배열)
• 각 원소는 해당하는 친구 객체를 참조
정보 가져오기
• 배열의 인덱스를 사용
• 객체의 값 얻기
• 내부 배열의 값 얻기
빌려준 돈 기록하기
• 객체를 활용하여 문자열과 값을 연결
• 키(친구 이름), 값(빌린 금액)
• 지훈이가 3000원을 더 빌림
• 각 친구가 빌린 돈 확인 (전체 객체 보기)
영화 관련 정보 저장하기
• 키(영화제목), 값(영화 정보를 담은 객체)
• 영화 정보 얻기
• 새로운 영화 추가
• 모든 영화 제목 얻기
const로 선언된 객체의 값 변경하기
실행 결과
const로 선언된 객체 내부 값 변경하기
값을 재할당하는 건 불가능하지만 값을 변경하는 것은 가능
메모리 주소만 참조하기 때문에 값이 변경되는 것은 상관 없음. 메모리 주소가 바뀌지 않고 값만 변경할 수 있음
객체 생성문 축약
key와 변수의 이름이 같은 경우 축약 가능
값을 생략하고 키만 써도 됨 (대신 키와 변수의 이름이 같을 경우만!)
결과
객체 안에 함수 넣기
값자리 (value자리)에 객체나 배열 함수 다 올 수 있다
실행 결과
함수 호출
실행 결과
화살표 함수
화살표 함수의 안 그니까 객체의 안에서의 화살표 함수에서 this는 function으로 선언된 부모 함수들을 찾아가는 것으로 해석됨 (absolute와 비슷) speak의 상위함수가 없기 때문에 undefined로 뜸
따라서 객체 안에서는 무조건 function으로 선언하자!
실행 결과
생성자 함수를 이용하여 객체 생성하기
생성자 함수
• 유사한 객체를 여러 개 생성 할 수 있음 (틀을 만드는 것)
특징
• 함수 이름의 첫 글자는 대문자로 시작
• new 연산자를 붙여서 실행
• 객체 생성 예시) 변수 누군가가 Animals를 부를 때 해당데이터가 이 변수에 차곡차곡 쌓임
실행 결과
내장 객체
Date 객체
• 시간 정보를 담는 객체
• 현재 시간 정보
예) 2017년 4월 1일의 날짜 정보를 기록하는 객체 생성
• Date 객체에서 월(month) 값은 0부터 시작 (4월 이면 0,1,2,3 해서 3)
• 0은 1월, 11은 12월
Date 객체로 현재 시간 알아내기
<body>
<h3>Date 객체로 현재 시간 알아내기</h3>
<hr>
<script>
var now = new Date(); // 현재 시간 값을 가진 Date 객체 생성
document.write("현재 시간 : " + now.toLocaleString() + "<br><hr>");
document.write(now.getFullYear() + "년도<br>");
document.write(now.getMonth() + 1 + "월<br>");
document.write(now.getDate() + "일<br>");
document.write(now.getHours() + "시<br>");
document.write(now.getMinutes() + "분<br>");
document.write(now.getSeconds() + "초<br>");
document.write(now.getMilliseconds() + "밀리초<br><hr>");
var next = new Date(2021, 7, 15, 12, 12, 12); // 7은 8월
document.write("next.toLocaleString() : "+ next.toLocaleString() + "<br>");
</script>
</body>
실행 결과
Math 객체
• 수학 계산을 위한 객체
• new Math()로 객체를 생성하지 않음
난수 발생
• Math.random()
• 1보다 작은 0~1 사이의 실수를 리턴
• Math.floor(m)
• m의 소수점 이하를 제거한 정수 리턴
• 예) 0~100 보다 작은 정수 10개를 랜덤하게 생성 ( 0~99)
var random = 0;
for (i = 0; i < 10; i++) {
var random = Math.floor(Math.random() * (99 + 1));
document.write(random);
document.write("<br>");
}
[실습회고]
첫 ,,, 문제부터 막혀벌인 1인,, ( car [1].색상 ); 이렇게 했는데 다른 방법을 적용해야 했다. 왜냐면 저건 객체 안에 배열에 대한 정보를 얻을 때 쓰는 방법이었고 car["색상"] = "red"; 이렇게 먼저 선언해놓고 car["색상"] 이렇게 호출해야 저렇게 나오는 것이었던 것 그렇게 조금 머리싸매다가 한 문제 완. 오늘도 바보가튼 나의 모습,,,
<script>
// 프로퍼티 : 속성
// 메소드 : 함수
var person = {
name : "Hello!",
firstName :" My name is Sooa",
lastName :"Jung",
sayHello : function(){
document.write(this.name , this.firstName , this.lastName);
}
};
person.sayHello();
</script>
그 뒤로 쭉쭉 풀다가 또 막혀벌인... 아니 이거 뭐야 뭐지 ? 했다가 function이랑 this.name 써야한다구래서 그냥 낑낑 댐
프로퍼티는 속성 메소드는 함수니까 sey hello를 함수로 지정하고 메소드를 걍 포함시키면 되는 일인데 왜 지나고보면 그제야 쉬운지 ,, (사실 안 쉬움 ) 아 글고 저 앞에 헬로 마이네임 이즈는 걍 쓰는 건데 저것도 변수에 담아야하는 줄 알고 어거지로 담앗다가 다시 방생 ;;;여튼 간에 해결 완
<script>
// 프로퍼티 : 속성
// 메소드 : 함수
var person = {
firstName: "Sooa",
lastName: "Jung",
sayHello: function () {
document.write(
"Hello my name is" + " " + this.firstName + " " + this.lastName
);
},
};
person.sayHello();
</script>
이 문제는 쉽게 풀었다가 출력문을 하나로 써야한다해서 엥 ,,? 도대체,, 그거 어케하는건데,, 아니 뭐 함수 써야겠는 건 알겠는데,, 어케하는 건데요 그거,, 이러다가 새 변수를 만들어서 그 변수에 함수 자체를 넣어준다라는 생각을 통해 완성하게 되었다. (귤님 최고) 근데 다른 분의 코드도 보게 되었는데 파라미터를 ,,, 쓰면 되는 일이었는데,, 인강도 들었는데,, 생각이 안 났다 이말이죠 ,,,, 여튼 완
<script>
function Fruits(name, color, price) {
this.name = name;
this.color = color;
this.price = price;
this.print = function () {
document.write(
`이름 : ${this.name} <br> 색깔 : ${this.color} <br> price : ${this.price} <hr>`
);
};
}
let apple = new Fruits("사과", "red", 1000);
let orange = new Fruits("오렌지", "orange", 3000);
let mango = new Fruits("망고", "yellow", 4000);
apple.print();
orange.print();
mango.print();
</script>
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 4주차 블로그 포스팅
'Javascript' 카테고리의 다른 글
| [새싹 프론트엔드] 4주차 - 3 (0) | 2022.11.09 |
|---|---|
| [새싹 프론트엔드] 4주차 - 2 (0) | 2022.11.09 |
| [새싹 프론트엔드] 3주차 - 3 (0) | 2022.11.02 |
| [새싹 프론트엔드] 3주차 - 2 조건문 & 반복문 (0) | 2022.11.01 |
| [새싹 프론트엔드] 3주차 - 1 자바스크립트 개념 / 자료형과 변수 (0) | 2022.10.31 |
