<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 객체</title>
</head>
<body>
<h1>자바스크립트 객체</h1>
<h2>개요</h2>
<p>자바스크립트는 기본 자료형 제외한 나머지 모두 객체임</p>
<p>자바스크립트의 객체는 기본적으로 key와 value 값으로 구성된
속성property들의 집합</p>
<p>자바스크립트 함수는 1급 시민이므로 값으로 취급할 수 있음</p>
<p>객체는 데이터를 의미하는 속성과 데이터를 참조하고 조작하는
동작을 의미하는 메서드로 구성성/p>
<h2>속성</h2>
<p>키와 값으로 구성된 객체의 구성요소</p>
<script>
// { } 기호를 이용해서 객체 생성
let person = {
name:'혜교',
email: 'abc123@xyz987.com',
phone: '123-4567-9812'
};
</script>
<script>
// Object() 생성자를 이용해서 객체 생성 - 축약된 방법
let person2 = new Object();
person2.name = '혜교';
person2.email = 'abc123@xyz987.com';
person2.phone = '123-4567-9812';
</script>
<h2>객체 속성 접근하기</h2>
<p>객체의 속성을 출력하거나 다루려면 '객체명.키이름' 형식 사용</p>
<p> 또는 '객체명[키이름]'으로도 사용가능 </p>
<script>
document.write(person.name , person.email, person.phone, '<br>');
document.write(person['name'], person['email'], person['phone'], '<br>' )
</script>
<h2>객체의 내용 순회하기</h2>
<p>for-in 문을 사용하면 객체에 포함된 모든 속성에 접근할 수 있음</p>
<p>ES6부터 지원하는 for-of 문으로도 객체를 순회할 수 있음 </p>
<script>
// for (let 속성명 in 참조할객체명)
for (let prop in person) {
document.write( prop, ' : ',
person[prop], '<br>');
}
</script>
<h2>배열</h2>
<p>동일한 자료형의 여러 데이터를 저장하기 위한 자료구조</p>
<p>배열 생성시 [] 또는 Array()를 이용함 </p>
<script>
//빈 배열 생성 후 요소 추가
let menus = [];
menus[0] = '라면';
menus[1] = '자장면';
menus[2] = '탕수육';
menus[3] = '뚝배기불고기';
for (let i = 0; i<=3; ++i)
document.write(menus[i], ' ');
</script>
<hr>
<script>
// []에 배열 요소 바로 정의 - 초기값 지정
let games = ['디아블로','스타','워크3' ];
// 배열명.length : 배열 요소 개수
for (let i = 0; i< games.length; ++i)
document.write(games[i], ' ');
</script>
<hr>
<script>
// Array()로 배열 정의
let games2 = new Array('디아블로','스타','워크3');
// 배열명.length : 배열 요소 개수
for (let i = 0; i< games2.length; ++i)
document.write(games2[i], ' ');
</script>
<hr>
<script>
let phones = [ ]; // Array()보다는 []로 배열 생성 추천
phones.push('애플');
phones.push('삼성');
phones.push('모토로라');
phones.push('샤오미');
// for (let 인덱스 in 참조할배열명)
for (let idx in phones) {
document.write(phones[idx],' ');
} // 이거 써
document.write('<br>');
//for (let [값] of 참조할배열명)
for (let val of phones) {
document.write(val, ' ');
}
document.write('<br>');
//for (let [인덱스,값] of 참조할배열명.entries)
for (let [idx, val] of phones.entries()) {
document.write(idx,val, ' ');
}
</script>
<h2>Set 객체</h2>
<p>배열과 유사한 자료구조 </p>
<p>배열은 저장 순서를 기억하고, 중복값 허용</p>
<p>하지만, set은 중복값을 허용하지 않음 </p>
<script>
let nums = new Set();
nums.add(1); // 배열은 push, set은 요소 추가시 add사용
nums.add(3);
nums.add(7);
nums.add(9);
nums.add(9);
document.write(nums,' ', nums.size);
for (let i = 0; i<nums.size; ++i)
document.write(nums[i] ,' <br>');
for (let val of nums) // for문 x, for-of문 출력가능
document.write(val, ' ', ' <br>');
for (let idx of nums) // for-in문 x
document.write(nums[idx], ' ', ' <br>');
</script>
<h2>Map</h2>
<p>Object와 유사한 자료구조</p>
<p>즉, 키와 값으로 데이터를 저장하는 형태</p>
<p>하지만, Object는 속성과 함수를 포함할 수 있지만,
Map은 속성만 포함할 수 있음</p>
<script>
let person3 = new Map();
person3.set('name','수지'); //키와 값을 저장하려면 set 이용
person3.set('email', 'xyz987@abc123.com');
person3.set('phone', '123-4567-8912');
document.write(person3);
//맵의 값 출력하기:get(키)
document.write(person3.get('name'));
document.write(person3.get('email'));
document.write(person3.get('phone'));
document.write(person3['phone']); //대괄호 기호x
document.write(person3.phone); // . 기호 x
// for-in 으로 map 내용 출력 불가
for (let key in person3) {
document.write(person3.get(key,' '));
} ;
// forEach를 이용해서 map 내용 출력
// 맵객체명.forEach( 콜백함수정의 )
person3.forEach(function (key, item) {
document.write(key, item, ' <br>');
});
</script>
</body>
</html>