11장_자바스크립트 객체 다루기

11.1 객체란

• 정의
  키와 값으로 구성된 속성의 집합체
  ‘{}’ 기호를 이용해 생성(객체 리터럴)

// 기본 형식
const person = {}; // 빈 객체

// 예시
const person = {
	name : 'kim',
	age : 20
}

-> 모든 자료형의 데이터를 값으로 가질 수 있음(또다른 객체나 함수도 가능)

11.2 객체 속성 다루기

• 객체 속성에 접근하기
  ‘[]’ 연산자와 ‘.’ 연산자를 사용하는 두가지 방법

// 대괄호 연산자 예시
const person = {
	name : 'kim',
	age : 20
}
console.log(person["name"]);
console.log(person["age"]);

// 속성값이 배열, 객체 리터럴, 함수인 경우의 대괄호 연산자 예시
const person = {
	name : {
		firstname: 'kim',
		lastname: 'minseok'
	},
	likes:["apple", "samsung"],
	printHello: function(){
		return "Hello";
	}
}
console.log(person["name"]["firstname"]);
console.log(person["likes"][0]);
console.log(person["printHello"]());

// 마침표 연산자 예시
const person = {
	name : {
		firstname: 'kim',
		lastname: 'minseok'
	},
	age:20,
	likes:["apple", "samsung"],
	printHello: function(){
		return "Hello";
	}
}
console.log(person.name.firstname);
console.log(person.age);
console.log(person.likes[0]);
console.log(person.printHello());
// 마침표 연산자 사용 시엔 공백이 포함된 속성값을 호출하는 것은 불가능(""사용불가)

• 객체 속성 값 변경하기
  키를 통해 속성 접근 후 재할당

const person = {
	name : 'kim',
	age : 20
}
person.name = 'jeong';

• 객체 속성 동적으로 추가하기
  해당하는 키가 객체에 존재하지 않는 경우, 동적으로 새로운 속성으로서 추가

const person = {};
person.name = 'kim';
console.log(person.name); // { name : 'kim' };

• 객체 속성 동적으로 삭제하기
  위와 동일하게 동적으로 기존 속성을 삭제

const person = {
	name:'kim'
}
delete person.name;

• 객체의 데이터 관리 방법 이해하기
  기본 자료형과 참조 자료형의 관리 방법의 차이(깊은 복사, 얕은 복사)

// 깊은 복사 예시
let num = 10;
let copynum = num; // copynum은 num의 값을 할당받은 독립적인 변수

num = 20;
console.log(copynum); // num에 20을 재할당 하더라도 copynum의 값은 동일(연동X)

// 얕은 복사 예시
const person = {
	name:'kim'; // 변수 person은 데이터가 아닌 객체의 주소값만 할당
}
person.name = 'jeong'; // 주소값에 따른 참조된 원본 데이터만 변경되므로 const임에도 재할당

const copyperson = person; // 주소값을 할당했기 때문에 동일한 데이터를 가리킴

11.3 표준 내장 객체 사용하기

기본으로 내장된 자바스크립트의 객체

• 문자열을 다루는 String 객체

// 간단 예시
// length
const pw = '123';
if(pw.length < 4){
	console.log("비밀번호는 4자리");
}

// includes()
const email = "test!naver.com";
if(email.includes("@") === false){
	console.log("올바른 이메일 형식이 아닙니다.");
}

// indexOf()
const email = "test!naver.com";
if(email.indexOf("@") === -1){
	console.log("올바른 이메일 형식이 아닙니다.");
}

• 배열을 다루는 Array 객체
  크게 파괴적 메서드와 비파괴적 메서드로 나누어짐

// 간단 예시
// length
const arr = [10, 20, 30];
for(let i = 0; i < arr.length; i++){
	console.log(arr[i]);
}

// 파괴적 메서드 : push(), pop(), unshift(), shift() 
const arr = [10, 20, 30, 40];
arr.push(50); // [10, 20, 30, 40, 50]
arr.pop(); // [10, 20, 30, 40]
arr.unshift(0); // [0, 10, 20, 30, 40]
arr.shift(); // [10, 20, 30, 40]

// 비파괴적 메서드 : forEach()
const arr = [10, 20, 30, 40];
arr.forEach(function(v)){
	console.log(v);
}
console.log(arr) // 10, 20, 30, 40

• 날짜와 시간을 다루는 Date 객체
  Date 객체 호출을 통한 인스턴스 생성, 메서드로 날짜와 시간정보 설정, 날짜 간격 계산

// 기본 형식
const date = new Date(); // 현재 날짜와 시간정보 기준(월 정보는 +1)
const date1 = new Date(2022, 11, 25); // 원하는 날짜 데이터 생성(2022년 12월 25일)

