반응형
SMALL
Object
배열 형태의 객체
1. 형태
let object = {
key: 'value',
'key': numberValue,
key: [10, 20, 30],
key: function() {
}
};key: 'value'의 형태,표시로 여러개 데이터 삽입[]배열 타입 value 가능function()함수 타입 value 가능
2. 객체 사용법
2.1 변수명.key 형태로 사용
object.<key>;
object.<key>('');2.2 변수명['key'] 형태로 사용
object['key'];3. 객체에 값 따로 넣기
처음 객체를 선언할 때 값을 넣는게 아니라 나중에 따로 넣을 수 있다.
let object = {};
object.name = 'nang';
object.kor = 100;
// 아래와 같음
let object = {
name: 'nang',
kor: 100
}예제
- 배열 객체 사용하기
<!DOCTYPE html>
<html>
<head>
<script>
// 배열 객체
let person = {
name: 'nang',
address: '경기',
eat: function (food) {
console.log(food + "을(를) 먹었습니다.");
}
};
let school = {
name: '동화',
capacity: [30, 30, 30], // 배열 객체 안에 배열 타입으로 값 설정
grade: '3',
event: function(name, month, eventName) {
console.log(name + ", " + month + " 달에 " + eventName + " 이벤트가 있습니다.");
}
};
console.log(person.name);
person.eat('바나나');
school.event(school.name, "1월", "졸업식");
</script>
</head>
</html>결과
4. this
해당 영역에 있는 변수를 가리킬 때 사용
- 메소드 안에서 자신이 속한 객체의 값을 사용하고 싶을 때
- 다른 언어에서는
this생략 가능하지만 자바스크립트에서는 생략 불가능! - 여기에 있는 <변수>를 사용하겠다!
this.변수예제
this사용
let school = {
name: '동화',
capacity: [30, 30, 30], // 배열 객체 안에 배열 타입으로 값 설정
grade: '3',
event: function(month, eventName) {
console.log(this.name + ", " + month + " 달에 " + eventName + " 이벤트가 있습니다.");
};this.name- 동화
5. with
객체 사용 시 변수명을 써줘야하는 것이 번거로울 때 사용
- 코드를 짧게 줄여주는 키워드
;필요 없음
with(객체 변수명) {
}예제
- 총점 및 평균 구하기 (객체 이용)
<!DOCTYPE html>
<html>
<head>
<script>
// 객체 선언
let student = {};
student.name = "nang";
student.kor = 100;
student.mat = 90;
student.eng = 80;
let sum = 0; // 총점
let avg = 0; // 평균
sum = student.kor + student.mat + student.eng;
avg = sum / 3;
with (student) { --------------------------*
sum = kor + mat + eng;
avg = sum / 3;
}
console.log("총점 : " + sum + " 평균 : " + avg);
</script>
</head>
</html>student라는 객체 변수명을 써준 것 처럼!- 원래는
student.kor..
결과
6. JSON 객체
- JSON.stringify()
- 자바스크립트 객체를 JSON 문자열로 변환
- JSON.parse()
- JSON 문자열을 자바스크립트 객체로 변환
반응형
LIST
'Javascript' 카테고리의 다른 글
| [Javascript] Inner Object (Number / String / Date) / 예제 (0) | 2020.04.24 |
|---|---|
| [Javascript] function 형태 (0) | 2020.04.21 |
| [Javascript] Math 함수 / method (0) | 2020.04.19 |
| [Javascript] array / array method / sorting 예제 (0) | 2020.04.18 |
| [Javascript] <table> 태그 / 표만들기 예제 (0) | 2020.04.14 |