// 메서드 사용 예시
const date = new Date(2022, 11, 25, 18, 30, 50);
const dateFormat = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}
					${date.getHours()}:${date.getMinutes()}:${date.getSecondes()}`;
					// 2022-12-25 18:30:50

// 날짜 간격 계산 예시
const date1 = new Date('2022-12-23');
const date2 = new Date('2022-12-25');

const dateDiff = date2.getTime() - date1.getTime();
const interval = dateDiff / (24 * 60 * 60 * 1000);
console.log(`두 날짜의 차이는 ${interval}일입니다.`); // 밀리초 단위 환산시간을 일수로 구현

• 수학 연산을 다루는 Math 객체
  수학 연산 수행 메서드 정의

종류	설명
Math.floor()	주어진 숫자와 같거나 작은 정수 중 큰 수 반환(내림)
Math.ceil()	주어진 숫자와 같거나 큰 정수 중 작은 수 반환(올림)
Math.round()	주어진 숫자를 반올림한 수와 가장 가까운 수 반환(반올림)
Math.random()	0 이상 1미만 난수 반환

// 예시
const floatNum = 10.52;
Math.floor(floatNum); // 10
Math.ceil(floatNum); // 11
Math.round(floatNum); // 11

// 난수 생성 예시
function getMaxRandom(max){
	return Math.floor(Math.random() * max) + 1;
}
const maxRandom = getMaxRandom(20); // 0 이상 20이하의 무작위 정수

11.4 브라우저 객체 모델 사용하기

웹 브라우저 자체 제공 객체

종류	설명
window	웹 브라우저 실행 시 생성(최상위 객체)
document	웹 브라우저 표시 HTML 문서 정보 포함 객체
location	현재 표시된 페이지 URL 정보 포함 객체
history	웹 브라우저 저장 방문기록 포함 객체
navigator	웹 브라우저 정보 포함 객체
screen	웹 브라우저 화면 정보 포함 객체

• window 객체의 속성과 메서드
  웹 브라우저 자체의 기능, 요소 제어

- 주요 속성
 innerWidth, innerHeight, outWidth, outHeight, screenTop/screenY, screenLeft/screenX
 pageXOffset/scrollX, pageYOffset/scrollY

- 주요 메서드
 alert(), confirm(), prompt(), open(), close(), setTimeout(), setInterval(),
 clearInterval, scrollTo(), scrollBy()

• window 객체의 기본 속성 사용하기

// 기본 속성 예시
<head>
  ...
  <style>
    ...
  </style>
</head>
<body>
  <button onclick="printInfo()">window 객체 속성</button>
  <script>
    function printInfo(){
      console.log(`웹 브라우저의 너비(innerWidth): ${window.innerWidth}`);
      console.log(`웹 브라우저의 높이(innerHeight): ${window.innerHeight}`);
      console.log(`웹 브라우저 창의 너비(outerWidth): ${window.outerWidth}`);
      console.log(`웹 브라우저 창의 높이(outerHeight): ${window.outerHeight}`);
      console.log(`웹 브라우저 창 위쪽 면과 모니터 사이의 간격(screenTop,screenY): ${window.screenTop}/${window.screenY}`);
      console.log(`웹 브라우저 창 왼쪽 면과 모니터 사이의 간격(screenLeft,screenX): ${window.screenLeft}/${window.screenX}`);
      console.log(`웹 브라우저 창의 스크롤 가로 위치(scrollX): ${window.scrollX}`);
      console.log(`웹 브라우저 창의 스크롤 세로 위치(scrollY): ${window.scrollY}`);
    }
  </script>
</body>

• 웹 브라우저에서 새 창 제어하기
  open(), close() 메서드 사용 새 창 제어

// 기본 형식
window.open(경로, 이름, 속성);

// open() 예시
<body>
	<button onclick = "popup()">팝업</button>
	<script>
		function popup() {
			window.open('popup.html', '팝업', 'width = 200, height = 100');
		}
	</script>
</body>

// close() 예시
<body>
	<button onclick = "window.close()">팝업 닫기</button>
</body>

• 웹 브라우저의 스크롤 이동하기
  scrollTo() 메서드 활용 스크롤 위치 제어

// 기본 형식
window.scrollTo(x좌표, y좌표); // 특정 좌표(연속 실행해도 특정좌표 고정)
window.scrollBy(x좌표, y좌표); // 상대적 위치(연속 실행하는 만큼 +)

// 객체 리터럴 전달 예시
window.scrollTo({top:400, behavior:'smooth'}); // behavior 속성 추가 가능